Vega向けReact NativeのW3C Media API

現代のメディアストリーミングアプリ開発者は、Android、iOS、ウェブブラウザなど、各種のオペレーティングシステムが搭載されたさまざまなデバイスファミリーを対象に、複数のメディア再生スタックを開発し、管理するという課題に直面しています。複数のメディアプレーヤーを管理する場合、エンジニアリング作業が増え、メンテナンスコストも増加し、プラットフォーム間でユーザーエクスペリエンスの多様化と機能の断片化が生じるおそれがあります。

Vegaを利用することで、オープンウェブ標準とGStreamerなどのオープンソースのマルチメディアフレームワークに基づいて再生APIとスタックを統合できることがわかりました。Amazonは、Vega SDKとVegaデバイスにW3C（World Wide Web Consortium）Media APIを提供するW3C Media React Native JavaScriptコンポーネントを構築しています。これにより、ウェブブラウザ、Vega、Fire OSデバイスに共通のメディア再生スタックを提供できます。

W3C Media APIとは

ウェブアプリ開発者にとって、HTMLMediaElement（英語のみ）、Media Source Extension（MSE、英語のみ）、Encrypted Media Extension（EME、英語のみ）は非常になじみのあるものです。これらは、WHATWG（英語のみ）とW3C（英語のみ）のオープン標準グループが定義するメディアAPIです。

HTMLMediaElementは、あらゆるメディアURLの再生をサポートし、一時停止、再生、シークなどの一般的な再生制御APIを提供するメインプレーヤーAPIです。また、再生の状態やコンテンツのメディアトラックに関連する情報のクエリもサポートしています。Amazonでは、この再生モードを「URLモードの再生」と呼びます。

Media Source Extension（MSE）は、HTMLMediaElement APIを拡張して、JavaScript（JS）アプリ開発者がHLSやMPEG DASHなどのアダプティブストリーミングコンテンツを再生できるようにするものです。この拡張を通じて、JSアプリはHLS/DASHマニフェストをダウンロードして解析し、計算された帯域幅に基づいて必要なメディアセグメントをダウンロードし、このAPI経由で再生パイプラインに挿入します。これにより、アプリ開発者は、コンテンツに最適な再生エクスペリエンスをより細かく制御できます。Amazonでは、この再生モードを「MSEモードの再生」と呼びます。

Encrypted Media Extension（EME）は、HTMLMediaElement APIを拡張して、JSアプリ開発者がDRMライセンスを取得して再生パイプラインに提供できるようにします。これにより、DRMで保護されたセキュアコンテンツを復号化したり、システムのセキュアビデオパスを介して再生したりできます。

これらのAPIは、従来、Chromium、Microsoft Edge、Safari、Operaなどのデスクトップブラウザや埋め込みウェブブラウザで使用できるものでした。ウェブアプリ開発者は、HTML/CSS/JavaScriptでコーディングを行い、これらのW3C Media APIを使用してウェブブラウザでDRMを再生したり、メディアを消去したりします。

W3C Media APIのメリット

MSE APIを使用すると、アプリ開発者は、メインコンテンツの再生中に別のエピソードのギャップレス再生（ウェブシリーズやプレイリスト向け）やギャップレスの広告挿入（プリロール、ミッドロール、ポストロール）を行うなど、高度な再生エクスペリエンスを構築できます。これは、メディアパイプラインでデコードしてレンダリングするようにキューに入れられたメディアサンプルを、アプリ開発者が管理（追加／削除／更新）できるようにする関数を公開することで実現されています。いずれも、使い慣れたJavaScript構文で記述できます。

W3C Media APIでサポートされるストリーミング形式

1. MSEモードの再生では、コンテンツのコンテナ形式がMSEバイトストリームレジストリ（英語のみ）で指定されているリストと互換性がある限り、アプリはMPEG DASH、HLS、SmoothStreamingなどの任意のアダプティブストリーミング形式を再生できます。
2. URLモードの再生では、アプリはMP4、MP3、OGG、FLV、MKVなどのファイル形式の非アダプティブストリーミングを再生できます。

W3C Media APIでサポートされるオーディオ／ビデオコーデック

W3C Media APIは、ストリーミングメディアユースケースでよく使用されるオーディオ／ビデオコーデックをサポートしています。オーディオには、ドルビーオーディオ（AC3、eAC3、AC4、EC3_JOC）、AAC（LC、AAC+、eAAC+）、MP3、Opus、FLAC、Vorbisを使用できます。ビデオには、H.264、H.265、VP8、VP9、MPEG4、AV1を使用できます。

W3C Media APIでサポートされるDRMスキーマ

