Comment afficher un stream vidéo RTSP dans une page Web?

J’ai une caméra IP qui fournit un stream vidéo RTSP en direct. Je peux utiliser le lecteur multimédia VLC pour afficher le stream en lui fournissant l’URL:

rtsp://cameraipaddress 

Mais je dois afficher le stream sur une page Web. Le fournisseur de caméras a fourni un contrôle ActiveX sur lequel je travaillais, mais il est vraiment bogué et le navigateur est fréquemment bloqué.

Est-ce que quelqu’un connaît des plugins vidéo alternatifs que je pourrais utiliser et qui supportent RTSP?

La caméra peut être configurée pour diffuser en H264 ou MPEG4.

VLC est également fourni avec un plug-in ActiveX capable d’afficher le stream dans une page Web:

http://wiki.videolan.org/ActiveX/HTML

        

En gros, vous pouvez avoir 3 choix pour afficher le stream vidéo RTSP dans une page Web:

  1. Vrai joueur
  2. Lecteur Quick Time
  3. Joueur VLC

Vous pouvez trouver le code pour intégrer ActiveX via la recherche Google.

Pour autant que je sache, il existe des limitations pour chaque joueur.

  1. Realplayer ne prend pas en charge la vidéo H.264 en mode natif, vous devez installer un plug-in quicktime pour Realplayer afin de réaliser le décodage H.264.
  2. Quicktime player ne prend pas en charge le transport RTP / AVP / TCP, et son transport RTP / AVP (UDP) n’inclut pas la perforation NAT. Ainsi, le seul transport possible est le tunneling HTTP dans le déploiement du réseau étendu.
  3. VLC ne prend pas en charge la perforation NAT pour le transport RTP / AVP, mais le transport RTP / AVP / TCP est disponible.

Il n’est pas facile d’afficher un stream vidéo en direct depuis une caméra IP sur une page Web, car vous avez besoin d’une large bande passante Internet et d’un excellent lecteur vidéo compatible avec les principaux navigateurs.

Heureusement, il existe des services basés sur le cloud qui peuvent faire ce travail pour nous. L’un des meilleurs est IPCamLive . Ce service peut recevoir des stream vidéo RTSP / H264 d’une caméra IP et les diffuser aux spectateurs. IPCamLive a un composant lecteur vidéo Flash / HTML5 qui affichera la vidéo sur PC, MAC, tablette ou mobile. La plus grande chose est que ce site génère l’extrait HTML nécessaire pour incorporer la vidéo en direct comme ceci:

  

Il suffit donc de copier le coller dans notre fichier HTML sans aucune modification.

Si vous souhaitez diffuser directement RTSP vers une page Web, je crains que votre seule option soit d’utiliser un visualiseur de contrôle ActiveX fourni avec la caméra. Ceci est une connexion directe IP Cam -> Viewer, et devrait vraiment être le plus rapide. Vous ne savez pas pourquoi vous avez des problèmes? Axis ActiveX fonctionne très bien pour moi.

Cependant, cette option n’est pas vraiment efficace en termes de bande passante et vous ne pouvez pas servir plusieurs utilisateurs simultanés (la plupart des caméras IP ont une limite de 10 utilisateurs). La meilleure option consiste à télécharger un seul stream RTSP vers un serveur de diffusion hébergé de manière centralisée, ce qui convertira votre stream en RTMP / MPEG-TS et le publiera sur les lecteurs Flash / décodeurs.

Wowza, Erlyvideo, Unreal Media Server, Red5 sont vos options.

Nous avons trouvé une solution simple et fonctionnelle à partir de la documentation officielle de VLC pour le plug-in Web

https://wiki.videolan.org/Documentation:WebPlugin/

Modification du code et bon fonctionnement. Voici mon code-

   

Remarque: L’extrait de rtsp ci-dessus utilise le format URL rtsp pris en charge par ma caméra IP. Donc, vous devez obtenir la même chose pour votre appareil photo. Vous pouvez obtenir ces informations en consultant l’assistance de votre fournisseur d’appareils photo. Gardez également à l’esprit que je l’ai testé sur Chrome (en utilisant un plugin ActiveX pour Chrome) et que d’autres navigateurs (y compris les navigateurs de téléphones mobiles) pourraient ne pas être pris en charge.

Wowza

  1. Retransmission de RTSP vers RTMP (Flash Player) Ne fonctionnera pas avec Android Chrome ou FF (Flash n’est pas pris en charge)
  2. Retransmission de RTSP vers HLS

