Apple のようなサイマルキャスト共有機能を構築したいため、この期間にオーディオとビデオについて浅い学習を行ったので、それを簡単にまとめて記録します。
私の要件は、2 人でビデオを再生するためのできるだけ簡単なソリューションを見つけることです。進行状況と操作が同期できるため、基本的に遅延がなく、できれば WebVTT 字幕を同時に表示できます。追加のサーバー用。
ビデオストリーミングソリューション
フロントエンドのビデオストリームが主に使用されますがhls.js、ついにそれを使用しました。flv.jsdash.jshls.js
hls.js
hls.jsこれは主にオンラインビデオの再生に使用され、その原理は大きなビデオを数秒の小さなセグメントにスライスすることで、ビデオを完全に再生するには小さなセグメントをロードし続けるだけで済みます。
ffmpegビデオの生成に使用します
ffmpeg -i video.mkv -b:v:0 12M -c:v h264_videotoolbox -c:s webvtt -c:a mp3 -map 0:v -map 0:a:0 -map 0:s:34 -f hls -var_stream_map "v:0,a:0,s:0,sgroup:subtitle,language:zh" -master_pl_name master.m3u8 -hls_time 6 -hls_playlist_type vod -muxdelay 0 video.m3u8
-b:v:0 12M12Mコードレートh264_videotoolboxMac ではハードデコードが必要で、最近では hevc もサポートされていますが、現時点ではまだ h264 が主流のブラウザです。-map 0:s:3434 番目の字幕を取得し、webvttフォーマットに変換します-var_stream_map "v:0,a:0,s:0,sgroup:subtitle,language:zh"グループ-hls_time 66秒間スライス-muxdelay 0字幕が同期しない問題を解決します。
最後に、ロードされmaster.m3u8、再生する準備が整います。
flv.js
flv.jsbilibili のオープンソースで、ライブビデオストリーミングに使用でき、RTMP ストリーミングを使用しますが、bilibili ではこれを使用しません。
ffmpegプッシュストリーミングを使用する
ffmpeg -re -i video.mkv -c:v h264_videotoolbox -f flv rtmp://localhost/live/livestream
まずビデオをストリーミング メディア サーバーにプッシュし、次にストリーミング メディア サーバーからビデオを読み取ります。
rtmp://localhost/live/livestreamこれは、対応するストリーミング メディア サーバーであり、使い方は簡単ですNode-Media-Serverが、使い方はより複雑で、srsRTMP ストリームを WebRTC ストリームに変換できます。
ダッシュ.js
dash.jsまた、ビデオをライブ ブロードキャストやオンデマンド ビデオにスライスする機能もあり、bilibili などの多くの大手企業がこれを使用しています。
WebRTC
WebRTC動画再生も可能ですが、解像度はブラウザで制御されWebRTCポイントツーポイントです サーバーは必要ありませんが、情報交換にはシグナリングサーバーが必要で、部屋番号と別人を作るのと同じです部屋に参加します。その後、この部屋番号を渡すにはサーバーが必要です。
無料プランを見つけて利用してみましたpeer.js。
私の考え
当初はブラウザがローカルの映像を直接読み込んでWebRTC経由で相手に送信することを考えていましたが、字幕もWebRTC経由で送信できるため追加の操作はなく、WebRTCの遅延も十分に低いです。
ただし、考慮していなかった点の 1 つは、ダウンロードしたビデオは基本的に HEVC HDR であるため、トランスコードする必要があり、字幕も WebVTT に変換する必要があるということです。ただし、トランスコードには時間がかかります。ブラウザでは実行できます。Wasmというプロジェクトがありますffmpeg.wasm。ブラウザを使用して hevc をデコードすると動作します。その結果、数百 Mb のビデオはエラーを報告し、デコードできません全然。
ブラウザはデコードできないので、RTMPストリームをデコードしてローカルでブラウザflv.jsに、ブラウザからWebRTC経由でビデオストリームを送信しますが、タグにはメソッドがないflv.jsためWebRTCにビデオストリームを渡すことができません。男、もう一度考えてください。このメソッドはビデオを再生してからそれを呼び出すために使用されます。問題は再び発生します。HDR をサポートしていません。一方で、非常に混乱しています。videocaptureStreamcanvascanvascaptureStream
WebRTC にとって最適なソリューションは、SRS を使用して RTMP を WebRTC に変換し、WebRTC を使用してブラウザ上で再生することです。
しばらく考えた後、やはり hls.js ソリューションを選択しました。M2 が 1080p をトランスコードする場合、1 時間のビデオは約 6 分で、これは許容範囲内です。主な理由は、コンピューターに動的なパブリック IP が設定されているため、 it Xiao 私のパートナーは私のローカル マシンにアクセスしてhls.js再生を使用します。これはスムーズでスムーズです。その後、WebRTC を使用して再生操作を同期のために送信します。
だから私は常にふざけながら学び、成長しています。
やっと
JS の面接でよく聞かれる 75 の質問をまとめ、その回答と分析を提供しているので、JS に関する面接官の質問に基本的に対処できることが保証されます。
必要な友達は下のカードをクリックして受け取り、無料で共有できます