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

Publicados por & Arquivado em Lar inteligente & Internet das coisas. Ultima atualização .

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 é 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 de 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

Deixe uma resposta

2 Comentários

JSJack Straw

Para sua informação, cromo (só cromo até hoje) pode ler diretamente arquivos .m3u8 e reproduzir o vídeo como faria com um mp4 etc..

Resposta
TThomas

Olá,
estou tentando fazer o mesmo, mas não consigo fazer funcionar corretamente
Eu segui suas instruções, e o vinculado, mas ainda pareço ter 20-30 segundos de atraso entre o feed ao vivo e o publicado
alguma ideia do que poderia estar causando isso?

Resposta