W3C Media APIは、Widevine（L1）やPlayReady（SL3000）などのDRMスキーマをサポートしています。

サポートされるクローズドキャプション／字幕形式

W3C Media APIは、CEA 608、CEA 708、TTML、WebVTT、SRT形式のインバンドおよびアウトオブバンドのクローズドキャプションと字幕をサポートしています。アプリでは、言語に基づいてクローズドキャプションと字幕を選択することができます。

W3C APIの基盤となるネイティブスタックの構造

以下に、この構造を下から上に向けて説明します。

1. プラットフォームのコアメディアコンポーネント： これらのプラットフォーム／OSのネイティブAPIのセットでは、基盤となるハードウェア処理ブロックにアクセスして、オーディオ／ビデオフレームの復号化、デコード、レンダリングを行ったり、ビデオサーフェスにクローズドキャプションを表示したりできます。

   1. オーディオ／ビデオデコーダー： プラットフォームのSoCおよびBSPでサポートされるハードウェアアクセラレーションまたはソフトウェアオーディオ／ビデオデコーダーにアクセスして、フレームをデコードするプラットフォームAPI。
   2. DRM： DRMライセンスとキーを処理するためのプラットフォームAPI。デコーダーコンポーネントと連携して、安全な信頼ゾーン（TEE）のフレームを復号化します。
   3. ビデオサーフェス： 画面にビデオをレンダリングするプラットフォームAPI。
   4. オーディオ： PCMオーディオフレームとドルビーオーディオフレームを再生するプラットフォームAPI。
   5. キャプション／字幕コンポーネント： キャプションと字幕をレンダリングするUIコンポーネント。
2. オープンソースのGStreamerマルチメディアフレームワーク： Glib Cをベースとするオープンソースのマルチメディアフレームワークは、Vega OSとFire OSのメディア再生フレームワークの基盤です。GStreamerのコアライブラリ、いくつかのオープンソースプラグイン、Amazonが構築したカスタムプラグインを使用し、プラットフォームのコアメディアコンポーネントを使用してオーディオ／ビデオとキャプションの復号化、デコード、レンダリングを行います。
3. メディアプレーヤー： このレイヤーは、内部でGStreamer APIを使用してExoPlayerを提供するネイティブ（C/C++）コンポーネントです。挿入されたオーディオ／ビデオサンプルやコンテンツURLを再生する、高レベルでシンプルな再生APIなどを備えています。
4. React NativeコンポーネントとしてのW3C Media JS API：このレイヤーは、W3C仕様に準拠したHTMLMediaElement、MediaSourceExtension（MSE）、EncryptedMediaExtension（EME）JavaScript APIで構成されています。Native W3C Mediaは、この仕様をネイティブに実装したものです。MediaPlayerレイヤーを使用して、MPEG DASHやHLSなどのアダプティブストリーミングプロトコルのオーディオ／ビデオのフラグメント／セグメントを分離して再生します。

サポートされるMSE/EME JavaScriptプレーヤー

Vega W3CメディアプレーヤーはShaka Playerをサポートしています。Shaka Playerの使用方法については、Shaka Playerを使用してアダプティブストリーミングコンテンツ（HLS/DASH）を再生する方法を参照してください。

このメディアプレーヤーを機能強化するにあたり、Amazonでは、既に市場に出回っており、アプリ開発者がそれぞれのウェブアプリで使用しているほかのMSE/EME JavaScriptプレーヤーを調査しています。以下は、MSE APIを使用したアダプティブストリーミング再生をサポートしている一般的なプレーヤーです。現在使用しているプレーヤーについてのフィードバックをお寄せください。

オープンソースのMSE/EME JavaScriptプレーヤー

1. Shaka Player

有料版のMSE/EME JavaScriptプレーヤー

1. Bitmovin（英語のみ）
2. Brightcove
3. JW Player（英語のみ）

Amazonでは、W3C標準委員会が提供するShaka Player（オープンソース）とMSE Test Suite（英語のみ）を使用して、スタックのテストと検証を行っています。

Vega向けReact Nativeアプリの統合に関する推奨事項

Vega向けReact Nativeアプリでは、任意のJavaScript MSE/EMEプレーヤーを通じてReact Native W3C Media JavaScript APIを使用することをお勧めします。Amazonは、アプリ開発者が任意のプレーヤーを使用してVega SDKのW3C Media APIと統合できるようにしています。

この推奨事項がアプリの要件を満たさない場合は、Amazonのソリューションアーキテクトまたは担当者にお問い合わせのうえ、別の統合オプションについてエンジニアリングチームにご相談ください。

関連リソース

メディアプレーヤーAPI

---

Last updated: 2025年10月1日