Потоковое видео с веб-камеры с помощью node.j и socket.io
Я хочу сделать потоковую передачу, идея в том, что видео, снятое на веб-камеру, воспроизводится на HTML-странице сервера и в свою очередь передается на общедоступную HTML-страницу; однако мне удалось воспроизвести видео на странице сервера, но не на общедоступной странице.
Я использую: Socket.io, node.js и экспресс, вот и все.
Можешь мне помочь? Коды следующие:
Файл 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.info( `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.info( 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.info( `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>
Я надеюсь, что вы можете мне помочь. С наилучшими пожеланиями.
Ответы 2
Потоковое видео для нескольких пользователей — действительно сложная проблема, для решения которой, к сожалению, требуется обширная инфраструктура. Вы не сможете передавать видеоданные через веб-сокет. WebRTC также не является жизнеспособным решением для того, что вы описываете, потому что, как вы упомянули, протокол WebRTC является P2P, так как при потоковой передаче пользователю необходимо установить прямое соединение со всеми «зрителями». Это, очевидно, не будет масштабироваться дальше нескольких «зрителей». WebRTC больше подходит для прямых видеозвонков, например, в Skype.
Вот статья, описывающая архитектуру, используемую довольно популярным сервисом потокового вещания. Как вы можете видеть, для создания живого видео в любом масштабе потребуются значительные ресурсы.
Я нашел один репозиторий Git
https://github.com/WebDevSimplified/Zoom-Clone-With-WebRTC
он работает нормально, но они используют peer.js, не уверен, что это обязательно
Спасибо. Мне удалось найти решение моей проблемы, но я благодарю вас за вашу поддержку.
Я думаю, вы забыли ссылку на статью, которую вы упомянули.