Para transmissão de vídeo ao vivo, estudei muitas soluções no estágio inicial, inclusive websocket. Por diversos motivos, não adotei essa solução no final, mas ainda quero registrar minha experiência de aprendizado.
WebSocket é um protocolo para comunicação full-duplex em uma única conexão TCP que o HTML5 começou a fornecer.
Na API WebSocket, o navegador e o servidor só precisam realizar uma ação de handshake e, em seguida, um canal rápido é formado entre o navegador e o servidor. Os dados podem ser transmitidos diretamente entre os dois.
O navegador envia uma solicitação ao servidor para estabelecer uma conexão WebSocket por meio de JavaScript. Após a conexão ser estabelecida, o cliente e o servidor podem trocar dados diretamente por meio da conexão TCP.
Depois de obter a conexão Web Socket, você pode enviar dados ao servidor por meio do método send() e receber os dados retornados pelo servidor por meio do evento onmessage.
Durante o processo, a ideia principal é: usar setTimeout() na página de gravação para converter o vídeo em uma imagem quadro a quadro através do canvas em intervalos fixos e, em seguida, usar socket.send() do websocket para enviar os dados da imagem para o servidor. Na página de transmissão ao vivo, primeiro você cria uma estrutura <img>, obtém os dados da imagem por meio de socket.onmessage() do websocket e os exibe na tag <img> para formar uma transmissão ao vivo.
Código anexado
Estrutura HTML da página de vídeo
<reprodução automática de vídeo id=sourcevid style=width:1600;height:900px></video> <canvas id=output style=display:none></canvas>
Página de vídeo js
<script type=text/javascript charset=utf-8> //Cria uma instância + var socket = new WebSocket(ws://+document.domain+:8080); /Retorna um ambiente para desenhar na tela. var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; window.URL.createObjectURL(stream } //Abrir soquete socket.onopen = function(){ draw(); Desenhe quadros de vídeo no objeto Canvas, e o Canvas alterna os quadros a cada 100 ms para formar um efeito de vídeo a olho nu. var draw = function(){ try{ backcontext.drawImage(video,0,0, back.width, back.height) ; }catch(e){ if (e.name == NS_ERROR_NOT_AVAILABLE) { return setTimeout(empate, 100 } else { throw e } } if(video.src){ //O conteúdo do Canvas é convertido em URI de dados PNG e enviado ao servidor, 0,5 é o coeficiente de compressão socket.send(back.toDataURL(image/jpeg, 0.5) } setTimeout(draw). , 100) ; } //Chama a câmera do dispositivo e coloca o recurso na tag de vídeo navigator.getUserMedia = navigator.getUserMedia || || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getUserMedia({video:true, audio:false}, sucesso, console.log);Estrutura HTML da página ativa:
<img id=estilo do receptor=largura:1600px;altura:900px/>
Página ao vivo JS
<script type=text/javascript charset=utf-8> //Cria uma instância de soquete var receiver_socket = new WebSocket(ws://+document.domain+:8008); var image = document.getElementById('receiver'); // Ouvir mensagens receiver_socket.onmessage = function(dados) {image.src=data.data } </script> ResumirO texto acima é a implementação do websocket em HTML5 que o editor apresenta a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!