メディアプレーヤーのセットアップ
以下のセクションでは、W3CメディアプレーヤーをVega向けReact Nativeアプリに組み込む際に必要となるコアプロジェクトの設定と更新について大まかに説明します。作業を開始するには、Vegaアプリを作成する必要があります。Vegaアプリを作成する詳細な手順については、アプリの作成を参照してください。
依存関係の追加
アプリのpackage.jsonファイルを更新します。
- dependenciesセクションに次のエントリを追加します。
"@amazon-devices/react-native-w3cmedia": "~2.1.80"
これにより、@amazon-devices/react-native-w3cmediaパッケージで提供されるW3C Media APIへの依存関係が追加されます。
~2.1.80というバージョン指定子は、互換性を維持しながら、パッチバージョン（2.1.81、2.1.82など）への自動アップデートを許容します。
- ターミナルウィンドウを開き、アプリフォルダに移動します。npmを使用して、アプリ内のパッケージをインストールします。
npm install
@amazon-devices/react-native-w3cmediaパッケージのバージョンを更新してください。これにより、最新の機能強化を確実に取り込むことができます。アプリのロジックをすぐに更新する必要がない場合は、以前のバージョンを引き続き使用できます。重大な変更があった場合は、「マイナー」バージョンアップデートが提供されます。
Babelの構成
アプリとW3Cメディアプレーヤー統合との互換性を確保するために、babel.config.jsファイルを更新します。これを行わないと、アプリの実行時に「ReferenceError: Property 'React' doesn't exist」という例外が発生することがあります。
babel.config.jsを更新して、次の変更を加えます。
module.exports = {
presets: [ ['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }] ],
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
runtime: 'automatic',
},
],
]
};
権限の追加
アプリのmanifest.tomlファイルに、必要な権限を追加する必要があります。これにより、W3Cメディアプレーヤーの機能を使用するために必要な権限がアプリに割り当てられます。
- メディア指標サービス： 再生の分析とモニタリングを有効にします。
- メディアサーバー： メディア再生のコア機能を提供します。
- プレーヤーセッションサービス： メディア再生セッションを管理します。
- アクセシビリティ権限： クローズドキャプションと字幕に必要です。
- オーディオサービス： オーディオストリーミング、コントロール、システムサウンドを処理します。
manifest.tomlファイルで、[wants]セクションに以下を追加します。
[wants]
[[wants.service]]
id = "com.amazon.mediametrics.service" # 再生の分析とモニタリングに必要です。
[[wants.privilege]]
id = "com.amazon.devconf.privilege.accessibility" # 字幕に必要です。
[[wants.service]]
id = "com.amazon.mediabuffer.service" # メディアバッファーの管理に必要です。
[[wants.service]]
id = "com.amazon.mediatransform.service" # メディアのデコード／エンコードに必要です。
[[wants.service]]
id = "com.amazon.audio.stream" # オーディオストリーミングに必要です。
[[wants.service]]
id = "com.amazon.audio.control" # オーディオコントロールに必要です。
# レガシー権限。
[[wants.service]]
id = "com.amazon.media.server" # コアメディアのデコード／エンコードに必要です。com.amazon.mediatransform.serviceに置き換えられました。
[[wants.service]]
id = "com.amazon.media.playersession.service" # メディアコントロールの管理に必要です。KMCに置き換えられました。
これらのリクエストにより、メディア再生に必要な権限がアプリに付与されます。マニフェストファイルの詳細については、Vegaアプリのマニフェストファイルの概要を参照してください。
テンプレートアプリとメディアアプリの構成の違い
以下は、変更が加えられていないテンプレートアプリと、メディアアプリとして適切に構成されたアプリを比較したときの構成の差分の例です。
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"dependencies": {
"@amazon-devices/react-native-kepler": "^2.0.0",
+ "@amazon-devices/react-native-w3cmedia": "~2.1.80",
"react": "18.2.0",
"react-native": "0.72.0"
},--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,12 @@
module.exports = {
- presets: ['module:metro-react-native-babel-preset'],
+ presets: [['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }]],
+ plugins: [
+ [
+ '@babel/plugin-transform-react-jsx',
+ {
+ runtime: 'automatic',
+ },
+ ],
+ ],
};--- a/manifest.toml
+++ b/manifest.toml
@@ -14,3 +14,27 @@
launch-type = "singleton"
categories = ["com.amazon.category.main"]
+[wants]
+[[wants.service]]
+id = "com.amazon.mediametrics.service"
+
+[[wants.privilege]]
+id = "com.amazon.devconf.privilege.accessibility"
+
+[[wants.service]]
+id = "com.amazon.mediabuffer.service"
+
+[[wants.service]]
+id = "com.amazon.mediatransform.service"
+
+[[wants.service]]
+id = "com.amazon.audio.stream"
+
+[[wants.service]]
+id = "com.amazon.audio.control"
+
+[[wants.service]]
+id = "com.amazon.media.server"
+
+[[wants.service]]
+id = "com.amazon.media.playersession.service"
次の手順
独自のユースケースに固有の要件を理解してから、再生モードの選択を参照してください。
関連トピック
Last updated: 2026年8月6日
