Streaming webcam video with node.j and socket.io
Question
I want to make a streaming, the idea is that the video that is captured on a webcam is reproduced on an HTML page of the server and in turn is transmitted to a public HTML page; however, I have managed to get the video to be reproduced on the server's page but not on the public page.
I'm using: Socket.io, node.js and express, that's all.
Can you help me? The codes are the following:
Index.js file:
'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 )
} )
})
Client HTML file:
<!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>
Server HTML file:
<!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>
I hope you can help me. Best regards.
2 answers
solution1
0 2021-09-29 05:48:17
I Found One Git repository
https://github.com/WebDevSimplified/Zoom-Clone-With-WebRTC
it's working fine but they are using peer.js not sure it's mandatory
solution2
-2 2019-10-11 06:07:49
Video streaming to multiple users is a really hard problem that unfortunately requires extensive infrastructure to achieve. You will not be able to stream video data through a websocket. WebRTC is also not a viable solution for what you are describing because, as you mentioned, the WebRTC protocol is P2P, as in the streaming user will need to make a direct connection to all the 'viewers'. This will obviously not scale beyond a few 'viewers'. WebRTC is more for direct video calls like in Skype for example.
Here is an article describing the architecture used by a somewhat popular live streaming service. As you can see achieving live video at any sort of scale will require considerable resources.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.