3

Node.js Express サーバーから、Content-Rangeヘッダーとキャッシュ ヘッダーなしでオーディオ ファイルをストリーミングしています。これは最新の Safari では問題なく動作しますが、Chrome では動作しません。

で完全なオーディオファイルをストリーミングするときHTTP 200、私のヘッダーは

{ 'Content-Length': 4724126,
  'Content-Type': 'audio/mpeg',
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
  'Access-Control-Allow-Headers': 'POST, GET, OPTIONS',
  Expires: 0,
  Pragma: 'no-cache',
  'Cache-Control': 'no-cache, no-store, must-revalidate' }

Chrome と Safari<audio>タグの両方で動作します。

HTTP 206で部分的なコンテンツをストリーミングすると、ヘッダーが

{ 'Content-Length': 4724126,
  'Content-Type': 'audio/mpeg',
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
  'Access-Control-Allow-Headers': 'POST, GET, OPTIONS',
  Expires: 0,
  Pragma: 'no-cache',
  'Cache-Control': 'no-cache, no-store, must-revalidate',
  'Accept-Ranges': 'bytes',
  'Content-Range': 'bytes 120515-240260/4724126' }

これにより、またはタグがあったChromeページのエラーが発生しました。<audio><video>

ブラウザでストリーミング URL を使用するときに Chrome によって作成された埋め込みメディア タグでさえ機能せず、これにつながった

ここに画像の説明を入力

オーディオ ファイルは、ローカル ファイルを読み取り、Node.js createReadStreamAPIを介してファイル読み取りストリームを作成することで提供されます。

var file = fs.createReadStream(path, {start: range[0], end: range[1]});

サーバーのコードをここに投稿しました。

[アップデート]

Chrome が要求/応答についてRangeより厳密であるというわけではありません。Content-Rangeしたがって、Content-Range応答にはRange以前の要求が必要です。典型的なケースは、プレーヤー バーを 2 番目の S にスクラブすることです。API は"Range"リクエストを送信し、サーバーは「Content-Range」ヘッダーで応答します。私の場合はContent-Range、通常のリクエストではなく、レスポンスを送信していました"Range"。Safari が機能するのは、応答の前に要求をstreet-html厳密に要求する必要がないためです。そのため、応答から「Content-Range」ヘッダーを削除しましたが、機能しません。物語の終わり(!)。"Range""Content-Range"

この問題をフォローアップするために、Chromium net-dev フォーラムにもChrome の悪い範囲ヘッダーに投稿しました: Range: bytes=0-

4

0 に答える 0