Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

Vega OSでのReact Native W3C Media API

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

Vega OSでのReact Native W3C Media API

Vegaメディアプレーヤーは、W3C（World Wide Web Consortium）Media APIの機能を、Fire TVデバイス上のReact Nativeアプリで利用できるようにします。ウェブ開発で使い慣れた標準仕様である、<video>要素やHTMLMediaElementなどを使用できます。

Vegaメディアプレーヤーは、基本的なメディア再生用のHTMLMediaElement、アダプティブストリーミング用のMedia Source Extensions（MSE）、DRMコンテンツ保護用のEncrypted Media Extensions（EME）をサポートしています。メディアプレーヤースタックは、VegaデバイスのGStreamerフレームワーク上で動作し、ハードウェアアクセラレーションによるデコーディングとレンダリングを行います。

サポートされているその他のHTML5属性としてなじみのあるものに、次のような属性があります。

標準的なプロパティ：currentTime、duration、paused、volume
標準的なメソッド：play()、pause()、load()
標準的なイベント：timeupdate、ended、error、loadedmetadata

メディア再生スタック

メディア再生スタックは、基盤のシステムの機能を利用して、標準化されたW3C準拠のメディア再生エクスペリエンスをVega OS上のReact Nativeアプリで提供する階層型アーキテクチャです。

以下のセクションでは、Vegaメディア再生のアーキテクチャスタックについて、下層から順に説明します。

プラットフォームのコアメディアコンポーネント：オーディオ／ビデオフレームの復号化、デコード、レンダリングを行うために、基盤のハードウェア処理ブロックへのアクセスを提供するOSネイティブのAPIのセットです。ビデオサーフェスの上にクローズドキャプションを重ねて表示することもできます。
1. オーディオ／ビデオデコーダー：フレームをデコードするために、システムオンチップ（SoC）とOSのボードサポートパッケージ（BSP）でサポートされるハードウェアアクセラレーションやソフトウェアオーディオ／ビデオデコーダーへのアクセスを提供するAPI。
2. DRM： DRMライセンスとキーを処理するAPI。デコーダーコンポーネントと連携して、安全なTrustZone（TEE：高信頼実行環境）でフレームを復号化します。
3. ビデオサーフェス：ビデオを画面にレンダリングするためのAPI。
4. オーディオ： PCMやパススルーのドルビーおよびDTSのオーディオフレームを再生するためのAPI。
5. キャプション／字幕コンポーネント：キャプションと字幕をレンダリングするUIコンポーネント。
オープンソースのGStreamerマルチメディアフレームワーク： Glib Cをベースとしたこのオープンソースのマルチメディアフレームワークは、Vega OSのメディア再生フレームワークの基盤を成すものです。GStreamerは、メディアを処理するための豊富なプラグインとツールを提供するオープンソースのマルチメディアフレームワークです。Vegaメディアプレーヤーは、コアGStreamerライブラリと、Amazonが開発したいくつかのオープンソースプラグインおよびカスタムプラグインを利用して、プラットフォーム固有のメディアコンポーネントと統合します。
ネイティブW3C Media：ネイティブW3C Mediaレイヤーは、W3C Media APIのネイティブ実装を提供するコアコンポーネントです。アダプティブストリーミング（MSE）のユースケースでは、このレイヤーが重要な役割を果たします。このレイヤーは、HLSやDASHなどのストリームから受信したメディアセグメントを解析します。解析後、メディアサンプルの多重化を解除し、基盤のメディアプレーヤーに直接挿入します。メディアプレーヤー（C/C++）は、GStreamer APIを使用して、挿入されたA/VサンプルまたはコンテンツURLを再生するシンプルな高レベルの再生APIを提供します。これにより、上位のレイヤーでは、基盤となるGStreamerフレームワークの複雑な処理を直接行うことなくメディア再生機能を操作できます。
W3C Media JS API： W3C Media JS APIレイヤーは、メディアを再生するためのW3C準拠のAPIを公開するJavaScriptベースのインターフェイスを提供します。これには、HTMLMediaElement、Media Source Extensions（MSE）、Encrypted Media Extensions（EME）などのなじみのあるウェブAPIが含まれます。これらのJavaScriptバインディングは、アプリコードと、基盤にあるメディア再生スタックのネイティブ実装との間をつなぐブリッジとして機能します。アプリでW3C Media JS APIを操作すると（HTMLMediaElementオブジェクトのplay()メソッドを呼び出すなど）、そのリクエストはKeplerW3CTurboModuleを通じてネイティブプレーヤーにルーティングされます。W3C Media JavaScript APIは、低レベルのプラットフォームの詳細を抽象化することで、基盤のメディア再生スタックの品質と信頼性は損なわずに、Vega OSが動作するデバイスでのメディアリッチなReact Nativeアプリの構築を開発者がより簡単に行えるようにします。

ウェブからVegaへの移行

Vega OSには、W3C準拠のメディア再生APIが用意されています。これを使用すると、HTML5ビデオの実装を最小限のコード変更でReact Nativeアプリに移行できます。以下では、よく使用されるウェブパターンからVega OSへの移行方法の例を示します。

HTML5によるウェブ実装

標準的なウェブ環境では、ビデオ再生にネイティブのHTMLMediaElement APIを使用します。

