Para la transmisión de video en vivo, estudié muchas soluciones en la etapa inicial, incluido websocket. Debido a varias razones, al final no adopté esta solución, pero aún quiero registrar mi experiencia de aprendizaje.
WebSocket es un protocolo para comunicación full-duplex en una única conexión TCP que HTML5 comenzó a proporcionar.
En la API WebSocket, el navegador y el servidor solo necesitan realizar una acción de protocolo de enlace y luego se forma un canal rápido entre el navegador y el servidor. Los datos se pueden transmitir directamente entre los dos.
El navegador envía una solicitud al servidor para establecer una conexión WebSocket a través de JavaScript. Una vez establecida la conexión, el cliente y el servidor pueden intercambiar datos directamente a través de la conexión TCP.
Después de obtener la conexión Web Socket, puede enviar datos al servidor a través del método send() y recibir datos devueltos por el servidor a través del evento onmessage.
Durante el proceso, la idea principal es: usar setTimeout() en la página de grabación para convertir el video en una imagen cuadro por cuadro a través del lienzo a intervalos fijos, y luego usar socket.send() de websocket para enviar los datos de la imagen a el servidor. En la página de transmisión en vivo, primero crea una estructura <img>, obtiene los datos de la imagen a través del socket.onmessage() de websocket y los muestra en la etiqueta <img> para formar una transmisión en vivo.
Código adjunto
Estructura HTML de la página de vídeo
<video reproducción automática id=sourcevid estilo=ancho:1600;alto:900px></video> <canvas id=salida estilo=display:none></canvas>
Página de vídeo js
<script type=text/javascript charset=utf-8> //Crear una instancia + var socket = new WebSocket(ws://+document.domain+:8080); var back = document.getElementById('output'); /Devuelve un entorno para dibujar en el lienzo. var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var Success = function(stream){ //Obtener la transmisión de video y convertirla a URL video.src = ventana.URL.createObjectURL(stream); } //Abrir socket socket.onopen = function(){ draw(); Dibuja fotogramas de vídeo en el objeto Canvas y Canvas cambia los fotogramas cada 100 ms para formar un efecto de vídeo a simple vista 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){ //El contenido de Canvas se convierte en URI de datos PNG y se envía al servidor, 0.5 es el coeficiente de compresión socket.send(back.toDataURL(image/jpeg, 0.5)); , 100) } //Llame a la cámara del dispositivo y coloque el recurso en la etiqueta de video navigator.getUserMedia = navigator.getUserMedia || || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getUserMedia({video:true, audio:false}, éxito, console.log);Estructura HTML de la página en vivo:
<img id=estilo del receptor=ancho:1600px;alto:900px/>
Página en vivo JS
<script type=text/javascript charset=utf-8> //Crear una instancia de socket var Receiver_socket = new WebSocket(ws://+document.domain+:8008 alert(ws://+document.domain+:8008) var image = document.getElementById('receiver'); // Escucha mensajes Receiver_socket.onmessage = función(datos) { imagen.src=datos.datos } </script> ResumirLo anterior es la implementación de websocket en HTML5 que le presenta el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!