0Incorporar um fluxo RTSP ao vivo em uma página da web

Eu tenho trabalhado recentemente na minha configuração de smarthome e uma das coisas que pretendo configurar é um tablet com uma interface da web com tela de toque para gerenciar minha casa inteligente. Um dos primeiros problemas que tive de resolver foi como transmitir meu feed de CFTV para um navegador da Web…

O problema

Minha câmera de CFTV, como muitos, fornece apenas um fluxo RTSP. Nenhum navegador da web moderno suporta RTSP.

A pesquisa e os requisitos

O Google simplesmente não é mais o que costumava ser e levou vários dias de pesquisa para encontrar uma solução aceitável que atendesse a todos os meus requisitos ...

  • Eu queria algo que funcionasse totalmente offline sem a necessidade de servidores de terceiros.
  • Eu queria algo que fosse completamente legalmente grátis, idealmente código aberto
  • Eu queria algo que não transcodificasse o vídeo ou o áudio, pois isso desperdiçaria recursos de processamento

A solução

Eu encontrei um guia realmente útil que explicava uma maneira de fazer isso com um pouco de JavaScript e ffmpeg, ambos estavam prontamente disponíveis gratuitamente.

Para executar o ffmpeg, usei o seguinte comando, que eu corri no windows como um serviço, criado com nssm…
ffmpeg -i rtsp://your_rtsp_ip:port/path/to/file.stream -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/video.m3u8

Para incorporar o vídeo, baixei o seguinte arquivo css e 2 arquivos js

  • https://vjs.zencdn.net/7.2.3/video-js.css
  • https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js
  • https://vjs.zencdn.net/7.2.3/video.js

Eu então usei o código do guia (com Caminhos Modificados para Arquivos Locais) para incorporar o vídeo que funcionou imediatamente. ffmpeg está usando em torno de 0.2% uso da CPU e alguns mb de memória no servidor que hospeda o site.

Uma nota final, caso isso importe - usei o compilação estática win64 do ffmpeg 4.2.2

Acho que perdemos algo? Deixe-nos saber por comentar abaixo. Se você deseja se inscrever, use o link de inscrição no menu no canto superior direito. Você também pode compartilhar isso com seus amigos usando os links sociais abaixo. Felicidades.

Deixe uma resposta