posenet/1_webcam-poses.html

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.1.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet@1.0.3"></script>

    <script src="./drawingHelpers.js"></script>
    <script src="../webcam.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

    <div id='main'>
        <video id="webcam" autoplay playsinline width="640" height="480" style="transform: scaleX(-1); display: none;">
        </video>
        <canvas id="output" width="640" height="480"></canvas>
    </div>
    <script>
        const flipHorizontal = true;
        const imageScaleFactor = 0.5;
        const maxPoseDetections = 6;
        const minPoseConfidence = 0.2;

        const outputStride = 16;
        const minPartConfidence = 0.1;
        const nmsRadius = 30.0;

        window.onload = async () => {
            const model = await posenet.load(0.75);
            const video = await setupWebcam(document.getElementById('webcam'));
            await detectPosesInRealTime(video, model);
        };

        async function detectPosesInRealTime(video, model) {
            const canvas = document.getElementById('output');
            const ctx = canvas.getContext('2d');

            while(true) {
                const poses = await model.estimateMultiplePoses(video, imageScaleFactor, flipHorizontal, outputStride,
                    maxPoseDetections, minPartConfidence, nmsRadius);

                renderVideoFeedToContext(ctx, video);

                for (let pose of poses) {
                    if (pose.score >= minPoseConfidence) {
                        drawPoseToContext(pose.keypoints, minPartConfidence, ctx);
                        // drawHatToContext(pose.keypoints, minPartConfidence, ctx);
                    }
                }

                await tf.nextFrame();
            }
        }

    </script>
</body>

</html>