Introducción
fondo
Debido a las necesidades del proyecto, se debe utilizar la función de vista previa de la cámara y el modelo del dispositivo es Hikvision. El retraso de las soluciones basadas en FFmpeg existentes es demasiado alto, por lo que el proyecto finalmente elige en función de esta solución.
plan
La solución es la mensajería instantánea de video basada en WebRTC, que admite de forma nativa la decodificación del protocolo RTP, por lo que puede lograr un retraso muy bajo, alrededor de 0,2-0,4 segundos, y otras soluciones tienen un retraso superior a 1 segundo.
WebRTC tiene requisitos para los navegadores, y puede verificar los navegadores compatibles en la dirección a continuación.
https://caniuse.com/rtcpeerconnection
La siguiente introducción es de la Enciclopedia Baidu
WebRTC, cuyo nombre proviene de la abreviatura de Web Real-Time Communication (inglés: Web Real-Time Communication), es una API que admite navegadores web para conversaciones de voz o video en tiempo real. Fue de código abierto el 1 de junio de 2011 y se incluyó en el estándar de recomendación W3C del World Wide Web Consortium con el apoyo de Google, Mozilla y Opera.
WebRTC implementa videoconferencias basadas en páginas web. El estándar es el protocolo WHATWG. El propósito es proporcionar capacidades de comunicación en tiempo real (Comunicaciones en tiempo real (RTC)) proporcionando javascript simple a través del navegador.
Hay muchas implementaciones de WebRTC en Github, después de una serie de comparaciones y pruebas, la elección final es usar el proyecto webrtc-streamer , que es fácil de usar y relativamente estable.
Empezando
webrtc-streamer no solo admite la captura de flujos RTSP, sino que también admite la captura de instantáneas de ventana de pantalla y V4L2.
webrtc-streamer ha incorporado un pequeño servidor HTTP para proporcionar soporte para las interfaces relacionadas requeridas por webrtc.
A continuación se explica cómo empezar a configurarlo:
Configurar la cámara
Dado que la biblioteca central de webrtc aún no es compatible con h265, debe configurarse en codificación h264.
Inicie sesión en el centro de configuración de fondo de la cámara Hikvision, configúrelo en el menú "Video y audio" y luego guárdelo.
Descarga el paquete más reciente
En la página de lanzamiento de github, seleccione el paquete correspondiente para descargar según la plataforma requerida
https://github.com/mpromonet/webrtc-streamer/releases
Una vez completada la descarga, puede usar el siguiente comando para probar:
./webrtc-streamer rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.movAbrir host local: 8000 páginas visitadas
Equipo de prueba
Si no hay problema, puede usar el dispositivo local para la prueba.La dirección predeterminada de la transmisión de video de Hikvision es:
rtsp://账号:密码@IP地址:554/Streaming/Channels/101Sustituir la información adecuada para la prueba.
Si está bajo Windows, webrtc-streamer también capturará las páginas de instantáneas de ventanas y pantallas, que se pueden filtrar con el parámetro -q, que admite expresiones regulares. Este parámetro no aparece en la lista de ayuda porque revisé el código fuente y lo encontré.
./webrtc-streamer rtsp://账号:密码@IP地址:554/Streaming/Channels/101 -q (?=rtsp).*integrado
Puede encontrar index.html en la carpeta html del paquete de lanzamiento descargado para ver el código de muestra, el código principal se muestra a continuación:
<html>
<head>
<script src="libs/adapter.min.js" ></script>
<script src="webrtcstreamer.js" ></script>
<script>
var webRtcServer = null;
window.onload = function() {
webRtcServer = new WebRtcStreamer("video",location.protocol+"//"+window.location.hostname+":8000");
webRtcServer.connect("rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov");
}
window.onbeforeunload = function() { webRtcServer.disconnect(); }
</script>
</head>
<body>
<video id="video" />
</body>
</html>Integrar usando WebComponents
<html>
<head>
<script type="module" src="webrtc-streamer-element.js"></script>
</head>
<body>
<webrtc-streamer url="rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></webrtc-streamer>
</body>
</html>Resumir
Lo principal es estar familiarizado con webrtc, puede encontrar guías relacionadas en https://webrtc.org/getting-started/overview .
Por ejemplo, qué es el servidor TURN y qué son las conexiones entre pares se pueden encontrar en la guía anterior.
Texto original Vista previa en tiempo real de video RTSP basado en WebRTC - libro breve
★La tarjeta de presentación al final del artículo puede recibir materiales de aprendizaje de desarrollo de audio y video de forma gratuita, incluidos (FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, srs) y hojas de ruta de aprendizaje de audio y video, etc.
¡vea abajo!