Две камеры в HTM5 с помощью Socket.io - PullRequest
Новая
       70

Две камеры в HTM5 с помощью Socket.io

0 голосов
/ 22 марта 2020

Мне нужно добавить два видеоисточника в файл HTML и транслировать их, я не могу добавить другую камеру. Они подключены к моему P C через USB.

У меня есть для одной камеры, и это создает разъем. Мне нужно добавить другое, я получаю идентификатор видеовхода, но не знаю, как разместить его на моей html странице.

в потоковом режиме. html

...
<body>
    ...
    <video id="video"></video>
    <canvas id="canvas" width="680" height="420"></canvas>
    // Implement the code for the second camera
    <video id="video2"></video>
    <canvas id="canvas2" width="680" height="420"></canvas>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        (function (d, w, n, io) {
            var io = io();
            var startCamera = false;
            var video = d.querySelector('#video');
            var canvas = d.querySelector('#canvas');
            var context = canvas.getContext('2d');

            n.streaming = (
                n.getUserMedia ||
                n.webkitGetUserMedia ||
                n.mozGetUserMedia ||
                n.msGetUserMedia
            )

            // Here I get the camera IDs but I get stucked 
            n.mediaDevices.enumerateDevices().then((function (devices) {
                devices.forEach(function (device) {
                    console.log(device);
                })
            }))

            n.streaming({
                video: true,
                audio: false
            }, function (stream) {
                startCamera = true
                video.srcObject = stream;
                video.play();
            }, function (err) {
                alert('error al acceder a la camara web: ' + err)
            })

            w.playVideo = (function (cb) {
                return w.requestAnimationFrame ||
                    w.webkitRequestAnimationFrame ||
                    w.mozRequestAnimationFrame ||
                    w.msRequestAnimationFrame ||
                    function (cb) {
                        w.setTimeout(cb, 1000 / 100)
                    }
            })()

            function streamVideo(context, canvas, video) {
                var outputStream = canvas.toDataURL('image/jpeg', .2)
                context.drawImage(video, 0, 0)

                if (startCamera)
                    io.emit('streaming', outputStream)

                playVideo(function () {
                    streamVideo(context, canvas, video)
                })
            }

            w.addEventListener('load', function () {
                video.autoplay = true
                video.style.display = 'none'
                streamVideo(context, canvas, video)
            })
        })(document, window, navigator, io)
    </script>
</body>
...