Código de ejemplo HTML5 para reproducir vídeo RTSP

Actualmente, la mayoría de las cámaras web transmiten transmisiones de video a través del protocolo RTSP, pero HTML no admite transmisiones RTSP de manera estándar. A excepción del navegador Firefox, que puede reproducir transmisiones RTSP directamente, casi ningún otro navegador puede reproducir transmisiones RTSP directamente. Las aplicaciones de Electron se basan en el kernel Chromium, por lo que no pueden reproducir transmisiones RTSP directamente.

Con la ayuda de determinadas herramientas, las transmisiones RTSP se pueden reproducir en páginas web. El método presentado en este artículo se puede aplicar a aplicaciones web tradicionales y aplicaciones de Electron. La única diferencia es que el proceso principal de la aplicación de Electron se utiliza como servidor de la aplicación web tradicional.

Dado que se trata de una transmisión en vivo, el retraso debe ser bajo. Cuando la cámara se desconecta, también debería aparecer un mensaje de evento determinado. En estos dos puntos, compararemos las soluciones de reproducción RTSP existentes que se han implementado sin comprar una licencia (no las analizaremos por el momento en la etapa principal).

He implementado los cuatro métodos y el cuarto método tiene el mejor efecto general: ocupa menos puertos, tiene baja latencia, tiene una velocidad de renderizado rápida y es fácil de manejar eventos fuera de línea.

flv.js es un navegador HTML5 de código abierto de Bilibili. Al confiar en Media Source Extension para la reproducción de video, el video se transmite a través del protocolo HTTP-FLV o WebSocket-FLV, y el formato de video debe ser el formato FLV.

El lado del servidor se escribe utilizando el marco express + express-ws. Cuando se envía una solicitud HTTP a la dirección especificada, se inicia el programa de transmisión ffmpeg, la transmisión RTSP se encapsula directamente en una transmisión de video en formato FLV y se envía al. flujo de respuesta de WebSocket especificado.

 importar * como express desde express; importar * como expressWebSocket desde express-ws; importar ffmpeg desde fluent-ffmpeg; importar webSocketStream desde websocket-stream/stream; importar WebSocket desde websocket-stream; importar * como http desde http; función localServer() { let app = express(); app.use(express.static(__dirname)); expressWebSocket(aplicación, nulo, { perMessageDeflate: true }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888); console.log(express escuchado)}function rtspRequestHandle(ws, req) { console.log(identificador de solicitud rtsp) ; const stream = webSocketStream(ws, { binario: verdadero, browserBufferTimeout: 1000000 }, { browserBufferTimeout: 1000000 }); let url = req.query.url; console.log(rtsp url:, url); console.log(rtsp params:, req.params); , tcp, -buffer_size, 102400) // Puedes agregar algo de RTSP aquí Parámetros optimizados.on(start, function () { console.log(url, Stream comenzó.); }) .on(codecData, function () { console.log(url, Stream codecData.) // Procesamiento en línea de la cámara} ) .on(error, function (err) { console.log(url, Ocurrió un error: , err.message); }) .on(end, function () { console.log(url, Stream fin!); // Manejo de desconexión de la cámara}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream } catch (error) { console.log(error }}

Para lograr un menor tiempo de carga, puede agregar los siguientes parámetros a ffmpeg:

• La duración analizada puede reducir el tiempo necesario para analizar el flujo de código.
• No recuerdo bien la función específica de max_delay escrita en los datos. El efecto no es tan obvio como el análisis.

Por supuesto, esta implementación todavía es relativamente tosca. Cuando hay varias solicitudes para la misma dirección, se debe aumentar la salida de ffmpeg en lugar de iniciar un nuevo flujo de proceso ffmpeg.

El ejemplo utiliza el marco Vue para el diseño de páginas.

 <template> <div> <video class=demo-video ref=player></video> </div></template><script>importar flvjs desde flv.js; exportar predeterminado { props: { rtsp: String, id : Cadena }, /** * @returns {{player: flvjs.Player}} */ data () { return { player: null } }, montado () { if (flvjs.isSupported()) { let video = this.$refs.player; if (video) { this.player = flvjs.createPlayer({ tipo: flv, isLive: true, url: `ws://localhost:8888 /rtsp/${this.id}/?url=${this.rtsp}` }); this.player.attachMediaElement(video); this.player.load(); this.player.play(); captura (error) { console.log(error } } } }, beforeDestroy () { this.player.destory(); /script><estilo> .demo-video { ancho máximo: 480px; altura máxima: 360px }</estilo>

La página Electron se utiliza para mostrar 7 cámaras Hikvison NVR, que pueden lograr baja latencia, bajo uso de CPU y sin distorsión de pantalla. Por motivos de confidencialidad, no publicaré capturas de pantalla aquí.

De la misma manera, reproduje 9 videos locales de 1080p "White Deer Plain" para ver el efecto.

El efecto de reproducción es muy bueno, no hay ningún retraso ni desenfoque y el uso de la CPU no es alto.

Repositorio de código de muestra: WhuRS-FGis/html5-rtsp Repositorio de código de muestra:

El anterior es el código de ejemplo para reproducir video RTSP en HTML5 presentado por 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!

Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!