W3C Mediaの機能
Media機能APIは、メディアの処理方法をプレーヤーがより適切に決定できるようにしたり、メディアがどの程度適切に処理されているかを判断したりするための重要な機能を提供します。このAPIは、MediaSourceメソッド、isTypeSupported()メソッド、HTMLMediaElementメソッド、canPlayType()メソッドを置き換えて改善します。このAPIを使用するプレーヤーでは、適切な情報に基づいて判断して、ハイダイナミックレンジ(HDR)のコンテンツがスタンダードダイナミックレンジ(SDR)の画面に配信されないようにすることができます。
World Wide Web Consortium(W3C)の仕様では、ユーザーエージェントを照会してオーディオとビデオのデコーディング機能を特定できるdecodingInfoメソッド(英語のみ)が定義されています。このメソッドは、構成がサポートされているかどうかと、スムーズで省電力な再生が可能かどうかを示します。
ShakaなどのJavaScriptプレーヤーは、decodingInfo()メソッドを使用して、再生の開始前にデバイスのメディア機能を検出します。このような場合は、decodingInfo()メソッドのVega実装を提供するポリフィルをアプリでインストールすると、プレーヤーがそれに応じて決定を行えるようになります。ポリフィルのインストール方法の詳細については、W3C Media機能のインストールとセットアップセクションを参照してください。
W3C Media機能の前提条件
この機能は、Vega SDKの一部として提供されるW3C APIに実装されています。アプリでは、このAPIをpackage.jsonに依存関係として追加して、必要なインポートを取得する必要があります。
W3C Media機能のインストールとセットアップ
- メディアプレーヤープロジェクトをセットアップします。
- W3C Media機能の使用方法セクションの説明に従ってポリフィルをインストールします。
W3C Media機能の使用方法
Shaka Playerを使用するアプリ
Shaka Playerを使用するアプリ向けには、Shaka Playerリリースの一部としてポリフィルが提供されています。Vega用のShaka Playerリリースの詳細については、Shaka Playerを使用したアダプティブコンテンツ(HLS/DASH)の再生を参照してください。
このポリフィルは、ナビゲーターを通じてdecodingInfo()メソッドを提供します。Shaka Playerは、実装を提供するときにこのdecodingInfo()メソッドを内部で使用します。コードに変更を加えずに新しい実装を適用するには、Shaka Playerのdistフォルダを更新します。
内部でdecodingInfo()を使用するJavaScriptプレーヤーを使用するアプリ
decodingInfo()の実装を必要とするほかのプレーヤーを呼び出すアプリでは、手動でポリフィルをインストールする必要があります。
import {
decodingInfo as decodingInfoImpl,
} from '@amazon-devices/react-native-w3cmedia';
class W3CMediaPolyfill {
static install() {
global.navigator.mediaCapabilities = ({});
global.navigator.mediaCapabilities.decodingInfo = decodingInfoImpl;
}
}
export default W3CMediaPolyfill;
// ポリフィルをインストールするには、W3CMediaPolyfill.install();を呼び出します。
HLS.jsプレーヤーとDASH.jsプレーヤーでは、decodingInfo()メソッドの使用方法に関して注意点があります。詳細については、よくある質問(FAQ)セクションを参照してください。
decodingInfo()に依存しないJavaScriptプレーヤーを使用するアプリ
TheoやBitmovinなどのプレーヤーは、decodingInfo()(英語のみ)ではなくcanPlayType(英語のみ)やisTypeSupported(英語のみ)を使用します。アプリでは、要件に合う場合は同じメソッドを引き続き使用できます。または、プレーヤーの外部でMediaCapabilities APIを呼び出し、その情報を使用して再生を開始することもできます。
import {
decodingInfo as decodingInfoImpl,
} from '@amazon-devices/react-native-w3cmedia';
const contentType = 'video/mp4;codecs=avc1.640028';
const configuration = {
type: 'media-source',
video: {
contentType: contentType,
width: 640,
height: 360,
bitrate: 2000, // bps単位
framerate: 29.97
}
};
decodingInfoImpl(configuration)
.then((result) => {
console.log('' + contentType + 'のデコード:'
+ (result.supported ? '' : '未') + '対応、'
+ (result.smooth ? '' : '非') + 'スムーズ、'
+ (result.powerEfficient ? '' : '非') + '省電力');
})
.catch((err) => {
console.error(err, 'が原因でdecodingInfoが拒否されました');
});
よくある質問(FAQ)
ドルビーサポートをチェックするにはどうすればよいですか?
decodingInfo()メソッドとisTypeSupported()メソッドのVega実装は、接続されているTVやAVRの機能も考慮した結果を返します。次のコード例は、decodingInfo()メソッドでドルビーサポートをチェックする場合に送信できる最小構成を示しています。
import {
decodingInfo as decodingInfoImpl,
} from '@amazon-devices/react-native-w3cmedia';
const contentType = 'audio/mp4;codecs=ec-3';
const configuration = {
type: 'media-source',
audio: {
contentType: contentType,
channels: 5.1.1,
sampleRate: 48000,
}
};
decodingInfoImpl(configuration)
.then((result) => {
console.log('' + contentType + 'のデコード:'
+ (result.supported ? '' : '未') + '対応、'
+ (result.smooth ? '' : '非') + 'スムーズ、'
+ (result.powerEfficient ? '' : '非') + '省電力');
})
.catch((err) => {
console.error(err, 'が原因でdecodingInfoが拒否されました');
});
HDRサポートをチェックするための最小構成はどのようになりますか?
ドルビーサポートと同様に、Vega実装を使用して、接続されているTVやモニターのHDRサポート機能をチェックできます。
import {
decodingInfo as decodingInfoImpl,
} from '@amazon-devices/react-native-w3cmedia';
// 有効なcodecsパラメーターが必要です。
const contentType = 'video/webm;codecs=vp09.2.10.10.0.9.16.10.1';// プロファイル2、レベル1、10ビット深度、BT2020
const configuration = {
type: 'media-source',
video: {
contentType: contentType,
width: 640,
height: 360,
bitrate: 2000, // bps単位
framerate: 29.97,
hdrMetadataType: "smpteSt2086" // HDR10(HDR10+の場合はsmpteSt2094-40)
}
};
decodingInfoImpl(configuration)
.then((result) => {
console.log('' + contentType + 'のデコード:'
+ (result.supported ? '' : '未') + '対応、'
+ (result.smooth ? '' : '非') + 'スムーズ、'
+ (result.powerEfficient ? '' : '非') + '省電力');
})
.catch((err) => {
console.error(err, 'が原因でdecodingInfoが拒否されました');
});
Dash.jsでdecodingInfo()を有効にするにはどうすればよいですか?
アプリで、decodingInfo()のVega実装をDash.jsプレーヤーに提供するポリフィルをインストールする必要があります。MediaCapabilities APIのサポートは、Dash.jsプレーヤーの4.0.0リリース(英語のみ)で導入されました。
注: isTypeSupported()メソッドではなくdecodingInfo()を使用するには、useMediaCapabilitiesApiをtrueに設定してください。
HLS.jsプレーヤーで有効にするにはどうすればよいですか?
アプリで、decodingInfo()のVega実装をHLS.jsプレーヤーに提供するポリフィルをインストールする必要があります。MediaCapabilitiesのサポートは、1.5.0-alphaリリース(英語のみ)で導入されました。
HlsConfigでuseMediaCapabilitiesを有効にしてください。
注: HLS.jsプレーヤーでdecodingInfo()メソッドが使用されるのは、GitHubのHLS.jsリポジトリ内のmediacapabilities-helper.tsソースファイルで言及されている特定のシナリオに限られます。
W3C Media機能のトラブルシューティング
このAPIは、MIMEタイプの「codecs」パラメーターに依存してプロファイル、レベル、コーデックタイプなどを検出します。エラーが発生した場合は、この値が適切に渡されているかどうかを確認してください。
プレーヤーでMIMEタイプを検出できない場合は、無効なMIMEタイプ(MIME標準(英語のみ)に準拠していないMIMEタイプ)が渡されている可能性があります。この場合、実際のコンテンツがデバイスでサポートされていてもエラーになります。
関連トピック
Shaka Playerを使用したアダプティブコンテンツ(HLS/DASH)の再生
Last updated: 2025年9月30日

