このページは Cloud Translation API によって翻訳されました。

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

MediaStreamTrack のコンテンツは、操作したり新しいコンテンツの生成に使用したりできるストリームとして公開されます。

Thomas Steiner

背景

メディアキャプチャとストリーム 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 として公開できるトラックシンクと考えることができます。
メディアフレームのストリームを消費し、MediaStreamTrack インターフェースを公開する MediaStreamTrackGenerator。getUserMedia() のトラックと同様に、任意のシンクに提供できます。メディアフレームを入力として受け取ります。

`MediaStreamTrackProcessor`

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

`MediaStreamTrackGenerator`

同様に、MediaStreamTrackGenerator オブジェクトは 1 つのプロパティ writable を公開します。これは、MediaStreamTrackGenerator（それ自体が MediaStreamTrack）にメディアフレームを書き込むことができる WritableStream です。kind 属性が "audio" の場合、ストリームは AudioFrame オブジェクトを受け入れ、他の型では失敗します。kind が "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 コードをかざすと、アプリが QR コードを検出してハイライト表示します。アプリケーションのソースコードは GitHub で確認できます。

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

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

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

フィードバック

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

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

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

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

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

API のサポートを表示する

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

ハッシュタグ #InsertableStreams を使用して @ChromiumDev にツイートし、どこでどのように使用しているかをお知らせください。

謝辞

MediaStreamTrack 仕様の挿入可能なストリームは、Harald Alvestrand と Guido Urdaneta によって作成されました。この記事は、Harald Alvestrand、Joe Medley、Ben Wagner、Huib Kleinhout、François Beaufort によってレビューされました。ヒーロー画像: Unsplash の Chris Montgomery。

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

背景

MediaStreamTrack の挿入可能なストリームとは何ですか？

ブラウザ サポート