web-dev-qa-db-ja.com

ビデオタグを使用するだけで、HTML5へのリアルタイムストリーミング（webrtcなし）

リアルタイムでエンコードされたデータをwebmまたはogvにラップして、html5ブラウザーに送信したいと思います。

Webmまたはogvはこれを行うことができますが、Mp4はMDATアトムのためにこれを行うことができません。 （h264とmp3をリアルタイムでラップして、ラップしてクライアントに送信することはできません）Webカメラからの入力と内蔵マイクからのオーディオを供給しているとします。断片化されたmp4はこれを処理できますが、それを行うためのライブラリを見つけるのは面倒です）。

オーディオとビデオを別々に送信したくないので、これを行う必要があります。

別々に送信した場合は、オーディオタグを介してオーディオを送信し、ビデオを介してビデオを送信します>（オーディオとビデオはデマックスされて送信されます）クライアントブラウザでjavascriptを使用して同期できますか？私はいくつかの例を見ましたが、まだわかりません。

htmlreal-timemp4oggwebm
14
Evren Bingøl

エブレン、

最初にこの質問をしたので、Media Source Extensions https://www.w3.org/TR/media-source/ は、非常に短い（30ms）ISOを再生できるほど成熟しています-ほんの少しのバッファリングを備えたBMFFビデオ/ mp4セグメント。

HTML5ライブストリーミング を参照してください

だからあなたの声明

（h264とmp3をリアルタイムでラップして、ラップしてクライアントに送信することはできません）

現在は古くなっています。はい、h264 + AACでそれを行うことができます。

そこにはいくつかの実装があります。 Unreal MediaServerを見てください。 Unreal Media Server FAQから： http://umediaserver.net/umediaserver/faq.html

Unreal HTML5ライブストリーミングはMPEG-DASHとどのように異なりますか？MPEG-DASHとは異なり、Unreal MediaServerはWebSocketプロトコルを使用してHTML5MSE要素へのライブストリーミングを行います。ウェブブラウザー。これは、MPEG-DASHごとにHTTPリクエストを介してセグメントをフェッチするよりもはるかに効率的です。また、Unreal Media Serverは、最短30ミリ秒の最小期間のセグメントを送信します。これにより、1秒未満の低遅延のストリーミングが可能になりますが、MPEG-DASHは、他のHTTPチャンクベースのライブストリーミングプロトコルと同様に、低遅延のライブストリーミングを提供できません。

彼らのデモWebページにはRTSPカメラからのライブHTML5フィードがあります： http://umediaserver.net/umediaserver/demos.html HTML5プレーヤーのレイテンシーはFlashプレーヤーのレイテンシーに匹敵することに注意してください。

3
user1390208

私はwebmに対して次のようにUbuntuで実行されているffmpeg/ffserverでこれを行いました（mp4とoggは少し簡単で、同じサーバーから同じように機能するはずですが、ブラウザー間の互換性のために3つの形式すべてを使用する必要があります）。

まず、ソースからffmpegをビルドしてlibvpxドライバーを含めます（それを備えたバージョンを使用している場合でも、グローバルヘッダーを含める機能を追加しただけなので、webmをストリーミングするには最新のドライバーが必要です（今月現在）。私はこれをUbuntuサーバーとデスクトップで行いました。 このガイド 方法を教えてくれました-他のOSの手順 ここにあります 。

適切なバージョンのffmpeg/ffserverを入手したら、ストリーミング用にセットアップできます。私の場合、これは次のように行われました。

ビデオキャプチャデバイスの場合：

ffmpeg -f video4linux2 -standard ntsc -i /dev/video0 http://<server_ip>:8090/0.ffm
  • その「-fvideo4linux2-standard ntsc -i/dev/video0」の部分は、入力ソースによって変わる可能性があります（私のものはビデオキャプチャカード用です）。

関連するffserver.confの抜粋：

Port 8090
#BindAddress <server_ip>
MaxHTTPConnections 2000
MAXClients 100
MaxBandwidth 1000000
CustomLog /var/log/ffserver
NoDaemon

<Feed 0.ffm>
File /tmp/0.ffm
FileMaxSize 5M
ACL allow <feeder_ip>
</Feed>
<Feed 0_webm.ffm>
File /tmp/0_webm.ffm
FileMaxSize 5M
ACL allow localhost
</Feed>

<Stream 0.mpg>
Feed 0.ffm
Format mpeg1video
NoAudio
VideoFrameRate 25
VideoBitRate 256
VideoSize cif
VideoBufferSize 40
VideoGopSize 12
</Stream>
<Stream 0.webm>
Feed 0_webm.ffm
Format webm
NoAudio
VideoCodec libvpx
VideoSize 320x240
VideoFrameRate 24
AVOptionVideo flags +global_header
AVOptionVideo cpu-used 0
AVOptionVideo qmin 1
AVOptionVideo qmax 31
AVOptionVideo quality good
PreRoll 0
StartSendOnKey
VideoBitRate 500K
</Stream>

<Stream index.html>
Format status
ACL allow <client_low_ip> <client_high_ip>
</Stream>
  • これは、feeder_ipのサーバーが前述のffmpegコマンドを実行するように構成され、server_ipのサーバーがserver_ipでmpegからwebmへの会話を処理しながらclient_high_ipを介してclient_low_ipにサーバーが接続されるように構成されていることに注意してください（以下に続く）。

このffmpegコマンドは、以前はserver_ipと呼ばれていたマシンで実行されます（実際のmpeg-> webm変換を処理し、別のフィードでffserverにフィードバックします）。

ffmpeg -i http://<server_ip>:8090/0.mpg -vcodec libvpx http://localhost:8090/0_webm.ffm

これらがすべて起動されると（最初にffserver、次にfeeder_ip ffmpegプロセス、次にserver_ip ffmpegプロセス）、http：//：8090/0.webmでライブストリームにアクセスし、httpでステータスを確認できるようになります。 ：//：8090 /

お役に立てれば。

12
CoryG

これができるかどうかは100％確実ではありません。 HTML5は、ライブストリーミングメカニズムを承認していません。これを行うには、WebSocketを使用して、データをブラウザーにリアルタイムで送信できます。ただし、解析ロジックは自分で作成する必要があり、データがプレーヤーに到着したときにデータをどのようにフィードするかはわかりません。

ビデオとオーディオタグの場合：ビデオタグは、オーディオとビデオの両方を含むコンテナファイルを再生できます。したがって、互換性のあるコンテナでコンテンツをラップします。ライブコンテンツが着信し続け、ブラウザから要求されたすべてのバイトのデータをストリーミングするときに、このビデオファイルにライブストリーミングを書き込むようにブラウザを変更すると、これを行うことができます。しかし、それは間違いなく些細なことではありません。

0
av501