以下は「ml5-examples/p5js/ImageClassification/ImageClassification_Video」で公開されているサンプルのコード解説です。
次のリンクをクリックすると、このサンプルの動作が確認できます(パソコンにカメラを接続しておきます)。
「MobileNetとp5.jsを使ったWebカメラ画像分類」
index.htmlの<body>要素
<body>
<h1>MobileNetとp5.jsを使ったWebカメラ画像分類</h1>
<p id='status'>モデルのロード中...</p>
<p>MobileNetモデルは<span id="probability">...</span>の信頼度で<span id="result">...</span>と分類しました。 </p>
<script src="sketch.js"></script>
</body>sketch.js
let classifier;
let video;
function setup() {
noCanvas();
// カメラからの入力を取得
// https://p5js.org/reference/#/p5/createCapture
// Webカメラからのオーディオ/ビデオフィードを含んだ、新しいHTML5 <video>要素を作成する。 VIDEOは定数
video = createCapture(VIDEO);
// ml5.imageClassifier(model, ?video, ?options, ?callback)
// ml5.imageClassifier()メソッドを、MobileNetとビデオ(p5のvideo要素)で初期化
classifier = ml5.imageClassifier('MobileNet', video, modelReady);
}
function modelReady() {
// モデルの準備ができたらその状態を示す
select('#status').html('モデルの準備完了');
// classifyVideo()関数を呼び出して、ビデオの分類を開始
classifyVideo();
}
// 現在のビデオフレームに関して、推測を得る
function classifyVideo() {
// https://ml5js.org/docs/ImageClassifier
// .predict(?callback)
classifier.predict(gotResult);
}
// 結果を得たら、
function gotResult(err, results) {
// 結果は、確率の順に配列に入っている。
select('#result').html(results[0].className);
select('#probability').html(nf(results[0].probability, 0, 2));
// 推測をつづける。
classifyVideo();
}推測する入力が画像からビデオに変わっただけで、画像の推測と大きな変化はありません。
最初に自動的に呼び出されるsetup()関数では、p5.jsのcreateCapture()関数を使ってp5の<video>要素を作成し、ml5.imageClassifier()にMobileNetと今作成したビデオ(video)、コールバック関数を渡して、分類器(classifier)を作成しています。
その後は画像推測と同様で、modelReady()からclassifyVideo()を呼び出しここでビデオの推測を行って、その結果をgotResult()関数で処理して、ページに表示しています。gotResult()関数の最後でclassifyVideo()を呼び出すことで、ビデオに映った被写体を連続して推測することができます。