Что касается потокового видео, на ранней стадии я изучил множество решений, включая веб-сокет. По разным причинам я в конечном итоге не принял это решение, но все же хочу записать свой опыт обучения.
WebSocket — это протокол для полнодуплексной связи по одному TCP-соединению, который начал обеспечивать HTML5.
В API WebSocket браузеру и серверу достаточно выполнить действие рукопожатия, после чего между браузером и сервером формируется быстрый канал. Данные могут передаваться напрямую между ними.
Браузер отправляет серверу запрос на установление соединения WebSocket через JavaScript. После того, как соединение установлено, клиент и сервер могут напрямую обмениваться данными через TCP-соединение.
После получения соединения через веб-сокет вы можете отправлять данные на сервер с помощью метода send() и получать данные, возвращаемые сервером, с помощью события onmessage.
Основная идея этого процесса заключается в следующем: используйте setTimeout() на странице записи, чтобы преобразовать видео в покадровое изображение через холст через фиксированные промежутки времени, а затем используйте сокет.send() веб-сокета для отправки данных изображения в сервер. На странице прямой трансляции вы сначала создаете структуру <img>, получаете данные изображения через сокет.onmessage() веб-сокета и отображаете их в теге <img> для формирования прямой трансляции.
Прикрепленный код
HTML-структура видеостраницы
<video autoplay id=sourcevid style=width:1600;height:900px></video> <canvas id=output style=display:none></canvas>
Видео страница js
<script type=text/javascript charset=utf-8> //Создаем + экземпляр var Socket = new WebSocket(ws://+document.domain+:8080); var back = document.getElementById('output'); /Возвращает среду для рисования на холсте. var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var Success = function(stream){ //Получаем видеопоток и преобразуем его в URL-адрес video.src = window.createObjectURL(stream); } //Открыть сокет socket.onopen = function(){ draw(); Нарисуйте видеокадры на объекте Canvas, и Canvas переключает кадры каждые 100 мс, чтобы сформировать видеоэффект невооруженным глазом. var draw = function(){ try{ backcontext.drawImage(video,0,0, back.width, back.height). ; }catch(e){ if (e.name == NS_ERROR_NOT_AVAILABLE) { return setTimeout(draw, 100 } else { throw e } ; if(video.src){ //Содержимое Canvas преобразуется в URI данных PNG и отправляется на сервер, 0,5 — это коэффициент сжатия socket.send(back.toDataURL(image/jpeg, 0.5)); , 100) ; //Вызываем камеру устройства и помещаем ресурс в тег видео navigator.getUserMedia = navigator.getUserMedia || || navigator.mozGetUserMedia || navigator.msGetUserMedia({video:true, audio:false}, успех, console.log);HTML-структура живой страницы:
<img id=стиль приемника=ширина:1600px;высота:900px/>
Живая страница JS
<script type=text/javascript charset=utf-8> //Создаем экземпляр сокета varприемник_socket = new WebSocket(ws://+document.domain+:8008); alert(ws://+document.domain+:8008) var image = document.getElementById('receiver'); // Прослушиваем сообщения Receiver_socket.onmessage = функция (данные) { image.src=data.data } </script>; Подвести итогВыше представлена реализация веб-сокета в HTML5, которую вам представляет редактор. Надеюсь, она будет вам полезна. Если у вас возникнут вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!