Comment afficher un flux vidéo RTSP dans une page web ?

Question

J'ai une caméra IP qui fournit un flux vidéo RTSP en direct. Je peux utiliser le lecteur multimédia VLC pour visualiser 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 réussi à faire fonctionner, mais il est vraiment bogué et provoque fréquemment le blocage du navigateur.

Quelqu'un connaît-il d'autres plugins vidéo que je pourrais utiliser et qui prennent en charge le protocole RTSP ?

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

Answer 1

Wowza

1. Le re-streaming RTSP vers RTMP (Flash Player) ne fonctionne pas avec Android Chrome ou FF (Flash n'est pas supporté)
2. Re-streaming RTSP vers HLS

Serveur d'appel Web (Flashphoner)

1. Re-Streaming RTSP to WebRTC (Fonctionnalité native du navigateur pour Chrome et FF sur Android ou ordinateur de bureau)

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

Jetez un coup d'œil à ceci artículo .

Answer 2

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="'+address+'">';
    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;

Answer 3

Une option consisterait à utiliser une sorte de serveur/passerelle de diffusion en continu. J'ai essayé plusieurs solutions (vlc, ffmpeg et quelques autres) et celle qui a le mieux fonctionné pour moi est le serveur Janus WebRTC. Il est quelque peu difficile à mettre en place, et vous devrez le compiler à partir des sources (lorsque je l'ai essayé, la version dans les dépôts Ubuntu n'avait pas de support RTSP), mais il y a des détails sur la façon d'utiliser le serveur WebRTC. instructions de compilation y la documentation sur la façon de tout mettre en place.

J'ai réussi à obtenir un flux vidéo et audio de 3 caméras FullHD sur le réseau local avec très peu de retard. Je peux confirmer qu'il fonctionne avec les caméras Dahua et Hikvision (pas sûr que ce soit tous les modèles).

J'ai utilisé Ubuntu Server 18.04 avec le serveur web Apache et Chrome comme navigateur (il ne fonctionnait pas sur Firefox par défaut, mais il existe peut-être des solutions de contournement).

Answer 4

Vérifier la bibliothèque de flux multimédia de l'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 en JS avec la couche h264. Note : le streaming consommé dans la 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.

Answer 5

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 nécessiter de plugin. J'ai contribué à un projet open source sous licence MIT qui pourrait correspondre à vos besoins, c'est ici que ça se passe :

Streaming IP/Caméra réseau sur navigateur web avec NodeJS

Il n'existe pas encore de cadre complet, mais il s'agit d'un coup d'envoi qui pourrait vous permettre d'aller plus loin.
En tant qu'étudiant, j'espère que cela vous sera utile et je vous invite à contribuer à ce projet.