Streaming via RTSP ou RTP en HTML5

150

Je construis une application Web qui devrait lire un flux RTSP / RTP à partir d'un serveur http://lscube.org/projects/feng .

La balise vidéo / audio HTML5 prend-elle en charge le rtsp ou le rtp? Sinon, quelle serait la solution la plus simple? Peut-être passer à un plugin VLC ou quelque chose comme ça.

video html streaming rtsp rtp Elben Shira
la source
La balise vidéo ne "fonctionne pas seulement" avec RTSP. Et RTSP n'est implémenté nativement par aucun navigateur que je connaisse. Vous aurez soit besoin d'un plug-in, comme vous l'avez déjà compris. Ou utilisez webRTC, qui est nativement pris en charge par Chrome et Firefox, et vous pourrez utiliser la balise vidéo avec une logique webRTC. Si vous essayez de diffuser à partir d'une source comme une caméra IP, utilisez un service de streaming comme Wowza (ou écrivez le vôtre) pour transcoder de RTSP à webRTC. C'est mon conseil pour vous.
Michael P
Je suggère de poser cette question dans StackOverflow pour les systèmes multimédias
Hamed
Je pense que vous pouvez obtenir un flux avec html5 mais vous ne pouvez pas diffuser quelque part.
Salih Karagoz
Excellente question, merci. "Je pense que nous ne prenons pas en charge RTSP, uniquement RTMP via videojs-flash." - c'est une réponse du principal mainteneur du lecteur multimédia Video.js. Je recherche un sujet et je ne trouve pas de bonne solution.
zhibirc
Il est possible d'utiliser un WebRTC RTCPeerConnection pour lire un RTSP (ou plus correctement le flux RTP que RTSP configure) dans un élément vidéo HTML. Il y avait auparavant une démo sur webrtc.live555.com . L'astuce sera de trouver un serveur RTSP qui a ajouté les emchanismes WebRTC DTLS et SRTP requis.
sipwiz le

Réponses:

89

Techniquement 'Oui'

(mais pas vraiment...)

La <video>balise HTML 5 est indépendante du protocole - cela ne fait rien. Vous placez le protocole dans l' srcattribut dans le cadre de l'URL. Par exemple:

<video src="rtp://myserver.com/path/to/stream">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

ou peut-être

<video src="http://myserver.com:1935/path/to/stream/myPlaylist.m3u8">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

Cela dit, l'implémentation de la <video>balise est spécifique au navigateur. Puisqu'il s'agit des débuts de HTML 5, je m'attends à des changements fréquents de support (ou à un manque de support).

