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

My CCTV cam­era, como muitos, fornece apenas um fluxo RTSP. No mod­ern web browsers sup­port RTSP.

A pesquisa e os requisitos

Google just isn’t what it used to be and it took sev­er­al days of search­ing to find an accept­able solu­tion that met all of my require­ments…

  • I wanted some­thing that would work entirely off­line without any third party serv­ers involved.
  • I wanted some­thing that was com­pletely leg­ally free, idealmente código aberto
  • I wanted some­thing that would­n’t transcode the video or audio as this would waste pro­cessing resources

A solução

Eu encontrei um really use­ful guide which explained a way to do this with a bit of JavaS­cript and ffm­peg, both of which were read­ily avail­able for free.

To run ffm­peg I used the fol­low­ing com­mand, which I ran on win­dows as a ser­vice, cre­ated with 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

To embed the video I down­loaded the fol­low­ing css file and 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 (with mod­i­fied paths to loc­al files) para incorporar o vídeo que funcionou imediatamente. ffm­peg is using around 0.2% cpu usage and a few mb of memory on the serv­er that hosts the web­site.

Uma nota final, incase it mat­ters — I used the win64 stat­ic build of ffm­peg 4.2.2

O que você acha? Deixe-nos cair um comentário 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