7_3：ビデオに対するPoseNetサンプル(１人の姿勢検出) ml5.js JavaScript

本稿は「ml5-examples/p5js/PoseNet/PoseNet_webcam」で公開されているサンプルの解説です。

コンピュータにとって、ビデオはつながった静止画を高速で表示することと同じなので、ビデオに映った人の姿勢検出も画像のときと変わりありません。

let video;
let poseNet;
let poses = [];

function setup() {
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.size(width, height);

    // 新しいposeNetを１人検出で作成する
    poseNet = ml5.poseNet(video, modelReady);
    // これにより、新しい姿勢が検出されるたびに、
    // グローバルな変数poses配列に姿勢データを入れるイベントが設定される。
    poseNet.on('pose', function(results) {
        poses = results;
    });
    // video要素は隠し、キャンバスだけ見えるようにする。
    video.hide();
}

function modelReady() {
    select('#status').html('モデルが読み込まれた');
}

function draw() {
    image(video, 0, 0, width, height);

    // keypoint全部とskeleton全部を描画するために２つの関数を呼び出す。
    drawKeypoints();
    drawSkeleton();
}

// 検出されたkeypoint上に円を描画する
function drawKeypoints() {
    for (let i = 0; i < poses.length; i++) {
        let pose = poses[i].pose;
        for (let j = 0; j < pose.keypoints.length; j++) {
            let keypoint = pose.keypoints[j];
            if (keypoint.score > 0.2) {
                fill(255, 0, 0);
                noStroke();
                ellipse(keypoint.position.x, keypoint.position.y, 10, 10);
            }
        }
    }
}

// skeleton(骨格)を描画する
function drawSkeleton() {
    for (let i = 0; i < poses.length; i++) {
        let skeleton = poses[i].skeleton;
        for (let j = 0; j < skeleton.length; j++) {
            let partA = skeleton[j][0];
            let partB = skeleton[j][1];
            stroke(255, 0, 0);
            line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
        }
    }
}

サンプルを実際に動作させてみると分かりますが、これはまさにモーションキャプチャです。

「kschaer/poseToThree」では、ml5.jsの基盤であるTensorFlow.jsと3DのThree.jsを使った面白い実験が公開されています。

「poseToThree: an experiment in pose-based browser interaction」