À partir de la spécification HTML5 du W3C (l' élément vidéo ):

Les agents utilisateurs peuvent prendre en charge tous les codecs vidéo et audio et les formats de conteneurs

Stu Thompson
la source
3
MISE À JOUR : essayé la première méthode dans Chrome et obtenu GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME. Il semble que seuls les schémas HTTP [S] soient autorisés sur les videoéléments.
Yan Foto
Vous ne transféreriez sûrement jamais une vidéo sur HTTP et n'utiliseriez que des protocoles comme RTP? Ce serait terriblement lent sur TCP ..
markmnl
7
@markmnl C'est du sarcasme? (Je ne peux pas dire ... Je suis crédule de cette façon.) Le transport HTTP est la méthode dominante pour le transfert de vidéo sur le Web depuis quelques années maintenant. Youtube, Netflix et coll. Ce n'est pas une question d'efficacité, mais plutôt de simplicité, de pare-feu transversal, de convivialité pour le serveur de cache, etc.
Stu Thompson
Netflix diffuse la vidéo en utilisant HTTP?! Aucun sarcasme ne semble être un moyen inefficace de diffuser des vidéos.
markmnl
6
@markmnl Pour le bien de la postérité, il convient de mentionner que Netflix avait l'habitude de diffuser avec MS Silverlight, mais l'a abandonné il y a quelque temps. En tant que personne qui fait du streaming depuis 2001, j'ai d'abord été choquée de voir HTTP prendre le dessus. Maintenant, je bois le Kool Aid. Dans les réseaux d'entreprise, où l'efficacité compte, les protocoles spécialement conçus RTP sont la norme, en particulier lorsqu'ils peuvent offrir des fonctionnalités telles que la multidiffusion.
Stu Thompson
55

L'esprit de la question, je pense, n'a pas vraiment reçu de réponse. Non, vous ne pouvez pas utiliser une balise vidéo pour lire des flux rtsp à partir de maintenant. L'autre réponse concernant le lien vers "jamais" de Chromium guy est un peu trompeuse car le fil de discussion / réponse lié ne fait pas directement référence à Chrome jouant rtsp via la balise vidéo. Lisez l'intégralité du fil lié, en particulier les commentaires tout en bas et les liens vers d'autres fils.

La vraie réponse est la suivante: non, vous ne pouvez pas simplement mettre une balise vidéo sur une page html 5 et lire rtsp. Vous devez utiliser une bibliothèque Javascript (à moins que vous ne souhaitiez jouer avec des lecteurs flash et silverlight) pour lire des vidéos en streaming. {IMHO} Au rythme de la discussion et de la mise en œuvre de la vidéo html 5, les différents fournisseurs de normes vidéo propriétaires ne sont pas intéressés à aider à avancer, alors ne comptez pas la facilité d'utilisation promise de la balise vidéo à moins que les fabricants de navigateurs prendre sur eux de résoudre d'une manière ou d'une autre le problème ... encore une fois, peu probable. {/ IMHO}

GolfARama
la source
1
Bon commentaire Golf. Je voulais aussi faire ce qu'Elben fait sans succès.
will824
31

Ceci est une ancienne question, mais j'ai dû le faire moi-même récemment et j'ai réalisé quelque chose qui fonctionnait ainsi (en plus d'une réponse comme la mienne, cela me ferait gagner du temps): utilisez essentiellement ffmpeg pour changer le conteneur en HLS, la plupart du flux IPCams h264 et certains type de base de PCM, alors utilisez quelque chose comme ça:

ffmpeg -v info -i rtsp://ip:port/h264.sdp -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8

Ensuite, utilisez video.js avec le plugin HLS Cela jouera bien en direct Il y a aussi un exemple jsfiddle sous le deuxième lien).

Remarque: bien que ce ne soit pas un support natif, il ne nécessite rien de plus sur l'interface utilisateur.

Pawel K
la source
Cela a fonctionné pour moi, Videojs que j'utilisais déjà et ce plugin HLS permet au canal en direct avec le fichier m3u8 de fonctionner pour la plupart des URL, sinon toutes.
Dheeraj Thedijje
Heureux que cela ait aidé, il y a un peu plus de latence, mais cela ne semble pas être beaucoup aidé.
Pawel K le
1
Essayez ceci @Cesar:ffmpeg -v info -rtsp_transport tcp -i rtsp://host:port/[sdp] -c:v copy -c:a copy -maxrate 400k -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8
Pawel K
1
@Arter En gros, vous devez l'exécuter sur votre serveur (à partir de la ligne de commande) comme Linux ou quelque chose de distant. Vous devez avoir accès au dossier / var / www / html / (dans cet exemple) du point de vue de l'utilisateur actuel. Vous pouvez également essayer de le faire sur Windows à l'aide d'une pile LAMP ou de The Uniform Server (solution beaucoup plus légère)
Pawel K
1
Cela a fonctionné pour moi. 'hls_wrap' est obsolète dans le dernier ffmpeg. J'ai utilisé cette ligne de commande pour toute personne intéressée:ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]
DanTheMan
19

Chrome n'implémentera jamais la prise en charge du streaming RTSP.

Au moins, pour reprendre les mots d'un développeur Chromium ici :

nous n'allons jamais ajouter de support pour cela

conférence de Janes
la source
4
Enfin presque. Chrome prend déjà en charge le streaming RTSP, c'est pourquoi il n'ajoutera jamais de support pour cela;)
Stefan Steiger
2
Non, vous ne pouvez pas le faire fonctionner dans Chrome, cela ne fonctionne pas lorsque vous essayez avec des liens rtsp YouTube.
IdidntKnewIt
18

Il existe trois protocoles / technologies de streaming en HTML5:

Diffusion en direct, faible latence - WebRTC - Websocket

VOD et diffusion en direct, latence élevée - HLS

1. WebRTC

En fait, WebRTC est SRTP (protocole RTP sécurisé). Ainsi, nous pouvons dire que la balise vidéo prend en charge RTP (SRTP) indirectement via WebRTC.

Par conséquent, pour obtenir le flux RTP sur votre navigateur Chrome, Firefox ou un autre navigateur HTML5, vous avez besoin d'un serveur WebRTC qui fournira le flux SRTP au navigateur.

2. Websocket

Il est basé sur TCP, mais avec une latence plus faible que HLS. Encore une fois, vous avez besoin d'un serveur Websocket.

3. HLS

Le protocole de streaming à latence élevée le plus populaire pour la VOD (vidéo pré-enregistrée).

Ankitr
la source
3
Comment lire un flux audio + vidéo en direct à l'aide d'une prise Web? Le seul moyen pour la vidéo est d'utiliser Broadway.js et c'est assez piraté en utilisant les flux nal h264.
mark gamache
1
HLS signifie HTTP Live Streaming, je me demande pourquoi HLS est largement utilisé pour la VOD mais pas pour le LOD?
shintaroïd
1
Vous ne pouvez pas lire une vidéo dans le navigateur Web à partir de WebSocket. Du moins pas hors de la boîte.
Michael IV
-1, pour web socket ... mais pas pour toutes les autres raisons que les gens disent. Vous pouvez absolument lire une vidéo en recevant les données via websocket. C'est trivial, avec les extensions MediaSource. Vous ne devriez pas cependant, car vous pouvez simplement utiliser HTTP Progressive!
Brad
8

Avec VLC, je suis capable de transcoder un flux RTSP en direct (mpeg4) en un flux HTTP au format OGG (Vorbis / Theora). La qualité est médiocre mais la vidéo fonctionne dans Chrome 9. J'ai également testé avec un trancoding en WEBM (VP8) mais cela ne semble pas fonctionner (VLC a l'option mais je ne sais pas si c'est vraiment implémenté pour l'instant. .)

Le premier à avoir un document à ce sujet devrait nous en informer;)

molokoloco
la source
2
"C:\Program Files\VideoLAN\VLC\vlc.exe" -I dummy screen:// :screen-fps=16.000000 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=600,height=480,acodec=mp3}:http{mux=ogg,dst=127.0.0.1:8080/desktop.ogg} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep- c'est la commande VLC qui diffuse votre entrée (par exemple, un périphérique de capture d'écran) vers un flux de sortie donné (par exemple 127.0.0.1:8080/desktop.ogg )
Zsolt
1
et vous pouvez intégrer cela sur une étiquette vidéo: <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">.
Zsolt
2
Mais les performances sont malheureusement assez médiocres et seraient excellentes si cela pouvait également être fait avec le conteneur MP4. AFAIK plus de navigateurs prennent en charge MP4 que OGG.
Zsolt
1
Il a travaillé pour moi aussi. J'ai mis VLC pour le streaming audio et vidéo via le protocole HTTP sur my_ip:portadresse et que je HTML5 <video>tag comme ceci: <video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>.
patryk.beza
1

Mes observations concernant la balise vidéo HTML 5 et les flux rtsp (rtp) sont que cela ne fonctionne qu'avec konqueror (KDE 4.4.1, Phonon-backend défini sur GStreamer). Je n'ai que de la vidéo (pas d'audio) avec un flux H.264 / AAC RTSP (RTP).

Les flux de http://media.esof2010.org/ ne fonctionnaient pas avec konqueror (KDE 4.4.1, Phonon-backend défini sur GStreamer).

Renegah
la source
1

Chrome n'implémente pas la prise en charge de la diffusion en continu RTSP. Un projet important pour le vérifier WebRTC.

"WebRTC est un projet gratuit et ouvert qui fournit aux navigateurs et aux applications mobiles des capacités de communication en temps réel (RTC) via de simples API"

Navigateurs pris en charge:

Chrome, Firefox et Opera.

Plateformes mobiles prises en charge:

Android et IOS

http://www.webrtc.org/

vrbsm
la source