162

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

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

4

10 に答える 10

87

技術的には「はい」

（しかし、実際にはそうではありません...）

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

<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 仕様 ( The video element ) から:

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

于 2009-11-15T09:21:49.410 に答える
59

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

本当の答えは次のとおりです。いいえ、html 5 ページにビデオ タグを置いて rtsp を再生することはできません。ストリーミング ビデオを再生するには、ある種の Javascript ライブラリを使用する必要があります (Flash や Silverlight プレーヤーを使用したい場合を除きます)。{IMHO} HTML 5 ビデオの議論と実装が進んでいる現状では、独自のビデオ標準のさまざまなベンダーは、これが前進するのを助けることに関心がないため、ブラウザ メーカーがビデオ タグの約束された使いやすさを考慮しないでください。どうにかして問題を解決することを自力で考えてください...これもありそうにありません。{/IMHO}

于 2012-07-11T15:15:08.387 に答える
44

これは古い質問ですが、最近自分でやらなければならなかったので、何かうまくいきました（私のような応答があれば時間を節約できます）：基本的に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 の例もあります)。

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

于 2016-09-26T08:01:25.707 に答える
24

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

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

VOD とライブ ストリーミング、高レイテンシ - HLS

1. WebRTC

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

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

2.ウェブソケット

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

3.HLS

VOD (録画済みビデオ) の最も一般的な高遅延ストリーミング プロトコル。

于 2015-09-18T15:49:33.277 に答える
22

Chrome が RTSP ストリーミングのサポートを実装することは決してありません。

少なくとも、ここの Chromium 開発者の言葉を借りれば:

このサポートを追加する予定はありません

于 2011-10-14T09:17:25.923 に答える
9

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

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

于 2011-02-04T16:10:04.057 に答える
2

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

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

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

Chrome、Firefox、Opera。

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

アンドロイドとIOS

http://www.webrtc.org/

于 2015-09-11T18:41:59.853 に答える
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、GStreamer に設定された Phonon-backend) では機能しませんでした。

于 2010-03-11T12:26:27.120 に答える
0

何年も前に、H5 の RTSPに関するいくつかの更新があります。

  • RTSP は H5 ではサポートされておらず、PC でもモバイルでもサポートされていません。
  • ChromeではFlash が無効になっています。Adobeを参照してください。
  • H5 で HTTP-FLV を再生するためのflv.js 、または H5 で HLS を再生するためのhls.jsの場合、 MSEは iOS サファリを除いて適切に機能します。
  • WebRTCは、特に 0.2 ~ 1 秒のレイテンシ シナリオで、H5 でストリーミングを再生する方法としても使用できます。

注: RTSP は TCP シグナリング プロトコルを使用して SDP を交換するためだと思います。これは H5 では HTTP ではないため、サポートするのは非常に困難です。特に現在 WebRTC があります。

したがって、RTSP を HTTP-FLV/HLS/WebRTC などの他のプロトコルにトランスコードできれば、H5 を使用してストリームを再生できます。FFmpeg を使用してトランスコードを行うことをお勧めします。

ffmpeg -i "rtsp://user:password@ip" -c:v libx264 -f flv rtmp://server/live/stream

SRSなどの RTMP サーバーを起動して、RTMPを受け入れ、HTTP-FLV、HLS、および WebRTC へのトランスマックスを行います。

./objs/srs -c conf/rtmp2rtc.conf

次に、次の方法でストリームを再生できます。

  • ビデオまたはhls.jsによる HLS :http://server:8080/live/stream.m3u8
  • flv.jsによる HTTP-FLV :http://server:8080/live/stream.flv
  • H5 またはネイティブ SDK による WebRTC:webrtc://server:1985/live/stream

HLS のレイテンシーは約 5 ～ 10 秒であることに注意してください。LLHLS の方が優れていますが、それほど長くはありません。HTTP-FLV は約 1 ～ 3 秒で、RTMP と非常によく似ています。また、WebRTC の遅延は約 0.2 秒ですが、RTSP から RTMP から WebRTC への変換の場合、遅延は約 0.8 秒です。

于 2021-12-18T02:55:19.663 に答える
0

現時点で結論を出す。

rtsp は OOB で動作しないため、無意味にそれを回避する方法を構築しようとしています。ストリーミングを処理する「マネージャー」がビデオ タグの機能を完全なものにしない限り、それは今では不可能です。

私は現在、これを非常に邪悪な方法で管理するために、android + html (ハイブリッド) ソリューションに取り組んでいます。中間サーバーなしでカメラから Android に直接再生することになっているため、非 webview と webview をブリッジするためのキャンバス タグを含むソリューションを考え出しました。

于 2021-04-21T10:26:43.063 に答える