使用 node.j 和 socket.io 流式传输网络摄像头视频

Question

我想做一个流媒体，想法是在网络摄像头上捕获的视频在服务器的 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>

我希望你能帮助我。 此致。

Answer 1

我找到了一个 Git 存储库

https://github.com/WebDevSimplified/Zoom-Clone-With-WebRTC

它工作正常，但他们使用 peer.js 不确定它是强制性的

Answer 2

视频流向多个用户是一个非常困难的问题，不幸的是需要大量的基础设施才能实现。 您将无法通过 websocket 流式传输视频数据。 WebRTC 也不是您所描述的可行解决方案，因为正如您所提到的，WebRTC 协议是 P2P，因为在流媒体中，用户需要与所有“观众”建立直接连接。 这显然不会超过少数“观众”。 WebRTC 更适用于直接视频通话，例如在 Skype 中。

这里有一篇文章描述了一个有点流行的实时流媒体服务所使用的架构。 如您所见，实现任何规模的实时视频都需要大量资源。

使用 node.j 和 socket.io 流式传输网络摄像头视频

问题描述

2 个解决方案

解决方案1
0 2021-09-29 05:48:17

解决方案2
-2 2019-10-11 06:07:49

使用 node.j 和 socket.io 流式传输网络摄像头视频

问题描述

2 个解决方案

解决方案1 0 2021-09-29 05:48:17

解决方案2 -2 2019-10-11 06:07:49

解决方案1
0 2021-09-29 05:48:17

解决方案2
-2 2019-10-11 06:07:49