0Intégrer un flux RTSP en direct dans une page Web

J'ai récemment travaillé sur la configuration de ma maison intelligente et l'une des choses que je voulais installer est une tablette avec une interface Web à écran tactile pour gérer ma maison intelligente.. L'un des premiers problèmes que j'ai dû résoudre était de savoir comment diffuser mon flux de vidéosurveillance sur un navigateur Web…

Le problème

My CCTV cam­era, comme beaucoup, fournit uniquement un flux RTSP. No mod­ern web browsers sup­port RTSP.

La recherche et les exigences

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, idéalement open source
  • I wanted some­thing that would­n’t transcode the video or audio as this would waste pro­cessing resources

La solution

Je ai trouvé un 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 fichiers 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

J'ai ensuite utilisé le code du guide (with mod­i­fied paths to loc­al files) pour intégrer la vidéo qui a fonctionné tout de suite. ffm­peg is using around 0.2% cpu usage and a few mb of memory on the serv­er that hosts the web­site.

Une dernière note, incase it mat­ters — I used the win64 stat­ic build of ffm­peg 4.2.2

Nous avons trouvé cet utile? S'il vous plaît ne laissez-nous savoir en laissant tomber un commentaire ci-dessous. Si vous souhaitez vous abonner s'il vous plaît utiliser le lien d'abonnement dans le menu en haut à droite. Vous pouvez également partager avec vos amis en utilisant les liens sociaux ci-dessous. À votre santé.

Laisser un commentaire