WEBサイトでカメラ(WebCam)画像から「Google MediaPipe/hands.js」を使用して両手のランドマークを検出して表示します
カメラ使用を許可してしばらくすると、カメラ映像が表示されます
カメラに両手を映してください。ランドマークを推定表示します。
ソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0,user-scalable=yes"> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.1/hands.js" crossorigin="anonymous"></script> <script type="module"> let video,can,ctx; window.addEventListener('load', async function(event){ video = document.querySelector('.video'); can = document.querySelector('.can'); ctx = can.getContext('2d'); const hands = new Hands({locateFile: function(file){ return `https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.1/${file}`; }}); hands.setOptions({ baseOptions: { modelAssetPath: "./hand_landmarker.task", //.taskファイルを指定する //delegate: "GPU" //CPU or GPUで処理するかを指定する }, maxNumHands: 2, minDetectionConfidence: 0.5, minTrackingConfidence: 0.5, }); hands.onResults(onResults); const camera = new Camera(video, { onFrame: async function(){ await hands.send({image: video}); }, width: 640, height: 480 }); camera.start(); }); function onResults(results) { ctx.save(); ctx.clearRect(0, 0, can.width, can.height); ctx.drawImage( results.image, 0, 0, can.width, can.height); if (results.multiHandLandmarks) { for (let landmarks of results.multiHandLandmarks) { drawConnectors(ctx, landmarks, HAND_CONNECTIONS, {color:'#0F0', lineWidth:5}); drawLandmarks(ctx, landmarks, {color:'#F00', lineWidth:0, fillColor:'#800', radius:3}); } } ctx.restore(); } </script> </head> <body> <div class="container"> <video class="video" style="display:none;"></video> <canvas class="can" width="640" height="480" style="transform:scale(-1,1);width:90%;max-width:640px;height:auto;"></canvas> </div> </body> </html>