Задать вопрос
@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.
  • Вопрос задан
  • 1383 просмотра
Подписаться 2 Комментировать
Подписчики вопроса 2 К ответам на вопрос (2)