Comment intégrer des médias rtsp en streaming dans une page html5
J'ai une caméra de sécurité qui envoie via rtsp, que je peux capturer sur le lecteur VLC, mais je veux l'intégrer dans ma page Web. J'ai cherché pendant des heures sur la façon de le faire, mais je n'ai trouvé aucune documentation récente sur la façon de le faire.
Je ne suis pas non plus configuré sur vlc, donc j'essaie essentiellement de passer de cam -> rtsp -> player (si nécessaire) -> html embed.
Toute aide serait appréciée. Et je sais que c'est une question ouverte, mais je n'arrive pas à trouver ce dont j'ai besoin sur le net, donc je suis ouvert à toutes les solutions.
Cela dit, je ne recherche pas de fournisseurs tiers pour m'envoyer le flux. Pour des raisons de sécurité, le flux ne sortira pas du complexe.
Merci de ne pas m'envoyer d'anciens liens vers d'anciens articles. Je les ai déjà parcourus et je les ai probablement lus, et d'après mon expérience, les choses ont changé. Je cherche des réponses de personnes qui ont connu des problèmes similaires et qui ont pu les résoudre. Merci!
I. Ouvrez VLC et sélectionnez "Open Network Stream" via le menu Media.
II. Saisissez la chaîne RTSP de votre caméra IP (informations d'identification incluses), c'est-à-dire rtsp://test:[email protected]:554/cam/realmonitor?channel=1&subtype=1 qui serait pour ma caméra IP.
III. Cliquez sur la flèche vers le bas à côté du bouton Lecture et sélectionnez "Stream".
IV. Pour la destination, réglez-le sur "HTTP" puis sélectionnez "AJOUTER". Dans le champ du port, c'est ici que vous pouvez définir le port utilisé par VLC pour diffuser la vidéo. Dans cet exemple, j'ai utilisé 8080. Le chemin que vous pouvez laisser comme "/".
V. Cochez la case Activer le transcodage et définissez le profil sur "Vidéo - Theora + Vorbis (OGG).
VI. Cliquez sur l'icône Tournevis + clé, définissez l'encapsulation sur Ogg/Ogm, le codec vidéo sur "Theora" puis définissez le débit sur ce que vous voulez diffuser le flux sur votre site à (pour ce que cela vaut, j'utilise simplement le même débit binaire que j'ai le flux de la caméra à. En outre, vous pouvez également définir votre fréquence d'images
VII. En utilisant le sous-onglet "Résolution", vous pouvez utiliser "Auto" pour l'échelle, la largeur et la hauteur. Vous pouvez désactiver le codec audio si votre caméra n'a pas de micro ou ne souhaite pas diffuser l'audio, et désactiver les sous-titres. Enfin, cliquez sur "Enregistrer" puis "Suivant".
VIII. Cochez la case "Stream tous les streams élémentaires" puis cliquez sur "Stream". Gardez à l'esprit que VLC affichera une boîte noire où la vidéo serait normalement celle qui est prévue. Vous devriez voir la minuterie vidéo se déplacer juste au-dessus du bouton Pause/Lecture.
IX. Déposez ensuite ce code dans votre page:
<video id="video" src="http://IP_of_VLC_computer:VLC_Port" autoplay="autoplay" width="videowidth" height="videoheight"></video>
L'un des miens est le suivant:
<video id="video" src="http://192.168.0.4:8080" autoplay="autoplay" width="704" height="480"></video>
X. Chargez votre page Web pour voir à quoi ressemble la vidéo. Ne vous inquiétez pas si vous voyez ce qui ressemble à un écran vert. Actualisez simplement la page toutes les 5 secondes environ pour forcer la page à mettre à jour le flux. Cela est courant avec le transport vidéo RTSP.
Pour résumer, vous transformez votre PC en transcodeur via VLC pour cracher une vidéo RTSP compatible HTML5.
J'ai téléchargé une vidéo de 1 minute 46 secondes sur YouTube pour vous montrer comment terminer ce processus: