JSFiddle - React, Tailwind, and code Playground

by Casufi

HTML

<div id="allow">▲ ▲ ▲ Разрешите использовать камеру ▲ ▲ ▲
    <br/>( Сверху текущей страницы )</div>
<div class="item"> <span> video </span>

    <video id="video" width="320" height="240" autoplay="autoplay"></video>
</div>
<div class="item"> <span> canvas </span>

    <canvas id="canvas" width="320" height="240"></canvas>
</div>

JavaScript

var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    var allow = document.getElementById('allow');
    var context = canvas.getContext('2d');
    var videoStreamUrl = false;

    video.addEventListener('play', function () {
        setInterval(function () {
            if (video.paused || video.ended) return;
            context.fillRect(0, 0, w, h);
            context.drawImage(v, 0, 0, w, h);
            console.log("get image");
        }, 100);
    }, false);

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL.createObjectURL = window.URL.createObjectURL || window.URL.webkitCreateObjectURL || window.URL.mozCreateObjectURL || window.URL.msCreateObjectURL;

    navigator.getUserMedia({
        video: true
    }, function (stream) {
        video.play
        // разрешение от пользователя получено
        // скрываем подсказку
        allow.style.display = "none";
        // получаем url поточного видео
        videoStreamUrl = window.URL.createObjectURL(stream);
        // устанавливаем как источник для video 
        video.src = videoStreamUrl;
    }, function () {
        console.log('что-то не так с видеостримом или пользователь запретил его использовать :P');
    });