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

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 répondant à 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

Vous avez quelques idées de votre propre? Laissez-vous tenter par des commentaires 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