Vegaで画面解像度を検出する方法

この記事では、Vega OSデバイス上で動作するReact Nativeアプリに画面解像度を検出する処理を実装します。Fire TV Stick 4K Selectでは4K再生がサポートされていますが、すべてのTVでサポートされるとは限りません。Fire TV Stick 4K Selectが高精細（HD）TVに接続されている場合は、最適なエクスペリエンスを提供するために、アプリでHD以下のストリームのみをリクエストする必要があります。不適切なビデオストリームをリクエストすると、途切れやゆがみ、再生エラーなどの再生の問題が発生することがあります。

画面の解像度を検出するには、次の2つの方法があります。

W3C標準のdecodeInfo()。Shaka Playerやその他のウェブベースのプレーヤーを使用するアプリに推奨されます。
VegaグラフィックスAPI。W3C APIを使用しないカスタムプレーヤーに推奨されます。

前提条件

Vega開発環境がセットアップされていること
Vega OSで動作するReact Nativeアプリ
テスト用のFire TV Stick 4K Select
@amazon-devices/react-native-w3cmediaパッケージがインストールされていること（decodeInfo()を使用する場合）

`decodeInfo()`ポリフィルの定義

Amazonのパッチが適用されたShaka Playerを使用する場合は、この手順をスキップしてください。これにはポリフィルが既に含まれています。

その他のプレーヤーの場合は、decodeInfo()のポリフィルを定義します。メディア機能のドキュメントに含まれているポリフィルのコードを参照してください。

Vega Sportsサンプルアプリでは、ビルドスクリプトによってW3CMediaPolyfill.tsというファイルが<アプリのルート>/w3media/polyfills/フォルダに配置されます。このファイルにdecodeInfo()の実装が含まれています。

ポリフィルのインストール

アプリにポリフィルを定義したら、そのポリフィルをインストールして、アプリからメディア機能にアクセスできるようにします。Vega Sportsサンプルアプリでは、アプリの初期化中にポリフィルがインストールされます。

`decodeInfo()`による解像度サポートの照会

Shaka Playerや、decodingInfo()を直接呼び出すその他のW3Cベースのプレーヤーを使用する場合は、この手順をスキップしてください。

カスタムプレーヤーのコードでは、decodeInfo()を使用して、接続されているディスプレイでサポートされる解像度をチェックします。次の例では、HDおよび超高精細（UHD）のAdvanced Video Coding（AVC）ストリームのデコードがサポートされるかどうかを確認します。

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

const contentType = 'video/mp4;codecs=avc1.640028';
const configuration = {
  type: 'media-source',
  video: {
    contentType: contentType,
    width: 1920,
    height: 1080,
    bitrate: 2000,
    framerate: 29.97,
  },
};

const configuration_4k = {
  type: 'media-source',
  video: {
    contentType: contentType,
    width: 3840,
    height: 2160,
    bitrate: 8000,
    framerate: 29.97,
  },
};

decodingInfoImpl(configuration)
  .then((result) => {
    console.log(
      '' +
        contentType +
        '（高さ' +
        configuration.video.height +
        '、ビットレート' +
        configuration.video.bitrate +
        '、フレームレート' +
        configuration.video.framerate +
        '）のデコードはサポート対象' +
        (result.supported ? '' : '外') +
        'です。',
    );
  })
  .catch((err) => {
    console.error(err, 'が原因でdecodingInfoが拒否されました');
  });

decodingInfoImpl(configuration_4k)
  .then((result) => {
    console.log(
      '' +
        contentType +
        '（高さ' +
        configuration_4k.video.height +
        '、ビットレート' +
        configuration_4k.video.bitrate +
        '、フレームレート' +
        configuration_4k.video.framerate +
        '）のデコードはサポート対象' +
        (result.supported ? '' : '外') +
        'です。',
    );
  })
  .catch((err) => {
    console.error(err, 'が原因でdecodingInfoが拒否されました');
  });

Fire TV Stick 4K Selectが4K以外のディスプレイ（1080pや720pなど）に接続されている場合、decodingInfoImpl()はconfiguration_4kをサポート対象外として返し、低解像度の構成をサポート対象として返します。

代替手段としてのVegaグラフィックスAPIの使用

VegaグラフィックスAPIは、Fire TVデバイスおよび接続されているディスプレイに関する情報を取得する手段を提供します。取得できる情報には、高さと幅に加えて、ハイダイナミックレンジ（HDR）などの機能が含まれます。この方法は、W3C APIを使用しないカスタムプレーヤーに最適です。

返される高さの値には、デバイスとディスプレイの組み合わせに応じて適切な解像度が反映されます。

HD TVがFire TV Stick 4K Selectに接続されている場合は1080が返されます。
4K TVがFire TV Stick 4K Selectに接続されている場合は2160が返されます。

実装のテスト

アプリをビルドし、Fire TVデバイスで実行します。

Fire TV Stick 4K SelectをHD（1080p）TVに接続します。
アプリを実行し、HDストリームのみがリクエストされることを確認します。
Fire TV Stick 4K Selectを4K TVに接続します。
アプリを実行し、4Kストリームがリクエストされることを確認します。

Last updated: 2026年3月26日