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

Publié par & déposé sous Maison intelligente & IdO. Dernière mise à jour .

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

Ma caméra CCTV, comme beaucoup, fournit uniquement un flux RTSP. Aucun navigateur Web moderne ne prend en charge RTSP.

La recherche et les exigences

Google n'est plus ce qu'il était et il a fallu plusieurs jours de recherche pour trouver une solution acceptable qui répond à toutes mes exigences…

  • Je voulais quelque chose qui fonctionnerait entièrement hors ligne sans aucun serveur tiers impliqué.
  • Je voulais quelque chose de complètement gratuit légalement, idéalement open source
  • Je voulais quelque chose qui ne transcoderait pas la vidéo ou l'audio car cela gaspillerait les ressources de traitement

La solution

Je ai trouvé un guide vraiment utile qui a expliqué une façon de le faire avec un peu de JavaScript et ffmpeg, qui étaient tous deux disponibles gratuitement.

Pour exécuter ffmpeg, j'ai utilisé la commande suivante, que j'ai couru sur windows en tant que service, créé avec 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

Pour intégrer la vidéo, j'ai téléchargé le fichier css suivant et 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 (avec des chemins modifiés vers des fichiers locaux) pour intégrer la vidéo qui a fonctionné tout de suite. ffmpeg utilise environ 0.2% utilisation du processeur et quelques Mo de mémoire sur le serveur qui héberge le site Web.

Une dernière note, au cas où ça compte - j'ai utilisé le Win64 version statique de ffmpeg 4.2.2

Laisser un commentaire

2 Comments

JSJack Paille

POUR VOTRE INFORMATION, chrome (uniquement chromé à ce jour) peut lire directement les fichiers .m3u8 et lire la vidéo comme s'il s'agissait d'un mp4, etc..

Répondre
TThomas

Bonjour à tous,
j'essaye de faire de même, mais je n'arrive pas à le faire fonctionner correctement
J'ai suivi tes instructions, et celui lié, mais il me semble toujours avoir un délai de 20 à 30 secondes entre le flux en direct et le flux publié
toute idée de ce qui pourrait en être la cause?

Répondre