Day22 TensorFlow.js 使用PoseNet

第 11 屆 iThome 鐵人賽

DAY 23

自我挑戰組

Tensorflow.js初學筆記系列第 23 篇

11th鐵人賽

qu4qu426com123

2019-10-09 22:47:45

2646 瀏覽

分享至

使用的是Pose Detection in the Browser: PoseNet Model
一樣是code

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
    <style>
        video {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <canvas id="detect_result"></canvas>
    <video autoplay playsinline muted id="webcam"></video>
    <script src="index.js"> </script>
</body>

</html>

index.js

async function app() {
    const model = await posenet.load({
        architecture: 'MobileNetV1',
        outputStride: 16,
        multiplier: 0.75
    });
    const webcamElement = document.getElementById('webcam');
    const canvas = document.getElementById('detect_result');
    const context = canvas.getContext('2d');

    let showResult = async function () {
        canvas.width = webcamElement.videoWidth;
        canvas.height = webcamElement.videoHeight;
        context.drawImage(webcamElement, 0, 0);
        const pose = await model.estimateSinglePose(webcamElement, {
            flipHorizontal: false
        });
        console.log(pose);
        pose.keypoints.forEach(element => {
            const {
                x,
                y
            } = element.position;
            context.beginPath();
            context.arc(x, y, 20, 0, 2 * Math.PI);
            context.fillStyle = "green";
            context.fill();
        });
        setTimeout(function () {
            showResult();
        }, 300);
    }
    let setupWebcam = function () {
        return new Promise((resolve, reject) => {
            const navigatorAny = navigator;
            navigator.getUserMedia = navigator.getUserMedia ||
                navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||
                navigatorAny.msGetUserMedia;
            if (navigator.getUserMedia) {
                navigator.getUserMedia({
                        video: true
                    },
                    (stream) => {
                        webcamElement.srcObject = stream;
                        webcamElement.addEventListener('loadeddata', () => resolve(),
                            false);
                    },
                    (err) => reject(err));
            } else {
                reject("getUserMedia failed");
            }
        });
    }
    setupWebcam().then(
        () => {
            console.log("shoq");
            showResult();
        },
        (err) => {
            console.log(err);
        }
    )

}
app();