Comment puis-je afficher un flux vidéo RTSP dans une page Web?

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

rtsp://cameraipaddress

Mais j'ai besoin d'afficher le flux sur une page Web. Le fournisseur de la caméra a fourni un contrôle ActiveX que j'ai mis en marche, mais il est vraiment bogué et fait que le navigateur se bloque fréquemment.

Est-ce que quelqu'un connaît des plugins vidéo alternatifs que je pourrais utiliser et qui prennent en charge RTSP?

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

VLC est également livré avec un plugin ActiveX qui peut afficher le flux dans une page Web:

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

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
     codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
     width="640" height="480" id="vlc" events="True">
   <param name="Src" value="rtsp://cameraipaddress" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://cameraipaddress" ></embed>
</OBJECT>

Il n'est pas facile d'afficher le flux vidéo en direct d'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.

Mais 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 le flux vidéo RTSP / H264 d'une caméra IP et le diffuser aux téléspectateurs. IPCamLive a un composant de lecteur vidéo Flash / HTML5 qui affichera la vidéo sur PC, MAC, tablette ou mobile. La meilleure chose est que ce site génère l'extrait de code HTML nécessaire pour incorporer la vidéo en direct comme ceci:

<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>

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

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

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

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

Autant que je sache, il y a des limitations pour chaque joueur.

1. Realplayer ne prend pas en charge la vidéo H.264 en mode natif, vous devez installer un plugin quicktime pour Realplayer afin de réaliser le décodage H.264.
2. Le lecteur Quicktime 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 WAN.
3. VLC ne prend pas en charge la perforation NAT pour le transport RTP / AVP, mais le transport RTP / AVP / TCP est disponible.

Si vous souhaitez diffuser RTSP directement sur la page Web, je crains que votre seule option soit d'utiliser une visionneuse de contrôle ActiveX fournie avec la caméra. Il s'agit d'une connexion directe IP Cam -> Viewer, et devrait vraiment être la plus rapide. Je ne sais pas pourquoi vous rencontrez des problèmes; Axis ActiveX fonctionne plutôt bien pour moi.

Cependant, cette option n'est pas vraiment efficace en bande passante et vous ne pouvez pas servir plusieurs visionneuses simultanées (la plupart des caméras IP ont une limite de 10 spectateurs). La meilleure option est de télécharger un seul flux RTSP sur un serveur de streaming hébergé de manière centralisée, ce qui convertira votre flux en RTMP / MPEG-TS et le publiera sur des 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 plugin Web

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

Modifié un peu le code et le faire fonctionner. Voici mon code-

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" autoplay="yes" loop="no" width="300" height="200" target="rtsp://10.20.50.15:554/0/888888:888888/main" />
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="display:none;"></object>

Remarque: l' extrait de code ci-dessus utilise le rtspformat d'URL pris en charge par ma caméra IP. Vous devez donc obtenir la même chose pour votre appareil photo. Vous pouvez obtenir ces informations en consultant l'assistance de votre fournisseur de caméra. Gardez également à l'esprit que je l'ai testé sur Chrome (à l'aide d'un plug-in ActiveX pour Chrome) et que d'autres navigateurs (y compris les navigateurs de téléphone mobile) peuvent ne pas être pris en charge.

Vous pouvez également essayer OpenSource WebRTC Media Server Kurento

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

Nous l'utilisons en Production dans les cas suivants:

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

Wowza

