jott - tfjsmobilenet

tfjsmobilenet

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

window.addEventListener('load', function() {
    let video = document.querySelector("#webcam_vid");
    
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
                video: true
            })
            .then(function(stream) {
                video.srcObject = stream;
            })
            .catch(function(error) {
                alert("Couldn't connect to camera!");
            });
    }

    let classifications = document.querySelector("#classification");
    // Load the model.
    mobilenet.load().then(model => {
    	function classify() {
            // Classify the image.
            let t = Date.now();
            model.classify(video).then(predictions => {
                while (classifications.firstChild) {
                    classifications.removeChild(classifications.lastChild);
                }
                predictions.unshift({className: Math.round(1000 / (Date.now() - t)) + " fps"});

                for (let pred of predictions) {
                    let span = document.createElement('span');
                    span.textContent = pred.className;
                    classifications.appendChild(span);
                    let br = document.createElement('br');
                    classifications.appendChild(br);
                }
                setTimeout(classify, 1);
            });
        }
        video.addEventListener('loadeddata', classify);
    });
});

</script>
</head>


<body>
<video id="webcam_vid" autoplay="true" muted="true" playsinline="true" id="videoElement"></video>
<div id="classification"></div>

</body>
</html>