Vega向けReact NativeのW3C Media API

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

​

メディア再生スタック

1. プラットフォームのコアメディアコンポーネント：オーディオ／ビデオフレームの復号化、デコード、レンダリングを行うために、基盤のハードウェア処理ブロックへのアクセスを提供するOSネイティブのAPIのセットです。ビデオサーフェスの上にクローズドキャプションを重ねて表示することもできます。
   1. オーディオ／ビデオデコーダー：フレームをデコードするために、システムオンチップ（SoC）とOSのボードサポートパッケージ（BSP）でサポートされるハードウェアアクセラレーションやソフトウェアオーディオ／ビデオデコーダーへのアクセスを提供するAPI。
   2. DRM：DRMライセンスとキーを処理するAPI。デコーダーコンポーネントと連携して、安全なTrustZone（TEE：高信頼実行環境）でフレームを復号化します。
   3. ビデオサーフェス：ビデオを画面にレンダリングするためのAPI。
   4. オーディオ：PCM（パルス符号変調）やパススルーのドルビーおよびDTSのオーディオフレームを再生するためのAPI。
   5. キャプション／字幕コンポーネント：キャプションと字幕をレンダリングするUIコンポーネント。
2. オープンソースのGStreamerマルチメディアフレームワーク：Glib Cをベースとしたこのオープンソースのマルチメディアフレームワークは、Vega OSのメディア再生フレームワークの基盤を成すものです。GStreamerは、メディアを処理するための豊富なプラグインとツールを提供するオープンソースのマルチメディアフレームワークです。Vegaメディアプレーヤーは、コアGStreamerライブラリと、Amazonが開発したいくつかのオープンソースプラグインおよびカスタムプラグインを利用して、プラットフォーム固有のメディアコンポーネントと統合します。
3. ネイティブW3C Media：ネイティブW3C Mediaレイヤーは、W3C Media APIのネイティブ実装を提供するコアコンポーネントです。アダプティブストリーミング（MSE）のユースケースでは、このレイヤーが重要な役割を果たします。このレイヤーは、HLSやDASHなどのストリームから受信したメディアセグメントを解析します。解析後、メディアサンプルの多重化を解除し、基盤のメディアプレーヤーに直接挿入します。メディアプレーヤー（C/C++）は、GStreamer APIを使用して、挿入されたA/VサンプルまたはコンテンツURLを再生するシンプルな高レベルの再生APIを提供します。これにより、上位のレイヤーでは、基盤となるGStreamerフレームワークの複雑な処理を直接行うことなくメディア再生機能を操作できます。
4. 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への移行

​

HTML5によるウェブ実装

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

​

Vega OSでの実装

// 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仕様に従います。

​

形式の互換性

• URLモード： MP4、MP3、MKV、FLV、OGG、FLAC、AVI、QuickTime（MOV）、3GPP、MPEG2TS、WEBM
• MSEモード： HLS（.m3u8）、DASH（.mpd）、SmoothStreaming

• VP8： 1080p@30fps、Mainプロファイル（ソフトウェアコーデック、非セキュア）
• オーディオ： AAC、MP3、Dolby（AC3、eAC3、AC4）、Opus、FLAC

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

​

プレーヤータイプの選択

​

コンテンツタイプの決定

​

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

​

用語集

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

​

関連トピック

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

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

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