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

将视频流传输到多个用户是一个非常困难的问题，不幸的是，要实现这一目标，需要广泛的基础架构。您将无法通过网络套接字流式传输视频数据。 WebRTC也不是您所描述内容的可行解决方案，因为正如您提到的，WebRTC协议是P2P，因为在流媒体用户中，将需要直接与所有“查看者”建立连接。这显然不会超出几个“查看者”的范围。 WebRTC更适合直接视频通话，例如在Skype中。

这里是描述某种流行的实时流服务使用的体系结构的文章。如您所见，实现任何规模的实时视频都需要大量资源。

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

1 个答案: