問題タブ [media-source]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
node.js - ストリームビデオの基本概念 (NodeJS から MediaSource まで)
NodeJS サーバーからクライアントに viedo をストリーミングし、それらを MediaStream API とマージするソリューションを探しています。
ポイントは、ストリーミングが実際にどのように機能するかを知らないということです。
HTTP プロトコル全体でビデオ チャンクを送信するにはどうすればよいですか? 「部分的なコンテンツ」というステータス コード 206 が表示されます。チャンクは大量の 206 コードを生成し、最後のチャンクは次のような 200 コードを生成すると思います。
それは正しい?
サーバ側
ファイルパスを使用してチャンクを生成する例がたくさん見つかりましたが、ビデオのバイナリを含むバッファがあります。チャンクを生成するにはどうすればよいですか?
クライアント側
MediaSource API については、よくできたドキュメントがないようです。Web で見つけた例ではwebkitsourceopen
orsourceopen
イベントが使用されていますが、いつ呼び出されるのかわかりません。
誰かがビデオのストリーミングについて詳しく説明してくれたり、サーバーとクライアントのコードに関する私の疑問を解決してくれませんか?
どうもありがとう!:)
javascript - ソース バッファに追加できません
webm ビデオのセグメントをロードするための VideoBuffer クラスを作成しました。各セグメントは、ビデオ要素で blob として開いた場合、または別のブラウザー タブで直接開いた場合に個別に機能しますが、ソース バッファーに追加する場合は機能しないようです。
エラーや例外がスローされることはなく、MediaSource の準備完了状態が閉じられ、SourceBufferList が空になります。主な違いは、FileReader からの結果を追加するのではなく、各 xhr 応答をバッファーに追加していることです。
なぜこれが機能しないのか、またはどのようにデバッグすればよいのかについてのアイデアはありますか?
注: 上記のコードは browserify で読み込まれるため、CommonJS モジュールです。
実験を好む、または実験したい人のための要点。
html - Media Source API の追加バッファ(範囲)は上書きできますか?
Media Source Extension/API についてはほとんど調査しませんでしたが、特定のバッファを上書きする方法は見つかりませんでした。最初の 30 秒を低品質で視聴し、その後プレーヤーが高品質に切り替えたとします。30 ~ 60 秒が HQ です。だから... 0〜30秒に戻ると、低品質のビデオ(すでにバッファリングされているもの)が得られますが、新しく要求された同じ範囲を高品質で再追加して、それを見たいと思います。既存のプレーヤー (MSE ショーケース) で見たことがありますが、そうではありません。
MSEは開始日時に基づいてバッファを追加する場所を決定すると思います(名前については今思い出せません)?では、Media Source API で追加された範囲/バッファをオーバーライドすることは可能ですか?
google-chrome - MPEG-DASH ストリーミング プロトコルをサポートする Web ブラウザーはどれですか?
私は以下のものを見つけました:
によると:このリンク
DASH は、現在 Chrome と IE11 である W3C Media Source Extensions (MSE) をサポートするすべてのブラウザーでサポートされています。
そしてここで
Firefox 21 には、デフォルトでオフになっている HTML5 WebM ビデオ用の DASH の実装が含まれています。
about:config
" " および "media.dash.enabled" 設定で有効にできます。Firefox 23 は、HTML5 WebM ビデオの DASH のサポートを削除しました
しかし、Chrome(23+)でしか実行できません。ビデオのストリーミング用にDASH MPEGをサポートするすべてのブラウザーを教えてください。
javascript - mediasource readystate が状態を変更する方法
オンライン ドキュメントを調べた後、以下のコードを記述しました。ファイルサイズが小さい場合はいつでもうまく機能します。しかし、より大きなファイルでは、エラーが発生しています: Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
. これは、mediasource.readystate がクローズに変更されたためです。どのステートメントがreadystateをcloseからopenに変更し、次にcloseに戻すかを理解できません。すべての場所で readystate 値を記録しました。mediacallback メソッド内で開くように変更します。この変化のきっかけは??
javascript - MediaSource API - 記録中の MP4 ビデオのリロード
MP4/H264 ビデオ クリップがキャプチャされているため、4 秒ごとに大きくなり、メタデータが動的に更新されます。これは断片化された MP4 ではないため、MediaSource API を使用してチャンクを操作することはできません。
クリップ全体をリロードする必要なく、再生中にビデオの長さを更新/更新する方法を探しています。
つまり、よりユーザーフレンドリーな方法で次のことを行う方法を探しています。
上記の方法で2つのビデオタグを持ち、あるものから別のものに切り替えることは避けたいです。私も popcorn.js を試してみましたが、うまくいきませんでした。
Chrome を使用していて、... Chrome だけなので、他のブラウザは気にしません。
どんなアドバイスでも大歓迎です!