1. Tres protocolos principales de video en vivo:
1.
El nombre completo de RTMP es Real Time Messageing Protocol, un protocolo de mensajería en tiempo real,
origen: un protocolo de transmisión propuesto por Adobe basado en el formato de empaquetado flv de audio y video correspondiente al reproductor Flash Player,
ventajas:
1. La demora es muy bajo, generalmente entre 1 ~ 3 s
2. Reproducción continua estable durante mucho tiempo
3. Las videoconferencias generales y la transmisión interactiva en vivo son suficientes
Desventajas:
1. Basado en la transmisión de datos del protocolo de conexión larga TCP de la capa de aplicación, no los puertos públicos pueden estar bloqueados por firewalls
2. Es un protocolo propietario de Adobe y muchos dispositivos no pueden reproducirlo, especialmente en el terminal móvil IOS, lo que requiere el uso de un decodificador de terceros 3.
Es inestable en alta concurrencia .
Extensión:
1. RTMP es el protocolo principal, además, incluye variantes como RTMPT/RTMPS/RTMPE/RTMFP,
2. Entre ellos, RTMFP es un protocolo basado en la transmisión UDP, se usa mucho en la comunicación P2P,
aplicación: transmisión en vivo (Live), a pedido (VOD), más para transmisión (lado del anfitrión);
* Push stream: productor de contenido; el proceso de transmisión de la señal de video en vivo a la red tiene requisitos relativamente altos en el entorno de la red. Si es inestable, habrá fenómenos como el tartamudeo de la transmisión en vivo y la experiencia de visualización será deficiente; *Pull stream:
Consumidores de contenido; extraiga los datos en vivo del servidor, analícelos, transcodifique y finalmente preséntelos en la terminal;
P2P
1. El nombre completo es tecnología de comunicación peer to peer, punto a punto o extremo a extremo 2.
El problema a resolver: los dispositivos en diferentes entornos de intranet se comunican directamente a través de sus respectivas IP de intranet
3. Condiciones básicas: el servidor intermedio tiene una dirección IP de red pública;Protocolo de intercambio de direcciones de red NAT (traducción de direcciones de red): penetración de intranet, perforaciones, sondas, middleware, etc.;4. Aplicación front-end: WebRTC (Web Real-Time Communications)
real -Tecnología de comunicación en el tiempo: establezca enlaces punto a punto entre navegadores para realizar la transmisión de secuencias de audio y video u otros datos; sala de chat en línea, uso compartido de pantalla, uso compartido de archivos, transmisión punto a punto de archivos grandes, en tiempo real juegos, transmisión en vivo, búsqueda web basada en p2p 5. Servicios intermedios: 1.
servicio peerjs self Transit provisto 2. Construya peerjs-server por usted mismo 3. Backend build transit
HLS
1. Nombre completo: Transmisión en vivo HTTP
2. Origen: Protocolo de transmisión en tiempo real de medios de transmisión basado en HTTP de Apple
3. Principio: Cortar todos los datos de medios de transmisión en archivos TS continuos con una duración más corta (pequeños fragmentos, unos pocos segundos) y acceder a los archivos ts de forma secuencial a través de archivos de índice M3U8
4. Ventajas:
1. Basado en HTTP, permite penetrar cualquier firewall o servidor proxy que permita datos HTTP.
2. Es fácil de usar la red de distribución de contenido para transmitir flujo de medios y acelerar.
5. Desventaja: alto retraso de más de 10 s
6. Aplicación: campos de transmisión en vivo y bajo demanda
* Una señal importante para distinguir entre transmisión en vivo y bajo demanda: si hay un archivo de índice m3u8 #EXT-X-ENDLIST;
FLV-HTTP
Nombre completo: HTTP FLASH VIDEO
Ventajas:
1. Basado en HTTP, permite penetrar cualquier firewall o servidor proxy que permita datos HTTP.
2. Puede usar HTTPS como un canal encriptado.
3. Buen soporte móvil.
4. El retraso es tan bajo como 2s.
2. Biblioteca de videos de uso común en el front-end
1. VideoJS (recomendado)
Sitio web oficial: https://docs.videojs.com/
Ventajas: código abierto y gratuito; grande y completo; construido con CSS+JS puro, alta escalabilidad; compatible con todos los navegadores; desventajas:
el documento está en inglés puro, no admite Transmisión RTSP (comúnmente utilizada para videovigilancia) para reproducir, depende del flash.
Nota:
1. rtmp: el tipo se establece en: rtmp/flv.
2. hls: el tipo se establece en: application/x-mpegURL.
2. CKPlayer (no recomendado)
Sitio web oficial: https://www.ckplayer.com/
Ventajas: funciones relativamente completas; archivos de configuración independientes; material independiente y compatibilidad con máscaras;
desventajas: no es adecuado para la reproducción en pantalla pequeña, es fácil estropear el estilo; el estilo de la interfaz de usuario no es muy amigable; funciones independientes se agregarán más tarde, relativamente difícil; ocupa el paquete principal del proyecto;
uso:
1. Debe colocarse en el archivo público o de activos, e index.html se importa como un archivo estático;
2. El las interfaces de usuario del entorno local y sandbox son inconsistentes;
3. [Botón de captura de pantalla] en pantalla completa, desaparecerá, porque solo está posicionado en relación con el principal;
4. El control funcional de la pantalla de video, la salida dinámica de la estructura dom, tiene sin valor de clase, y no puede ser cubierto por ui
5. El control de volumen no es compatible con la visualización vertical;
3. Reproductor de sandía
Sitio web oficial: https://v2.h5player.bytedance.com/
Bytedance combina su propio negocio para crear una rueda; [Captura de pantalla del video] Hay trampas, pero no me atrevo a pisarlas.
4, reproductor de D
Sitio web oficial: https://dplayer.js.org/zh/Advantages
:
1. La API es concisa
2. El estilo de la interfaz de usuario está más en línea con la estética moderna y la estructura de control de botones es clara, el estilo se puede anular por clase;
3. Aluvión integrado;
4. Los videos convencionales compatibles deben combinarse con otras bibliotecas de componentes: hls.js, flv.js, etc.;
5. GitHub se mantiene continuamente; El problema tiene soluciones a problemas comunes;
función de captura de pantalla:
1. La configuración de captura de pantalla incorporada no puede establecer el nombre de la imagen; predeterminado Dplayer.png;
2. Tome el control de los datos de captura de pantalla y deje que el desarrollador opere: https://github.com/DIYgod/DPlayer/issues/1006
Correcto -haga clic en el menú:
1. Bloque: https://github.com/DIYgod/DPlayer/ Issues/544
prohíbe las solicitudes continuas de archivos m3u8 y ts:
1. Aunque el reproductor está destruido, el servicio HLS aún se está ejecutando: https:/ /github.com/DIYgod/DPlayer/issues/628
2. Configuración de HLS.js: https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlsstartlevel
Paquete secundario de Vue:
https://console.cloud.baidu-int.com/devops/icode/repos/baidu/adu/v2xapp-key-vehicle-front/blob/develop:src/components/videoPlayer/dPlayer.vue
"dplayer": "^1.26.0",
"hls.js": "^1.0.5",
import DPlayer from '@/components/videoPlayer/dPlayer';
<DPlayer
class="video-area"
:ref=""
:key=""
:className=""
:videoUrl=""
></DPlayer>
3. Contaminación de la lona
Implicaciones: Dado que los píxeles en un mapa de bits pueden provenir de una variedad de fuentes, incluidas imágenes o videos recuperados de otros hosts, inevitablemente surgen problemas de seguridad. Referencia: https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
Escenarios: H5 Painting Sharing Posters, imágenes recortadas frontales, imágenes compuestas, capturas de pantalla de video frontales, uso del complemento html2Canvas. ins, etc
Resultado: el navegador evitará la lectura de datos del lienzo, como los métodos toDataURL(), toBlob(), getImageData() no están disponibles.
Solución
let video = document.querySelector('#dplayer video');
video.setAttribute('crossOrigin', 'anonymous'); // 重点，前提：服务端的视频支持跨域
const canvas = document.createElement('canvas');
canvas.width = this.player.video.videoWidth;
canvas.height = this.player.video.videoHeight;
canvas.getContext('2d').drawImage(this.player.video, 0, 0, canvas.width, canvas.height);
const data = canvas.toDataURL('image/jpg');
Posible solución: utilizar la capacidad de las etiquetas de imágenes para cruzar dominios
// 西瓜视频、网上大多资料的解决方案
let img = new Image();
img.setAttribute('crossorigin', 'anonymous') // 给图片设置允许跨域
image.src = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
img.onload = function () {
// do Something
}
img.error = function () {
}