1. Re-streaming RTSP vers RTMP (Flash Player) Ne fonctionnera pas avec Android Chrome ou FF (Flash n'est pas pris en charge)
2. Re-streaming RTSP vers HLS

Serveur d'appel Web (Flashphoner)

1. Re-streaming RTSP vers WebRTC (fonctionnalité de navigateur natif pour Chrome et FF sur Android ou sur ordinateur)

2. Re-streaming RTSP sur Websockets (iOS Safari et Chrome / FF Desktop)

Jetez un œil à cet article .

Essayez le lecteur QuickTime! Voici mon JavaScript qui génère l'objet intégré sur une page Web et lit le flux:

//SET THE RTSP STREAM ADDRESS HERE
var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp";

var output = '<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
    output += '<param name="src" value="'+adsress+'">';
    output += '<param name="autoplay" value="true">';
    output += '<param name="controller" value="false">';
    output += '<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="'+address+'"  kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">';
    output += '</embed></object>';

    //SET THE DIV'S ID HERE
    document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;

Je sais que cet article est vieux mais je cherchais quelque chose de très similaire l'autre jour (voir le flux vidéo RTSP de ma caméra IP sur une simple page html sans plugins ActiveX sophistiqués). Heureusement, j'ai trouvé une solution! Il est basé sur ffmpeg, NodeJS, NGINX (pas obligatoire mais utile) et Node Media Server .

La description dans le lien est détaillée et facile à suivre, mais j'avais encore quelques ajustements à régler avant de le faire fonctionner (concernant les points de terminaison sur le serveur NodeJS). J'ai posé ma propre question et j'ai obtenu une bonne réponse .

Vérifiez la bibliothèque de flux multimédia par Axis qui relaie l'extension Media Source

• https://github.com/AxisCommunications/media-stream-library-js
• https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API

Ils implémentent un pipeline similaire à Gstreamer dans JS avec le depay h264. Remarque: le streaming consommé dans le js n'est pas directement rtsp mais encapsulé dans un ws: // par la bibliothèque elle-même sur un proxy node.js rtsp-websocket.

J'ai publié un projet sur Github qui vous aide à diffuser en temps réel une caméra IP / réseau sur un navigateur Web sans plug-in, ce que j'ai contribué à un projet open source sous licence MIT qui pourrait correspondre à votre besoin, vous y allez:

Caméra IP / réseau en streaming sur un navigateur Web à l'aide de NodeJS

Il n'y a pas encore de package complet de framework, mais c'est un kickstart qui pourrait vous donner un moyen d'aller plus loin.
En tant qu'étudiant, j'espère que cela sera utile et je vous prie de contribuer à ce projet.

Une option serait d'utiliser une sorte de serveur / passerelle de streaming. J'ai essayé diverses solutions (vlc, ffmpeg et quelques autres) et celle qui fonctionnait le mieux pour moi était le serveur Janus WebRTC. C'est un peu difficile à configurer et vous devrez le compiler à partir des sources (lorsque je l'ai essayé, la version dans les dépôts Ubuntu n'avait pas le support RTSP), mais ils ont des instructions de compilation détaillées et de la documentation sur la façon de tout configurer.

J'ai réussi à obtenir le flux vidéo et audio de 3 caméras FullHD sur le réseau local avec très peu de retard. Je peux confirmer que cela fonctionne avec les caméras Dahua et Hikvision (je ne sais pas si tous les modèles).

Ce que j'ai utilisé était Ubuntu Server 18.04 exécutant le serveur Web Apache et Chrome en tant que navigateur (cela ne fonctionnait pas sur Firefox par défaut mais il existe peut-être des solutions de contournement).

le Microsoft Mediaplayer peut faire tout ce dont vous avez besoin. J'utilise les services MS Mediaservices du serveur 2003/2008 pour fournir des vidéos en diffusion et en diffusion individuelle. Ce service pourrait OBTENIR le flux de la caméra et le diffuser. Que vous n'avez "que" le problème pour "afficher" cette image dans TOUS les navigateurs de tous les systèmes d'exploitation

Mon conseil: vérifiez d'abord le système d'exploitation, puis chargez votre plugin. sous Windows, il est facile de prendre WMP, de prendre MS Silverligt ...

À des fins comme celle-ci, j'utilise VLC comme serveur de redistribution. Vous avez dit que vous pouviez voir la vidéo avec VLC? Faites un clic 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 les avantages potentiels de diverses options (transcodage, mise à l'échelle, compression, désentrelacement). Voici un lot qui démarre la distribution VLC de la source à son propre port 555 (vous devrez donc taper rstp: // myvlcserveripaddress: 555 dans votre option src sur la page Web pour obtenir le flux)

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 plugin VLC).

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:

<!--- BEGIN PLAYER --->

<!-- webbot bot="HTMLMarkup" startspan ---->

<object ID="MediaPlayer" WIDTH="320" HEIGHT="270" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">

<param name="autoStart" value="True">

<param name="filename" value="rtsp://xxx.xxx.xxx:xxxx">

<param NAME="ShowControls" VALUE="False">

<param NAME="ShowStatusBar" VALUE="False">

<embed TYPE="application/x-mplayer2" SRC="rtsp://xxx.xxx.xxx:xxxx" NAME="MediaPlayer" WIDTH="320" HEIGHT="270" autostart="1" showcontrols="0"></embed></object>

<!-- webbot bot="HTMLMarkup" endspan ---->

<!--- end PLAYER --->

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

J'ai fait cela pour mes clients.

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