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


94

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.


1
J'ai également exploré cette possibilité avec mes multiples caméras RTSP et je ne veux pas de contrôles ActiveX. Je voudrais créer un serveur Web personnalisé dont la page Web récupère en permanence une image JPEG à afficher sur la page Web. De cette façon, il peut être pris en charge dans des navigateurs tels que Safari et affiché sur un iPhone.
Jerry Dodge

Réponses:


29

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>

1
Pour mémoire, à partir de ce point, VLC Media Player a été construit par 774 développeurs.
Jerry Dodge

15
chrome a bloqué les plugins npapi après le 1er septembre 2015, il ne fonctionne plus.
user2988855

1
axvlc.cab link is dead
hailinzeng

que faire si le plugin est bloqué une autre solution alternative disponible?
naveenkumar.s

18

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.


1
C'est génial. Une solution bien nécessaire.
Zakir HC

Mise à jour: Apparemment, ne fonctionne pas maintenant. Affiche ceci: "Cette caméra ne peut pas être intégrée. Passez au package Standard ou Professionnel pour l'intégration."
muglikar

1
Tout ce que vous avez à faire est de mettre à niveau votre caméra vers le package Standard / Professionnel et vous serez en mesure d'intégrer votre caméra dans votre page Web.
Adorjan Princz

17

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.

2
Les versions récentes de Quicktime Player ont abandonné la prise en charge de RTSP à partir de Mavericks.
Mike

totem sur linux / ubuntu prend également en charge le flux rtsp
Oki Erie Rinaldi

8

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.


C'est certainement la voie à suivre. Meilleure gestion de la bande passante et transcodage dans un format adapté au Web, par exemple RTMP pour un lecteur flash. Quelqu'un a-t-il une expérience de l'utilisation de l'un des serveurs multimédias ci-dessus et peut élaborer sur la facilité de configuration, les performances, la latence, etc.? J'avais essayé avec Red 5 mais j'ai trouvé certaines choses un peu difficiles à mettre en œuvre.
elMarquis

8

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.


3
gardez à l'esprit que vous avez trouvé certaines fenêtres uniquement de la merde ActiveX, pas une «solution» comme vous l'appelez, et cela ne fonctionnera sur rien d'autre (vrais OS, mobiles, consoles, etc.).
puce

@nonchip ah bien, je pense que vous avez une meilleure solution pour le problème. De plus, j'ai également testé le plugin sur les téléphones Android, donc ce n'est pas seulement Windows . Et de toute façon, j'aimerais vraiment savoir quelle alternative multiplateforme avez-vous en tête pour afficher les flux des caméras CCTV.
Swastik Padhi

désolé, mais c'est un mensonge. L'activex que vous intégrez est - par définition - gagnant uniquement. ce que Chrome sur Android fait est de reconnaître le x-vlc-plugin, d'ignorer les éléments propriétaires et de simplement pousser une application vlc. également, à propos des alternatives multiplateformes que vous mentionnez: la seule solution actuelle serait d'utiliser ffmpeg / avconv / etc dans un serveur Web pour reconditionner le flux rtsp vers http / websocket / webrtc. puis ajoutez simplement une <video>balise et vous avez terminé.
puce

1
le flux ne joue pas, peut-être ce problème (base de code) http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab404 introuvable
Vara Prasad

7

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

1
le lien ne fonctionne plus, de toute façon merci pour info.
medskill

le lien est de retour @medskill
activedecay

5

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 .


C'est un très bon article. Flashphoner semble une solution prometteuse.
elMarquis

4

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;

Merci. J'ai exploré l'option quicktime, mais il y avait une très mauvaise latence avec elle.
elMarquis

C'est à cause du tampon de 3 secondes de QuickTime ... ça m'ennuie aussi ... Hé si vous trouvez quelque chose d'autre qui fonctionne, veuillez poster ici! Au revoir!
Cipi

2
Salut vous avez un bug, "adresse" s'écrit "asdress" plus tard. Cheers
Clinton Green

3
Pourquoi est-ce écrit en JavaScript?
Thomas Bennett

3

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 .


2

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

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.


2

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.


2

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


1

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 ...


1

À 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).


-7

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/


Étrange, cela finit par intégrer VLC Media Player, est-ce parce que VLC est considéré comme le "lecteur multimédia par défaut" pour les pages Web?
Jerry Dodge

Attendez, c'est WMP, je suppose que cela ne fonctionnerait que sur Windows.
Jerry Dodge

2
la mise en œuvre de votre site n'est pas ce que vous avez décrit dans votre réponse. Vous utilisez le service click2stream, veuillez modifier votre réponse, car nous perdons du temps. Vous parlez des autres qui ne fonctionnent pas, mais votre solution n'existe pas.
stefan2410

3
Etrange que vous écriviez: "C'est la réponse ultime." Qu'en est-il d'être humble, surtout quand on laisse tomber une réponse avec un tel manque de qualité?
Pille

1
Cette approche utilise un contrôle x actif (pour IE 10 et inférieurs) puis revient à un autre plugin pour d'autres navigateurs. Comme mentionné, il semble intégrer le lecteur multimédia VLC dans la plupart des cas. Ce n'est pas une approche terrible, mais amener les utilisateurs à installer un plugin sera toujours un peu hasardeux. D'un autre côté, si vous avez un public limité et que vous pouvez dicter leur configuration, cette approche peut être acceptable.
elMarquis le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.