[javascript] 웹캠에서 손 인식하기

웹자바스크립트에서도 충분히 얼굴인식과 손 인식이 가능한데,

다른 사람들이 만들어놓은 모듈을 cdn 형식으로 불러오면 가능하다.

 

손을 추적하는데 사용한 모듈은 handtrack.js로 아래 링크에서 만나볼 수 있다.

https://github.com/victordibia/handtrack.js/

victordibia/handtrack.js

 

 

 

예시 : 

 

카메라 설정을 허용하고 아래 웹캠에서 내 손을 비춰보자

웹캠에서 손이 bbox 형태로 잡히는 것을 볼 수 있을 것이다.

    <div>
        <input type="button" id="btn_loading" value="모듈 로드중...">
    </div>
    <canvas id="canvas" width="400" height="400"></canvas>
    <video id="video" autoplay="true" width="400" height="400"></video>
 
    <script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"></script>
    <script src="./js/detect.js"></script>
 
    <script>
        let lmodel;
        const my_video = document.getElementById("video");
        const my_canvas = document.getElementById("canvas");
        const bt_loading = document.getElementById("btn_loading");
        const context = my_canvas.getContext("2d");
 
        my_video.style.display = "none";
        
        function start_video() {
            var video = document.querySelector('#video');
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices
                    .getUserMedia({
                        video: true
                    })
                    .then(function(stream) {
                        video.srcObject = stream;
                        setInterval(run_detection, 10);
                    })
                    .catch(function(err0r) {
                        console.log(err0r);
                    });
            }
        }
 
        function run_detection() {
            lmodel.detect(my_video).then(predictions => {
                console.log(predictions);
                lmodel.renderPredictions(predictions, my_canvas, context, video);
            });
        }
        const modelParams = {
            flipHorizontal: true, // flip e.g for video
            imageScaleFactor: 0.7, // reduce input image size for gains in speed.
            maxNumBoxes: 20, // maximum number of boxes to detect
            iouThreshold: 0.5, // ioU threshold for non-max suppression
            scoreThreshold: 0.79 // confidence threshold for predictions.
        };
        handTrack.load(modelParams).then(model => {
            lmodel = model;
            
            btn_loading.style.display = "none";
            start_video();
        });
    </script>