MediaStreamTrack の挿入可能なストリーム

Thomas Steiner

公開日: 2021 年 5 月 4 日

Media Capture and Streams API のコンテキストでは、 Media Capture and Streams API はストリーム内の単一のメディアトラックを表します。MediaStreamTrack通常、これらは音声トラックまたは動画トラックですが、他のトラックタイプも存在する可能性があります。

MediaStream オブジェクトは、さまざまな音声トラックまたは動画トラックを表す 0 個以上の MediaStreamTrack オブジェクトで構成されます。各 MediaStreamTrack には 1 つ以上のチャンネルを含めることができます。チャンネルは、ステレオ音声トラックの左右など、特定のスピーカーに関連付けられた音声信号など、メディアストリームの最小単位を表します。

`MediaStreamTrack` の挿入可能なストリームとは

MediaStreamTrack の挿入可能なストリームの基本的な考え方は、 MediaStreamTrack のコンテンツをストリームのコレクションとして公開することです（WHATWG Streams API で定義されています）。これらのストリームを操作して、新しいコンポーネントを導入できます。

デベロッパーが動画（または音声）ストリームに直接アクセスできるようにすることで、ストリームに直接変更を加えることができます。一方、従来の方法で同じ動画操作タスクを実現するには、デベロッパーが <canvas> 要素などの仲介を使用する必要があります。（このタイプのプロセスの詳細については、たとえば、動画 + キャンバス = マジックをご覧ください）。

ブラウザサポート

MediaStreamTrack の挿入可能なストリームは Chrome 94 以降でサポートされています。

ユースケース

MediaStreamTrack の挿入可能なストリームのユースケースには、次のようなものがありますが、これらに限定されません。

「面白い帽子」や仮想背景などのビデオ会議ガジェット。
ソフトウェアボコーダーなどの音声処理。

`MediaStreamTrack` の挿入可能なストリームを使用する方法

MediaStreamTrack の挿入可能なストリームのサポートを次のように検出します。

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

基本コンセプト

MediaStreamTrack の挿入可能なストリームは、 WebCodecs で以前に提案されたコンセプトに基づいており、概念的には MediaStreamTrack を次の 2 つのコンポーネントに分割します。

MediaStreamTrackProcessor。MediaStreamTrack オブジェクトのソースを使用し、メディアフレームのストリーム（具体的にはVideoFrame またはAudioFrame オブジェクト）を生成します。これは、トラックからエンコードされていないフレームをとして公開できるトラックシンクと考えることができます。 ReadableStream
MediaStreamTrackGenerator。メディアフレームのストリームを使用し、 MediaStreamTrack インターフェースを公開します。任意のシンクに提供できます。 getUserMedia() のトラックと同様に。メディアフレームを入力として受け取ります。

`MediaStreamTrackProcessor`

MediaStreamTrackProcessor オブジェクトは、1 つのプロパティ readable を公開します。フレームを MediaStreamTrack から読み取ることができます。トラックが動画トラックの場合、 readable から読み取られたチャンクは VideoFrame オブジェクトになります。トラックが音声トラックの場合、チャンク readableから読み取られたものはAudioFrameオブジェクトになります。

`MediaStreamTrackGenerator`

MediaStreamTrackGenerator オブジェクトも同様に、1 つのプロパティ writable を公開します。これは WritableStream であり、メディアフレームを MediaStreamTrackGenerator に書き込むことができます。MediaStreamTrackGenerator 自体は MediaStreamTrack です。kind 属性が "audio" の場合、ストリームは AudioFrame オブジェクトを受け入れ、他のタイプでは失敗します。種類が "video"の場合、ストリームはVideoFrameオブジェクトを受け入れ、他のタイプでは失敗します。フレームが writableに書き込まれると、フレームのclose()メソッドが自動的に呼び出され、そのメディアリソースに JavaScript からアクセスできなくなります。

MediaStreamTrackGenerator は、メディアフレームを writable フィールドに書き込むことでカスタムソースを実装できるトラックです。

まとめ

基本的な考え方は、次のような処理チェーンを作成することです。

プラットフォームトラック → プロセッサ → 変換 → ジェネレータ → プラットフォームシンク

次の例は、ライブ動画ストリームで検出されたバーコードをハイライト表示するバーコードスキャナアプリケーションのこのチェーンを示しています。

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);

const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;

デモ

上記のセクションの QR コードスキャナのデモは、パソコンまたはモバイルブラウザで動作を確認できます。カメラの前に QR コードをかざすと、アプリがそれを検出してハイライト表示します。アプリケーションのソースコードは GitHubで確認できます。

デスクトップブラウザのタブで実行されている QR コードスキャナ。ユーザーがノートパソコンのカメラの前に持っているスマートフォンの QR コードが検出され、ハイライト表示されている。

セキュリティとプライバシーに関する考慮事項

この API のセキュリティは、ウェブプラットフォームの既存のメカニズムに依存しています。データは VideoFrame および AudioFrame インターフェースを使用して公開されるため、オリジンが汚染されたデータを処理するためのこれらのインターフェースのルールが適用されます。たとえば、クロスオリジンリソースのデータには、そのようなリソースへのアクセスに関する既存の制限によりアクセスできません（たとえば、クロスオリジン画像要素または動画要素のピクセルにアクセスすることはできません）。また、カメラ、マイク、画面からのメディアデータへのアクセスには、ユーザーの承認が必要です。この API が公開するメディアデータは、他の API を介してすでに利用可能です。

フィードバック

Chromium チームは、挿入可能なストリームに関する皆様のご意見をお待ちしています MediaStreamTrack。

API 設計について教えてください

API に、想定どおりに動作しないものがありますか？アイデアを実装するために必要なメソッドやプロパティが不足していますか？セキュリティモデルについてご質問やご意見がありますか？対応する GitHub リポジトリで仕様に関する問題を報告するか、既存の問題に意見を追加してください。

実装に関する問題を報告する

Chromium の実装にバグが見つかりましたか？実装が仕様と異なりますか？ new.crbug.com でバグを報告してください。できるだけ詳細な情報、再現手順を記載し、Blink>MediaStream を [Components] ボックスに入力してください。

API のサポート

MediaStreamTrack の挿入可能なストリームを使用する予定ですか？皆様からの公開サポートは、 Chromium チームが機能の優先順位を決定するのに役立ち、他のブラウザベンダーにサポートの重要性を示すことができます。

ハッシュタグ #InsertableStreams を使用して@ChromiumDevにツイートし、使用している場所と方法をお知らせください。

謝辞

MediaStreamTrack の挿入可能なストリームの仕様は、 Harald Alvestrand と Guido Urdaneta によって作成されました。 Harald Alvestrand、Joe Medley、 Ben Wagner、Huib Kleinhout、 François Beaufort がレビューしました。

MediaStreamTrack の挿入可能なストリーム コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

MediaStreamTrack の挿入可能なストリームとは

ブラウザ サポート