問題タブ [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.
javascript - MediaSource SourceBuffer は、2 回の appendBuffer 呼び出し後に閉じます
WebM ビデオ ファイルをクライアントにストリーミングしようとしています。
最初のチャンク (約 4466 バイトの長さ) は、(appendBuffer を使用して) 「機能」し<video>
ます。ビデオの解像度に合わせてサイズ変更されていることがわかります。
3回目を追加した後に発生するエラーは次のとおりです。
Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.
のプロパティに次のエラーがありますSourceBuffer
:buffered
[Exception: DOMException]
クライアントコードは次のとおりです。
javascript - ライブ MediaSource ビデオ ストリームの同期を維持する方法は?
30 FPS のビデオ ストリームをレンダリングし、リアルタイムでWebM Byte Streamにエンコードして多重化するサーバー アプリケーションがあります。
クライアント側では、HTML5 ページがサーバーに対して WebSocket を開き、接続が受け入れられるとストリームの生成を開始します。ヘッダーが配信された後、後続の各 WebSocket フレームは単一の WebM SimpleBlock で構成されます。キーフレームは 15 フレームごとに発生し、これが発生すると新しいクラスターが開始されます。
クライアントはMediaSourceも作成し、WS からフレームを受信すると、コンテンツをアクティブなバッファーに追加します。は<video>
、最初のフレームが追加された直後に再生を開始します。
すべてが合理的に機能します。私の唯一の問題は、ネットワークのジッターにより、しばらくすると再生位置が実際の時間からずれることです。私の現在の解決策は、イベントにフックし、着信クラスターの とタイムコードupdateend
の違いを確認し、許容範囲外の場合は手動で更新することです。残念ながら、これにより、かなり不快な再生の顕著な一時停止とジャンプが発生します。video.currentTime
currentTime
ソリューションも少し奇妙に感じます。最新のキーフレームがどこにあるかは正確にわかっていますが、(W3C 仕様に従って) 1 秒に変換してから に渡す必要がcurrentTime
あります。最も近いキーフレームを見つけます。
私の質問は次のとおりです。メディア要素に常に利用可能な最新のキーフレームを探すように指示したり、再生時間をシステムクロック時間と同期させたりする方法はありますか?
javascript - Node.jsの2つの子プロセス間をパイプしますか?
Node.jsでFFmpegを使用してビデオをキャプチャし、MediaSource APIを使用して再生するためにWebsockets経由でブラウザに送信しようとしています。これまでのところ、Firefox では機能しますが、Chrome では正しくデコードされません。どうやら、この質問を読んでから、sample_muxer プログラムを使用して、各「クラスター」がキーフレームで始まるようにする必要があります。
私が使用しているコードは次のとおりです。
明らかに、私はそれを正しくパイプしていません。また、引数を含めながらどうすればよいかわかりません。これを機能させるための助けに感謝します。ありがとう!
javascript - メディア ソースの拡張機能: sourcebuffer のバッファリングされた範囲を削除する方法
sourceBuffer.remove()
バッファリングされた範囲または sourceBuffer 全体を削除しますか?
もしそうなら、2つの予想される引数は何ですか?
video-streaming - mp4box の DASH .mpd が Dash.js プレーヤーで再生されない
MP4Box を使用して .mpd ファイルを生成し、Dash.js プレーヤーを使用して生成されたファイルを再生しましたが、再生されません。しかし、リンク ( http://msdn.microsoft.com/en- us/library/dn551368(v=vs.85).aspx ) 再生中です。上記のリンクに記載されている詳細に従っていますが、正常に動作します。しかし、dash.js プレーヤーで .mpd を使用すると、機能しません。
この問題を解決するために私を助けてください。
この問題を解決するために私を助けてください。
javascript - メディア ソースのバッファ データはどこに行くのですか?
ライブ ソースからソース バッファにビデオを追加しているので、ソースの長さに制限がない可能性があります。
ソース バッファ内のデータはブラウザのどこに保存されますか?メモリまたはディスク キャッシュ ファイルに保存されますか?
バッファがどのくらい大きくなるかを気にする必要がありますか? おそらく、バッファから定期的にデータを削除する必要がありますか?
ライブ ストリームを表示したいだけです。
このコードを実行して、バッファで何が起こっているかを確認しました
出力例を次に示します。
javascript - MediaSource エラー: この SourceBuffer は親メディア ソースから削除されました
Chrome で利用できる新しい MediaSource API を試しています。
WebSocket からビデオ メディア ソースにその場でバイナリ データを追加しようとしています。
https://html5-demos.appspot.com/static/media-source.htmlの例から始めて、私のコードは現在次のとおりです。
私は一貫してエラーメッセージを受け取ります: InvalidStateError: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
after one append. への呼び出しの直後に MediaSource が閉じているようbuffer.appendData()
です。
これをエレガントに行う方法はありますか?
注: chrome://media-internals/ は有用な情報を返しません。
javascript - メディア ソースの拡張子が機能しない
MediaSource API を使用して、個別の WebM ビデオを単一のソースに追加しようとしています。
WebM のプレイリストが読み込まれ、それぞれが SourceBuffer として追加される、同じことを試みていたGithub プロジェクトを見つけました。しかし、最後にコミットされたのは 1 年前であるため、現在の仕様とは同期していません。そこで私はそれをフォークし、最新の API プロパティ/メソッドに更新し、さらにいくつかの再構築を行いました。既存のコードの多くは、仕様の例とEric Bidelman のテスト ページから直接取得されました。
ただし、期待どおりに動作させることはできません。Mac OS X 10.9.2 の 2 つのブラウザーでテストしています: Chrome 35 安定版 (この記事の執筆時点で最新) と、フラグが about:config にmedia.mediasource.enabled
設定された Firefox 30 ベータ版 (この機能は、 true
FF 25、および現在の安定は 24 です)。
ここに私が遭遇している問題があります。
両方のブラウザ
最終的には、11 個の WebM (00.webm、01.webm、…、10.webm) で構成された 1 つの長いビデオにしたいと考えています。現在、各ブラウザはビデオの 1 つのセグメントのみを再生します。
クロム
非常に一貫性のない行動。これらのバグを確実に再現することは不可能のようです。
- ビデオが空白になったり、途中に黒いバーが表示されたりして、再生できないことがあります。
- ビデオがロードされ、01.webm の最初のフレームで一時停止することがあります。
- 場合によっては、ビデオが 02.webm のいくつかのフレームを再生して一時停止し、最初の 3 つのセグメントのみが読み込まれることがあります。
- [再生] ボタンは、最初はグレー表示されています。
- グレー表示された再生ボタンを押すと、非常に一貫性のない動作が発生します。時々、再生できない黒いビデオがロードされます。それ以外の場合は、最初のセグメントを再生し、最後に到達すると停止し、もう一度 [再生/一時停止] を押すと、次のセグメントがロードされます。それでも、セグメントをスキップして 04.webm でスタックすることがあります。とにかく、コンソールがすべてのバッファを通過したことを報告しても、最終セグメントを再生することはありません。
正直毎回違います。ここにすべてをリストすることはできません。
既知の警告: Chrome は現在実装していsourceBuffer.mode
ませんが、これがどのような影響を与えるかはわかりません。
ファイアフォックス
- 00.webm のみを再生します。合計実行時間は、そのビデオの長さである 0:08 です。
- ビデオシークが機能しません。(これは、onSeeking イベント ハンドラーで実際に何も起きていないため、予期された動作である可能性があります。)
- 動画は一度終了すると再開できません。
私の最初の理論は、これは と に関係しているというものでしmediaSource.sourceBuffers[0].timestampOffset = duration
たduration = mediaSource.duration
。しかし、新しいセグメントを追加しているにもかかわらず、mediaSource.duration
以外から何も返せないようです。NaN
ここで完全に失われました。ガイダンスは非常に感謝しています。
編集: コードのデュレーション部分のコメントを外し、すべてのビデオでAaron Colwell の Media Source Extension Tools (ヒントを提供してくれたAdam Hartmse_webm_remuxer
に感謝)から実行しました。Chrome で予期せぬ不具合が発生することはもうありません。しかし残念なことに、メディア セグメントが終了すると一時停止し、再生を押しても 1 つのフレームで動かなくなることがあります。
Firefox Beta では、最初のセグメントを超えて再生されず、次のように応答します。
TypeError: SourceBuffer.timestampOffset に割り当てられている値は、有限の浮動小数点値ではありません。
duration
戻り値のログNaN
(ただし FF のみ)。