Utilizzare la webcam con Javascript

Mattepuffo's logo
Utilizzare la webcam con Javascript

Utilizzare la webcam con Javascript

Ebbene si, anche con Javascript è possibile usare la webcam.

Ed è anche abbastanza semplice usando l'interfaccia MediaDevices dell'oggetto navigator, ed il metodo getUserMedia.

Qui un pò di documentazione su MediaDevices e getUserMedia.

La documentazione di Mozilla è sempre buona e abbastanza precisa.

Ma vediamo un esempio abbastanza basico:

<!DOCTYPE html>
<html>
    <head>
        <title>Video</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            video { border: 2px solid #666;transform: rotateY(180deg); }
        </style>
    </head>
    <body>
        <video></video>
        <br>
        <button>Start camera</button>
    </body>
    <script type="text/javascript">
        navigator.mediaDevices = navigator.mediaDevices || ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
            getUserMedia: function (c) {
                return new Promise(function (y, n) {
                    (navigator.mozGetUserMedia || navigator.webkitGetUserMedia).call(navigator, c, y, n);
                });
            }
        } : null);
        if (!navigator.mediaDevices) {
            throw new Error("getUserMedia() not supported.");
        }

        var video = document.querySelector('video');
        var constraints = {
            audio: false,
            video: true
        };
        function startCamera() {
            return navigator.mediaDevices.getUserMedia(constraints)
                    .then(function (stream) {
                        video.src = URL.createObjectURL(stream);
                        video.play();
                        return stream;
                    })
                    .catch(function (error) {
                        console.error(error);
                    });
        }
        var streamOn = null;
        document.querySelector('button').onclick = function () {
            var button = this;
            if (streamOn !== null) {
                streamOn.stop();
                URL.revokeObjectURL(video.src);
                button.textContent = 'Start camera';
            } else {
                button.textContent = 'Starting camera';
                startCamera().then(function (stream) {
                    streamOn = stream;
                    button.textContent = 'Stop camera';
                });
            }
        }
    </script>
</html>

Ho impostato anche una regola CSS per "ruotare" il video, e non vedersi come ad uno specchio.

Ovviamente non stiamo trasmettendo nulla in questo esempio, ma stiamo solo usando la webcam e vedendo noi stessi.

Però è un buon punto di partenza.

Enjoy!


Condividi

Commentami!