TensorFlow.jsとpose-detection.jsでカメラで撮影した全身映像からリアルタイム姿勢検出
TensorFlow.jsとpose-detection.jsを使うとWEBカメラで撮影した全身映像からリアルタイムに姿勢検出ができます。
「カメラを使用する」が表示されたらを「許可」をクリックして、しばらく待って（ロードに時間がかかります）全身をカメラに映してください。
ソースコード
<canvas id="preview"></canvas> <!-- CDNを用いる場合は以下を入れる -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script> <script> var detector,model,img,prev,prev_ctx,video; async function main() { video=document.createElement('video'); video.setAttribute("autoplay",""); video.setAttribute("muted",""); video.setAttribute("playsinline",""); video.onloadedmetadata = function(e){video.play();}; prev=document.getElementById("preview"); prev_ctx=prev.getContext("2d"); //カメラ使用の許可ダイアログが表示される navigator.mediaDevices.getUserMedia( //マイクはオフ, カメラの設定 前面カメラを希望する 640×480を希望する {"audio":false,"video":{"facingMode":"user","width":{"ideal":640},"height":{"ideal":480}}} ).then( //許可された場合 function(stream){ video.srcObject = stream; //17個のキーポイントを検出する高速かつ正確なモデル model = poseDetection.SupportedModels.MoveNet; //複数の17個のキーポイントを検出するモデル //model = poseDetection.SupportedModels.PoseNet; poseDetection.createDetector(model).then(function(res){ detector=res; img=document.createElement('img'); //0.5秒後にスキャンする setTimeout(Scan,500,true); }); } ).catch( //許可されなかった場合 ); function Scan(first){ if(first){ //選択された幅高さ w=video.videoWidth; h=video.videoHeight; //画面上の表示サイズ prev.style.width=(w/2)+"px"; prev.style.height=(h/2)+"px"; //内部のサイズ prev.setAttribute("width",w); prev.setAttribute("height",h); } prev_ctx.drawImage(video,0,0,w,h); detector.estimatePoses(prev).then(function(res){ for(let i=0;i<res.length;i++){ prev_ctx.beginPath(); prev_ctx.lineWidth=3; prev_ctx.strokeStyle="rgb(255,255,255)"; prev_ctx.moveTo(res[i].keypoints[3].x,res[i].keypoints[3].y);//right ear prev_ctx.lineTo(res[i].keypoints[1].x,res[i].keypoints[1].y);//right eye prev_ctx.lineTo(res[i].keypoints[0].x,res[i].keypoints[0].y);//nose prev_ctx.lineTo(res[i].keypoints[2].x,res[i].keypoints[2].y); prev_ctx.lineTo(res[i].keypoints[4].x,res[i].keypoints[4].y); prev_ctx.stroke(); prev_ctx.beginPath(); prev_ctx.moveTo(res[i].keypoints[15].x,res[i].keypoints[15].y);//right ankle prev_ctx.lineTo(res[i].keypoints[13].x,res[i].keypoints[13].y);//right knee prev_ctx.lineTo(res[i].keypoints[11].x,res[i].keypoints[11].y);// prev_ctx.lineTo(res[i].keypoints[5].x,res[i].keypoints[5].y);// prev_ctx.lineTo(res[i].keypoints[7].x,res[i].keypoints[7].y);// prev_ctx.lineTo(res[i].keypoints[9].x,res[i].keypoints[9].y);// prev_ctx.stroke(); prev_ctx.beginPath(); prev_ctx.moveTo(res[i].keypoints[16].x,res[i].keypoints[16].y);//left leg prev_ctx.lineTo(res[i].keypoints[14].x,res[i].keypoints[14].y);//left knee prev_ctx.lineTo(res[i].keypoints[12].x,res[i].keypoints[12].y);// prev_ctx.lineTo(res[i].keypoints[6].x,res[i].keypoints[6].y);// prev_ctx.lineTo(res[i].keypoints[8].x,res[i].keypoints[8].y);// prev_ctx.lineTo(res[i].keypoints[10].x,res[i].keypoints[10].y);// prev_ctx.stroke(); prev_ctx.beginPath(); prev_ctx.moveTo(res[i].keypoints[5].x,res[i].keypoints[5].y);// prev_ctx.lineTo(res[i].keypoints[6].x,res[i].keypoints[6].y);// prev_ctx.stroke(); prev_ctx.beginPath(); prev_ctx.moveTo(res[i].keypoints[11].x,res[i].keypoints[11].y);// prev_ctx.lineTo(res[i].keypoints[12].x,res[i].keypoints[12].y);// prev_ctx.stroke(); } setTimeout(Scan,33,false); }); } } window.addEventListener('load',main); &tl;/script>