2_1_3:MobileNetとp5.jsを使ったWebカメラ画像分類 ml5.js JavaScript

以下は「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()を呼び出すことで、ビデオに映った被写体を連続して推測することができます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA