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

Question

[Кирилл Новак]

Пытаюсь сделать приложение-стрим. Не надеюсь вообще на поддержку со стороны телефонов, так как там с этим не очень, максимум 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.

Answer 1

[Александр Аксентьев]

видео не передается через сокет.

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

ну или webrtc

Comments

[Кирилл Новак]

Спасибо за помощь.

Answer 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());
});

Comments

[Кирилл Новак]

А как видео записывать? Если с клиента, его же нужно получается стримить на сервер, а потом уже с сервера, так? Вот вопрос как на сервер его стримить сразу...

[Coder321]

Кирилл Новак, не совсем понял вопрос. Вам нужно смотреть видео на клиенте или стримить видео , допустим с камеры, другому юзеру?

[Кирилл Новак]

Coder321, записываем в браузере -> второй клиент видет онлайн запись с камеры из браузера.
То есть 1 клиент: запись камеры, браузер

2 клиент: просмотр того, что записывает 1 клиент, в Android приложении, в браузере, и т.д

[Coder321]

Кирилл Новак, тогда думаю WebRTC для вас то что нужно

Answer 3

[Виктор]

Вы передаёте покадрово изображения. Это расточительно слишком. Лучше настройте себе FreeSwitch для webrtc видео и аудио чатов или другой специализированый под это софт. На nodejs вы только время потратите так как работу с видео потоками реализуют обычно на C/C++ из за высоких требований к производительности, а иногда даже используют аппаратные решения.
И обмен медиа потоком идёт через rtmp, rtp или похожие протоколы. Но не как не через websocets

Comments

[Кирилл Новак]

Спасибо за развернутый ответ. Но если я знаю в C++ максимум ООП и основы, которые каждый студент знает?

[Виктор]

Кирилл Новак: Я не предлагаю писать на C++, Я предлагаю выбрать готовый продукт для онлайн трансляций видео и обращаться к его апи с любого знакомого для вас языка.
На пример я написал полноценный чат + видео и аудио конференции на php но использовал при этом CppComet и FreeSwitch. В итоге на php для чата личных сообщений, видео аудио и текстовых конференций и ещё кучи типовых возможностей типичного чата для соц сети потребовалось 2600 строк php кода. И 7000 js кода на фронтенде. А работу с видео и вебсокетами выполняет специализированый софт которому я просто говорю что и кому отправить и кто с кем может созвонится и в таком духе.