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 je dois afficher le flux sur une page Web. Le fournisseur de la caméra a fourni un contrôle ActiveX sur lequel je me suis mis au travail, mais il est vraiment bogué et provoque le blocage fréquent du navigateur.
Est-ce que quelqu'un connaît des plugins vidéo alternatifs que je pourrais utiliser qui supportent RTSP?
La caméra peut être configurée pour diffuser en H264 ou MPEG4.
VLC est également livré avec un plugin ActiveX pouvant 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>
En gros, vous pouvez avoir 3 choix pour afficher le flux vidéo RTSP dans une page Web:
- Vrai joueur
- Lecteur Quick Time
- Lecteur VLC
Vous pouvez trouver le code pour intégrer activeX via la recherche google.
Autant que je sache, il y a des limitations pour chaque joueur.
- Realplayer ne prend pas en charge la vidéo H.264 de manière native, vous devez installer un plugin quicktime pour Realplayer afin de réaliser le décodage H.264.
- 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 moyen de transport réalisable est le tunnel HTTP dans le déploiement de WAN.
- VLC ne prend pas non plus 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 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, certains services basés sur le cloud peuvent faire ce travail pour nous. L'un des meilleurs est IPCamLive . Ce service peut recevoir un flux vidéo RTSP/H264 d’une caméra IP et le diffuser aux téléspectateurs. IPCamLive a un composant lecteur vidéo Flash/HTML5 qui affichera la vidéo sur PC, MAC, tablette ou mobile. La meilleure chose à faire est que ce site génère l’extrait de code HTML nécessaire à l’intégration de la vidéo en direct comme suit:
<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>
Il suffit donc de copier-coller dans notre fichier HTML sans aucune modification.
Si vous souhaitez diffuser RTSP directement sur 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 bande passante et vous ne pouvez pas servir plusieurs visualiseurs simultanés (la plupart des caméras IP ont une limite de 10 spectateurs). La meilleure option consiste à télécharger un seul flux RTSP sur un serveur de diffusion hébergé de manière centrale, ce qui convertira votre flux au format RTMP/MPEG-TS et le publiera sur des lecteurs Flash/décodeurs.
Wowza, Erlyvideo, Unreal Media Server, Red5 sont vos options.
A trouvé une solution simple et efficace de la documentation officielle de VLC pour le plugin Web
https://wiki.videolan.org/Documentation:WebPlugin/
Modifié le code un peu et l'a fait 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 ci-dessus utilise le format d'URL rtsp qui est 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 le support de votre fournisseur de caméras. N'oubliez pas non plus que je l'ai testé sur Chrome (à l'aide d'un plug-in activeX pour Chrome)} et d'autres navigateurs (y compris les navigateurs de téléphones mobiles)} _ pourrait ne pas être pris en charge.
- La retransmission en streaming de RTSP vers RTMP (Flash Player) ne fonctionnera pas avec AndroidChrome ou FF (Flash n'est pas pris en charge)
- Re-streaming de RTSP vers HLS
Web Call Server (Flashphoner)
Re-Streaming RTSP vers WebRTC (fonctionnalité de navigateur natif pour Chrome et FF sur Android ou sur le bureau)
Re-Streaming RTSP sur Websockets (iOS Safari et Chrome/FF Desktop)
Jetez un oeil à cet article article .
Aussi, vous pouvez essayer opensource WebRTC Media Server Kurento
Qui peut lire le flux vidéo RTSP et l'envoyer à WebRTC ou le convertir au format RTMP ou le sauvegarder sur le serveur.
Nous l'utilisons en production pour les cas suivants:
- WebRTC à Webrtc (plusieurs à plusieurs) - WebRTC à RTMP - RTSP à WebRTC
Essayez le lecteur QuickTime! Heres my JavaScript qui génère l'objet incorporé 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 ancien, mais je cherchais quelque chose de très similaire l'autre jour (regardez le flux vidéo RTSP de mon IPcam sur une simple page html sans plugins ActiveX sophistiqués). Heureusement pour moi, j'ai trouvé une solution! Il est basé sur ffmpeg, NodeJS, NGINX (non 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 à faire avant de la faire fonctionner (en ce qui concerne les points finaux sur le serveur NodeJS). J'ai fait une propre question pour cela et j'ai eu une bonne et fonctionnelle réponse .
microsoft Mediaplayer peut tout faire, vous avez besoin de .. Je utilise les services MS Mediaservices de 2003/2008 pour diffuser de la vidéo sous forme de flux de diffusion et de flux de monodiffusion ..__ Ce service peut obtenir le flux de la caméra et le diffuser. Alors vous avez "seulement" le problème pour "afficher" cette image dans ALL Browers sur tous les systèmes OS
Mon conseil: vérifiez d’abord le système d’exploitation, puis chargez votre plugin . Sous Windows, il est facile de prendre WMP, sur d’autres, prenez MS Silverligt ...
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 mettent en place un pipeline similaire à Gstreamer dans JS avec le dépôt h264. Remarque: la diffusion consommée dans le fichier js n’est pas directement rtsp mais est encapsulée dans un fichier ws: // par la bibliothèque elle-même sur un proxy node.js rtsp-websocket.
Pour des raisons comme celle-ci, j'utilise VLC en tant que serveur de redistribution. Vous avez dit que vous pouviez visionner la vidéo avec VLC? Cliquez avec le bouton droit sur le support dans VLC, sélectionnez "stream" et choisissez vos options. Vous pouvez également le faire avec la ligne de commande, ce qui vous donne les avantages potentiels de diverses options (transcodage, mise à l’échelle, compression, désentrelacement). 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 intégrant un lecteur (basé sur le plugin VLC).
J'ai publié un projet sur Github qui vous aide à diffuser une caméra IP/réseau sur un navigateur Web en temps réel sans nécessiter de plug-in, ce que j'ai contribué à un projet open source sous MIT Licence pouvant correspondre à vos besoins, voilà :
Streaming IP/Network Camera sur un navigateur Web avec NodeJS
Il n'y a pas encore de paquet complet de framework, mais c'est un kickstart qui pourrait vous permettre d'aller plus loin.
En tant qu'étudiant, j'espère que cela vous aidera et contribuerez à ce projet.
Pour celui que j'utilise, l'URL suivante fonctionne:
rtmp://<IP_address>/flash/11:<username>:<password>
par exemple:
rtmp://192.168.1.10:1935/flash/11:admin:admin
Vous devez trouver l'adresse IP de votre IP CAM, votre nom d'utilisateur et votre mot de passe.
L'URL ci-dessus, une fois entré dans un navigateur, détectera que son flux et ouvre un lecteur multimédia . L'URL correcte pour votre marque peut être trouvée en vous connectant à l'adresse IP que vous avez trouvée. (Utilisez un scanner comme Nmap, un scanner IP en colère, etc.)