Web Call Server (Flashphoner)

  1. Re-Streaming RTSP to WebRTC (fonctionnalité de navigateur natif pour Chrome et FF sur Android ou bureau)

  2. Re-Streaming RTSP vers Websockets (iOS Safari et Chrome / FF Desktop)

Jetez un oeil à cet article .

Essayez le lecteur QuickTime! Voici mon JavaScript qui génère l’object incorporé sur une page Web et lit le stream:

 //SET THE RTSP STREAM ADDRESS HERE var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp"; var output = ''; output += ''; output += ''; output += ''; output += ''; output += ''; //SET THE DIV'S ID HERE document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output; 

Aussi, vous pouvez essayer opensource WebRTC Media Server Kurento

Qui peut lire le stream vidéo RTSP et l’envoyer à WebRTC ou le transcoder en RTMP ou enregistrer sur le serveur.

Nous l’utilisons en production pour les cas suivants:

  - WebRTC à Webrtc (plusieurs à plusieurs)
  - WebRTC à RTMP
  - RTSP à WebRTC

Microsoft Mediaplayer peut tout faire, vous avez besoin. J’utilise les MS Mediaservices de 2003/2008 Server pour diffuser de la vidéo en diffusion et un stream de monodiffusion. Ce service pourrait obtenir le stream de la caméra et le diffuser. Que vous avez “seulement” le problème pour “afficher” cette image dans TOUS les systèmes de tous les systèmes d’exploitation

Mon conseil: vérifiez d’abord le système d’exploitation, puis chargez votre plug-in. sous Windows, c’est facile – prenez WMP, sur d’autres, prenez MS Silverligt …

Pour des raisons comme celle-ci, j’utilise VLC comme serveur de redissortingbution. Vous avez dit que vous attrapiez la vidéo avec VLC? Cliquez avec le bouton droit sur le média dans VLC, sélectionnez “stream” et choisissez vos options. Vous pouvez également le faire avec la ligne de commande, ce qui vous offre des avantages potentiels de différentes options (transcodage, mise à l’échelle, compression, désinterlocage). Voici un lot qui lance la dissortingbution VLC de la source vers son propre port 555 (vous devrez donc taper rstp: // myvlcserveripaddress: 555 dans votre option src sur la page Web pour obtenir le stream)

 cd \ cd C:\Program Files (x86)\VideoLAN\VLC\ vlc --logo-file C:\logo.png --logo-position 5 --logo-opacity 200 --logo-x 900 --logo-y -2 "mmsh://typeyoursourceIPhere:554" :sout=#transcode{vcodec=div3,vb=800,scale=0,acodec=mpga,ab=128,channels=2,samplerate=44100}:duplicate{dst=rtp{mux=ts,sdp=rtsp://:555/stream}} :sout-all :sout-keep 

Ici , vous avez un exemple de page Web qui intègre un lecteur (basé sur le plug-in VLC).

Le moyen le plus populaire et le plus fiable de partager des vidéos en direct sur un site Web est d’utiliser RTMP (en utilisant un lecteur Flash) ou HLS (HTTP Live Streaming) qui fonctionne également sur les mobiles avec HTML5, mais implique une grande latence.

Pour transformer un stream RTSP en RTMP / HLS, un serveur relais est requirejs (pour se connecter au stream RTSP, puis fournir RTMP / HLS aux clients Web). Wowza Streaming Engine 4.2+ fournit une telle fonctionnalité et est disponible gratuitement avec une licence de développeur à usage limité. http://www.wowza.com/streaming/ip-camera-streaming

Un script pour gérer cela et publier par le Web est disponible sur http://www.videowhisper.com/?p=PHP-IP-Camera-Stream , également avec une licence limitée gratuite. De plus, la démo en ligne de ce script permet de publier vos propres stream RTSP sur le Web pendant un certain temps (24h).

Toutes les solutions ci-dessus ne fonctionnent plus ou prennent trop de temps à comprendre.

C’est la réponse ultime. Vous pouvez intégrer le lien rtsp dans votre site Web.

Copiez le code ci-dessous dans votre éditeur HTML:

           

Si tout cela est trop compliqué et ne résout toujours pas le problème, laissez-moi vous aider.

Je l’ai fait pour mes clients.

Cliquez ici http://www.mhcreative.com.my/ipcameratowebsite/