// HTML5ウェブ
const video = document.querySelector("video");
video.src = "video.mp4";
video.play();

この3行の簡単な実装では、ブラウザに組み込まれているvideo要素を使用してメディアコンテンツを読み込み、再生します。

Vega OSでの実装

Vega OSでの実装でも概念モデルは同じですが、Vega向けReact Native環境に適応させる必要があります。

クリップボードにコピーしました。

// Vega

// reactパッケージとreact-nativeパッケージから必要なコンポーネントをインポートします。
import React from 'react';
import {useRef} from 'react';
import {View} from 'react-native';

// @amzn/react-native-w3cmedia NPMパッケージから
// VideoPlayerとKeplerVideoViewの各コンポーネントをインポートします。
import {VideoPlayer, KeplerVideoView} from '@amazon-devices/react-native-w3cmedia';

export const App = () => {
  // ビデオコンポーネントへの参照を宣言します。
  const video = useRef<VideoPlayer | null>(new VideoPlayer());

  video.current.initialize().then(() => {
      video.current.src = "video.mp4"; // HTMLMediaElementのsrc属性を設定します。
      video.current.play();
  });

  // KeplerVideoViewコンポーネントをレンダーツリーに追加します。
  return (
    <View style={{flex: 1}}>
        <KeplerVideoView
          videoPlayer={video.current as VideoPlayer}
        />
    </View>
  );
};

主な相違点

初期化：ウェブブラウザではvideo要素が即座に使用可能になりますが、Vegaでは、再生前に明示的にinitialize()を呼び出す必要があります。
コンポーネントアーキテクチャ： Vegaでは、VideoPlayerコントローラーがKeplerVideoViewレンダリングコンポーネントから切り離されています。
APIの互換性：構造は異なっても、コアのHTMLMediaElementのプロパティ、メソッド、イベントはW3C仕様に従います。

形式の互換性

Vegaメディアプレーヤーは、以下のメディア形式とコーデックに対応しています。TVのハードウェア（ドルビーオーディオや4K再生など）に依存する場合があるため、再生時に適切なコーデックを選択できるように、再生を開始する前にアプリで出力デバイスのメディア機能を確認することが重要です。

対応形式：

URLモード： MP4、MP3、MKV、FLV、OGG、FLAC
MSEモード： HLS（.m3u8）、DASH（.mpd）、SmoothStreaming

対応コーデック：

ビデオ： H.264、H.265、VP8、VP9、AV1、MPEG2
オーディオ： AAC、MP3、ドルビー（AC3、eAC3、AC4）、DTS、Opus、FLAC

DRMのサポート：

Widevine： HD/4Kの場合はL1（ハードウェア）、SDの場合はL3（ソフトウェア）
PlayReady： SL2000/3000（ハードウェア）、SL150（ソフトウェア）

プレーヤータイプの選択

重要な決定の1つは、コンテンツと要件に合った適切な再生方法を選択することです。再生モードを決定するには、次のフローチャートが役立ちます。

コンテンツタイプの決定

MSEプレーヤーの選択（必要な場合）

アダプティブストリーミングコンテンツの場合、適切なJavaScriptプレーヤーを選択する必要があります。ストリーミングタイプ（HLS、DASH、その両方）、DRM、ライブ配信コンテンツ、分析、オープンソースか商用かなどの要素を考慮してください。このガイドでは、Shaka Playerを使用してさまざまなコンテンツタイプとシナリオを処理します。ただし、特定の要件に基づいて、MSE互換の代替プレーヤー（HLS.js、Dash.js、商用プレーヤーなど）を選択することもできます。

サポート対象プレーヤーの一覧については、「サポート対象のライブラリとサービス」のVega互換メディアプレーヤーを参照してください。

メディアプレーヤーAPIリファレンス - 完全なAPIリファレンスとメソッドに関するドキュメント
メディアプレーヤーセットアップガイド - 詳細なセットアップ手順
Shaka Playerの統合 - 完全なShakaのセットアップ手順
メディアプレーヤーチュートリアル - 作業例

高度なトピック：

DRMの実装 - コンテンツ保護
パフォーマンスの最適化 - スピードチューニング
ベVegaメディアコントロール - システム統合

参考資料：

メディアプレーヤーAPIリファレンス - HTMLMediaElement、VideoPlayer、コンポーネントAPI
要件ガイド - 技術仕様
よくある質問（FAQ） - 一般的な質問と解決策

用語集

SoC（システムオンチップ）：コンピューターまたは電子システムのすべての構成要素を含む集積回路。
BSP（ボードサポートパッケージ）： OSと特定のハードウェアプラットフォーム間のインターフェイスとなるソフトウェアコンポーネント。
TEE（高信頼実行環境）：機密性の高いコードを実行するためのメインプロセッサ内の安全な領域。
MSE（Media Source Extensions）： JavaScriptで再生用のメディアストリームを生成できるようにするW3C API。
EME（Encrypted Media Extensions）： DRMで保護されたコンテンツを再生するためのW3C API。
HLS（HTTPライブストリーミング） Appleのアダプティブストリーミングプロトコル。
DASH（HTTP経由の動的アダプティブストリーミング）：アダプティブストリーミングに関するISO標準規格。
PCM（パルス符号変調）：非圧縮のデジタルオーディオ形式。

Last updated: 2025年1月13日