@kinojs
Начинающий разрабочтик, WEB

На сколько практично передавать видео онлайн через WebSocket, используя canvas?

Пытаюсь сделать приложение-стрим. Не надеюсь вообще на поддержку со стороны телефонов, так как там с этим не очень, максимум Chrome и Firefox.И так получилось, что я вообще не понимаю как передавать видео онлайн.То есть я новичек, и сталкиваюсь с этой задачей в первый раз. Сделал свой костыль на NodeJs, подключил socket.io и все такое. на клиенте код примерно такой:

<video autoplay hidden="hidden"></video>

<canvas hidden="hidden" width="640" height="480"></canvas>

<img hidden="hidden" id="cast">


;(function(){
	var socket = io();
	
	var Stream = function () {
		
		var St = this;
		
		St.DOMObjects = {
			"dom_video" : document.querySelector('video'),
			"dom_canvas" : document.querySelector('canvas'),
			"dom_image_cast" : document.getElementById('cast')
		}
		
		St.sendLive = function (ctx, vid) {
			ctx.drawImage(vid, 0, 0);
			socket.emit('videoCast', {
				base64: ctx.canvas.toDataURL('image/jpeg', 1080)
			});
			requestAnimationFrame(function (){
				St.sendLive(ctx, vid);
			});
		}

		this.live = function () {
			var vid = St.DOMObjects["dom_video"],
				ctx = St.DOMObjects["dom_canvas"].getContext('2d');
			navigator.getUserMedia = navigator.getUserMedia ||  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
			
			navigator.getUserMedia({
				video: true
			}, function (media) {
				//Успешно загружено
				vid.removeAttribute('hidden');
				vid.src = window.URL.createObjectURL(media);
				St.sendLive(ctx, vid);
			}, function (err) {
				//Ошибка
			});
		}

		St.getVideo = function () {
			St.DOMObjects["dom_image_cast"].removeAttribute("hidden");
			socket.on('vidSend', function (data){
				St.DOMObjects["dom_image_cast"].src = data.base64;
			});
		}
	}
	var stream_object = new Stream();
	socket.on('state', function (state) {
		(state != true) ? stream_object.live() : stream_object.getVideo();
	});

})();


Если вы сразу ответите, что такой подход не нужен, я пойму. Так как сам не уверен в его правильности. Пожалуйста, подскажите, что нужно-то использовать для качественной и быстрой передачи видео пока что только HTMl5.
  • Вопрос задан
  • 880 просмотров
Решения вопроса 1
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
видео не передается через сокет.

ключевые слова для гуглинга:
nginx video stream
rtmp
ffmpeg

ну или webrtc
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Coder321
если уже юзаете ноду тогда
const { createReadStream } = require('fs');
const { resolve } = require('path');
app.get('/stream', (req, res) => {
    const readStream = createReadStream(resolve(__dirname, 'ypurFilePath'));
    readStream.on('open', function () {
        readStream.pipe(res);
    });
    readStream.on('error', res.end(err));
    res.on('close', readStream.close());
    res.on('error', readStream.close());
});
Ответ написан
@Levhav
Возьмусь за разработку проектов любой сложности.
Вы передаёте покадрово изображения. Это расточительно слишком. Лучше настройте себе FreeSwitch для webrtc видео и аудио чатов или другой специализированый под это софт. На nodejs вы только время потратите так как работу с видео потоками реализуют обычно на C/C++ из за высоких требований к производительности, а иногда даже используют аппаратные решения.
И обмен медиа потоком идёт через rtmp, rtp или похожие протоколы. Но не как не через websocets
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы