HTML5のRTSPまたはRTPを介したストリーミング


150

サーバーhttp://lscube.org/projects/fengからRTSP / RTPストリームを再生する必要があるWebアプリを構築しています。

HTML5ビデオ/オーディオタグはrtspまたはrtpをサポートしていますか?そうでない場合、最も簡単な解決策は何でしょうか?おそらく、VLCプラグインなどにドロップダウンします。


ビデオタグはRTSPで「ただ機能する」だけではありません。そして、RTSPは、私が知っているどのブラウザーでもネイティブに実装されていません。すでにわかっているように、プラグインが必要です。または、ChromeとFirefoxでネイティブにサポートされているwebRTCを使用すると、webRTCロジックで動画タグを使用できるようになります。IPカメラなどのソースからストリーミングする場合は、Wowzaなどのストリーミングサービスを使用して(または独自に作成して)、RTSPからwebRTCにトランスコードします。これはあなたへの私のアドバイスです。
Michael P


html5でストリーミングできると思いますが、どこかにストリーミングできません。
Salih Karagoz

すばらしい質問、ありがとうございます。「RTSPはサポートされておらず、videojs-flash経由のRTMPのみがサポートされていると思います。」-これは、Video.jsメディアプレーヤーのメインメンテナーの回答です。私は主題を再調査し、それに対する良い解決策を見つけることができません。
zhibirc

WebRTC RTCPeerConnectionを使用して、HTMLビデオ要素でRTSP(より正確にはRTSPが設定するRTPストリーム)を再生することができます。以前はwebrtc.live555.comにデモがありました。トリックは、必要なWebRTC DTLSおよびSRTPメカニズムを追加したRTSPサーバーを見つけることです。
sipwiz

回答:


89

技術的には「はい」

(しかし、実際には...)

HTML 5の<video>タグはプロトコルにとらわれず、気にしません。プロトコルをsrcURLの一部として属性に配置します。例えば:

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

または多分

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

とはいえ、 <video>タグはブラウザ固有です。HTML 5はまだ始まったばかりなので、サポートが頻繁に変更される(またはサポートが不足する)と思います。

W3CのHTML5仕様(ビデオ要素)から:

ユーザーエージェントは、ビデオおよびオーディオのコーデックとコンテナ形式をサポートします。


3
更新:クロムで最初のメソッドを試してみましたGET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEMEvideo要素ではHTTP [S]スキームのみが許可されているようです。
Yan Foto 2015

確かに、HTTP経由でビデオを転送することはなく、RTPのようなプロトコルのみを使用しますか?それは... TCPの上にひどく遅くなる
markmnl

7
@markmnlその皮肉ですか?(私にはわかりません...私はそのように騙されます。)HTTPトランスポートは、現在数年間Web経由でビデオを転送するための支配的な方法です。Youtube、Netflixなど これは、など、効率の問題ではなく、シンプルさ、ファイアウォール横断、キャッシュサーバの親しみやすさ、ではありません
スチュトンプソン

NetflixはHTTPを使用してビデオをストリーミングしますか?!皮肉は、ビデオをストリーミングするための非効率的な方法のように思われません。
markmnl

6
@markmnl後世のために、Netflixは以前はMS Silverlightでストリーミングを行っていましたが、しばらく前に破棄したことは言及する価値があります。2001年からストリーミングを続けている人として、最初はHTTPが乗っ取られるのを見てショックを受けました。今私はクールエイドを飲んでいます。効率が重要な企業ネットワークでは、特にがマルチキャストなどの機能を提供できる場合は、専用のプロトコルRTPが標準です。
Stu Thompson

55

質問の精神は本当に答えられなかったと思います。いいえ、現時点ではビデオタグを使用してrtspストリームを再生することはできません。リンクされたスレッド/回答は、ビデオタグを介してrtspを再生するChromeを直接参照していないため、Chromiumの人の「決して」へのリンクに関する他の回答は少し誤解を招くものです。リンクされたスレッド全体、特に一番下のコメントと他のスレッドへのリンクを読んでください。

本当の答えはこれです。いいえ、html 5ページにvideoタグを付けてrtspを再生することはできません。ストリーミングビデオを再生するには、何らかのフラッシュライブラリ(SilverlightプレーヤーやSilverlightプレーヤーを使用したい場合を除く)のJavaScriptライブラリを使用する必要があります。{IMHO} html 5ビデオのディスカッションと実装が進んでいるレートで、プロプライエタリビデオ標準のさまざまなベンダーはこの前進を支援することに関心がないので、ブラウザーメーカー以外はビデオタグの使いやすさを考慮しないでください。何らかの形で問題を解決するために自分自身でそれを実行してください...おそらく、そうではありません。{/ IMHO}


1
良いコメントゴルフ。エルベンがやっていることも成功せずにやりたかった。
will824 2013年

31

これは古い質問ですが、私は最近自分でやらなければならなかったので、うまくいくようになりました(私のような応答に加えて、時間を節約できます):基本的にffmpegを使用してコンテナーをHLSに変更し、ほとんどのIPCamsストリームh264といくつかPCMの基本的なタイプなので、次のようなものを使用します。

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

次に、HLSプラグインでvideo.jsを使用しますこれにより、ライブストリームが適切に再生されます。2番目のリンクの下にjsfiddleの例もあります)。

注:これはネイティブサポートではありませんが、ユーザーのフロントエンドに追加の機能は必要ありません。


それは私にとってはうまくいきました、Videojs iはすでに使用しており、このHLSプラグインはm3u8ファイルを使用したライブチャネルをすべてではなくてもほとんどのURLで機能させます。
Dheeraj Thedijje 16

それが助けてくれて嬉しいですが、待ち時間が少し長くなりますが、それはあまり助けられないようです。
Pawel K 2016

1
これを@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基本的には、これをサーバー上で(コマンドラインから)Linuxボックスなどのリモートで実行する必要があります。現在のユーザーの観点から(この例では)/ var / www / html /フォルダーにアクセスできる必要があります。LAMPスタックまたはThe Uniform Server(はるかに無駄のないソリューション)の助けを借りて、Windowsでそれを試すこともできます
Pawel K

1
これでうまくいきました。'hls_wrap'は最新のffmpegでは非推奨です。私は興味のある人のためにこのコマンドラインを使用しました:ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]
DanTheMan

19

ChromeはRTSPストリーミングのサポートを実装しません。

少なくとも、ここの Chromium開発者の言葉では:

これに対するサポートを追加するつもりはありません


4
よくほとんど。Chromeは既にRTSPストリーミングをサポートしているため、これをサポートすることは決してありません;)
Stefan Steiger

2
いいえ、Chromeで動作させることはできません。YouTubeのrtspリンクで試しても動作しません。
IdidntKnewIt 2014

18

HTML5には、3つのストリーミングプロトコル/テクノロジーがあります。

ライブストリーミング、低遅延-WebRTC-Websocket

VODおよびライブストリーミング、高遅延-HLS

1. WebRTC

実際、WebRTCはSRTP(セキュアRTPプロトコル)です。したがって、ビデオタグはWebRTCを介して間接的にRTP(SRTP)をサポートしていると言えます。

したがって、Chrome、Firefox、または別のHTML5ブラウザーでRTPストリームを取得するには、ブラウザーにSRTPストリームを配信するWebRTCサーバーが必要です。

2. WebSocket

これはTCPベースですが、HLSよりレイテンシが低くなります。ここでも、Websocketサーバーが必要です。

3. HLS

VOD(録画済みビデオ)用の最も人気のある高遅延ストリーミングプロトコル。


3
Webソケットを使用して、どのようにライブオーディオ+ビデオストリームを再生しますか?ビデオの唯一の方法はBroadway.jsを使用することであり、h264 nalストリームを使用するのはかなりハックです。
ガマッシュをマーク

1
HLSはHTTPライブストリーミングの略です。なぜHLSがVODに広く使用されているのにLODには広く使用されていないのでしょうか。
shintaroid 2017年

1
WebSocketからWebブラウザーでビデオを再生できません。少なくとも箱から出してはいけません。
Michael IV

-1、Webソケットの場合...しかし、人々が言っ​​ている他のすべての理由ではありません。WebSocketを介してデータを受信することにより、ビデオを再生できます。MediaSource Extensionsを使用すると、これは簡単です。ただし、HTTPプログレッシブをそのまま使用できるため、使用しないでください。
ブラッド

8

VLCを使用すると、ライブRTSPストリーム(mpeg4)をOGG形式(Vorbis / Theora)のHTTPストリームにトランスコードできます。品質は悪いですが、ビデオはChrome 9で動作します。WEBM(VP8)でのトランスコーディングもテストしましたが、動作しないようです(VLCにはオプションがありますが、今のところ実際に実装されているかどうかはわかりません。 。)

これに関するドキュメントを最初に持っている人は私たちに通知する必要があります;)


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-これは、入力(画面キャプチャデバイスなど)を特定の出力ストリーム(例:127.0.0.1 : 8080/desktop.ogg)にストリーミングするVLCコマンドです
Zsolt

1
そして、これをビデオタグに埋め込むことができます:<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">
Zsolt 2013

2
しかし、パフォーマンスは残念ながらかなり劣っており、MP4コンテナでも実行できれば素晴らしいでしょう。AFAIKより多くのブラウザがOGGよりもMP4をサポートしています。
Zsolt 2013

1
それも私のために働いた。私はmy_ip:portアドレスでHTTPプロトコルを介してオーディオとビデオの両方をストリーミングするようにVLCを設定し<video>、次のようにHTML5 タグを使用しました<video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>
patryk.beza 2013

1

HTML 5ビデオタグとrtsp(rtp)ストリームに関する私の観察は、それはkonqueror(KDE 4.4.1、Phonon-backendがGStreamerに設定されている)でのみ機能するということです。H.264 / AAC RTSP(RTP)ストリームでビデオのみ(オーディオなし)を取得しました。

http://media.esof2010.org/からのストリームは、konqueror(KDE 4.4.1、Phonon-backendがGStreamerに設定されている)では機能しませんでした。


1

ChromeはサポートRTSPストリーミングを実装していません。WebRTCをチェックする重要なプロジェクト。

「WebRTCは無料のオープンプロジェクトで、ブラウザやモバイルアプリケーションにシンプルなAPIを介してリアルタイムコミュニケーション(RTC)機能を提供します」

サポートされているブラウザ:

Chrome、Firefox、Opera。

サポートされているモバイルプラットフォーム:

AndroidおよびIOS

http://www.webrtc.org/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.