Потоковое видео с веб-камеры с помощью node.j и socket.io - PullRequest
Новая
       10

Потоковое видео с веб-камеры с помощью node.j и socket.io

0 голосов
/ 02 марта 2019

Я хочу создать потоковую передачу, идея в том, что видео, снятое на веб-камеру, воспроизводится на HTML-странице сервера и, в свою очередь, передается на общедоступную HTML-страницу;однако мне удалось воспроизвести видео на странице сервера, но не на общедоступной странице.

Я использую: Socket.io, node.js и express, вот и все.

Вы можете мне помочь?Коды следующие:

Файл Index.js: 

'use strict'

const app = require('express')(),
      http = require('http').createServer(app),
      io = require('socket.io')(http),
      port = process.env.port || 3000,
      publicDir = `${__dirname}/public`


http.listen( port, ()=>{
    console.log( `Puerto corriendo por el puerto: ${port}.` )
} )

app
    .get( '/', (req, res)=>{
        res.sendFile(`${publicDir}/client.html`)
    } )
    .get( '/streaming', (req, res)=>{
        res.sendFile(`${publicDir}/server.html`)
    } )

io.on('connection', (socket)=>{
    socket.on( 'streaming', (image)=>{
        io.emit( 'play stream', image )
        console.log( image )
    } )
})

HTML-файл клиента: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cliente de Streaming</title>
</head>
<body>
    <h1>Cliente de Streaming</h1>
    <p>Esta pagina recibe en tiempo real el streaming de la camara web del usuario.</p>
    <img id="streaming">
    <script src="/socket.io/socket.io.js"></script>
    <script>
    ( (d, io)=>{
        'use strict'
        var io = io()
        io.on( 'play stream', (image)=>{
            d.querySelector('#streaming').src= image
        } )
    } )()

    </script>
</body>
</html>

Серверный файл HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Servidor de Streaming</title>
</head>
<body>
    <h1>Servidor de Streaming</h1>
    <p>Esta pagina transmite en tiempo real el Streaming de la camara Web</p>
    <video id="video" src=""></video>
    <canvas id="canvas" width="1280" height="720"></canvas>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        ((d, w, io)=>{
            'use strict'
            var io= io();
            var video = d.querySelector('#video'),
                canvas = d.querySelector('#canvas'),
                context = canvas.getContext('2d'),
                startCamera = true,
                constra = {audio: true, video: { width: 1280, height: 720 }}

            navigator.mediaDevices.getUserMedia( constra ).then(
                (mediaStream)=>{
                    video.srcObject = mediaStream;
                    video.onloadedmetadata = (e)=> {
                        video.play();
                    };
                    // video.src = w.URL.createObjectURL(mediaStream)
                }
            ).catch( (e)=>{
                console.log( `Error al cargar el video: Nombre de error: ${e.name}, Mensaje de error: ${e.message}.` )
            } )

            w.playVideo = ( (cb)=>{
                return w.requestAnimationFrame
                    // function (cb) {
                    //  w.setTimeout(cb, 1000/100)
                    // }
            })()

            function streamVideo (context, canvas, video) {
                var outputStream = canvas.toDataURL('image/jpg', 0.20)
                context.drawImage( video, 0, 0 )
                if (startCamera){
                    io.emit( 'streaming', outputStream )
                }
                playVideo ( ()=>{
                    streamVideo( context, canvas, video )
                } )
            }

            w.addEventListener( 'load', ()=>{
                video.autoplay = true
                video.style.display = 'none'
                streamVideo(context, canvas, video)
            } )

        })(document, window, io)
    </script>
</body>
</html>

Надеюсь, вы мне поможете.С наилучшими пожеланиями.

...