使用 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