Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート

@amazon-devices/react-native-w3cmedia

@amazon-devices/react-native-w3cmedia

Kepler WC3 Media APIは、W3C準拠のReact Nativeコンポーネント、JavaScriptクラスコンポーネント、JavaScriptメソッド、およびJavascriptインターフェースを提供します。このAPIを使用して、ギャップレスなエピソード再生やメインコンテンツの再生中へのシームレスな広告挿入など、さまざまな再生体験を構築できます。

このAPIは、HTMLMediaElement、Media Source Extension、Encrypted Media Extensionの各メソッドを（ポリフィルとして）実装しています。

開始の手順

セットアップ

  1. package.jsonファイルのdependenciesセクションに、以下のライブラリ依存関係を追加します。

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

     "@amazon-devices/react-native-w3cmedia": "~2.1.0 "

  2. ターミナルウィンドウを開き、アプリフォルダに移動します。npmを実行して、このパッケージをアプリにインストールします。

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

     npm install

  3. babel.config.jsファイルを更新します。更新しない場合、実行時にアプリから「ReferenceError: Property 'React' doesn't exist」という例外がスローされます。

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

     module.exports = {
     presets: [ ['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }] ],
     plugins: [
         [
         '@babel/plugin-transform-react-jsx',
         {
             runtime: 'automatic',
         },
         ],
     ]
     };

  4. manifest.tomlに、以下の権限を追加します。

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

     [wants]
 [[wants.service]]
 id = "com.amazon.mediametrics.service" # 指標サービスで必要

 [[wants.service]]
 id = "com.amazon.media.server"

 [[wants.service]]
 id = "com.amazon.gipc.uuid.*"

 [[wants.service]]
 id = "com.amazon.media.playersession.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"

 [offers]
 [[offers.service]]
 id = "com.amazon.gipc.uuid.*"

使用方法

React NativeのVideoコンポーネント

Videoは、HTMLMediaElementインターフェイスを継承するHTMLVideoElementインターフェイスを実装するReact Nativeコンポーネントです。

オーディオとビデオの両方を含むMP4、MPEG DASH、HLSなどの形式のオーディオおよびビデオコンテンツを再生するには、このコンポーネントを使用します。

このコンポーネントは、デフォルトのメディアコントロールGUIをサポートしています。

コンポーネントをレンダーツリーに追加し、その参照を保存します。この参照に対してHTMLMediaElementやHTMLVideoElementのメソッドを呼び出します。このコンポーネントでは、ビデオを画面上に表示する前にアプリでコンテンツをプレバッファリングすることはできません。プレバッファリングが必要な場合は、VideoPlayer JavaScriptクラスコンポーネントを使用します。

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

let video: HTMLVideoElement;
<Video
    ref={(ref) => {
        video = ref as HTMLVideoElement; // このコンポーネントの参照を保存します
    }}
/>

VideoPlayerコンポーネント

VideoPlayerコンポーネントは、HTMLMediaElementインターフェイスを継承するHTMLVideoElementインターフェイスを実装します。

HTMLVideoElementはTypeScriptクラスであり、React Nativeコンポーネントではありません。

デフォルトでは、ビデオは画面上にレンダリングされず、メディアコントロールのGUIも表示されません。

アプリには、独自のメディアコントロールUIを構築し、再生エクスペリエンスを制御することが求められます。

アプリでは、VideoPlayerのインスタンスを作成し、それを使用して、画面上にビデオをレンダリングせずにコンテンツのバッファリングを開始する必要があります。

アプリで画面上にビデオを表示する必要があるときは、React NativeのKeplerVideoSurfaceViewコンポーネントをレンダーツリーに追加し、onSurfaceViewCreatedイベントを受け取って、イベントコールバックで取得したサーフェスハンドルをsetSurfaceHandleメソッドを通じてVideoPlayerに渡す必要があります。

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

// ビデオプレーヤーのインスタンスを作成します
let videoPlayer = new VideoPlayer();
videoPlayer.initialize().then(() => {
    // Promiseの解決を待ちます
});

// これを使用してMSE APIでプレバッファリングを開始します
let mediaSource = new MediaSource();
let mediaSourceUrl = URL.createObjectURL(mediaSource);
videoPlayer.src = mediaSourceUrl;
// メディアソースのオープン状態の変更を待ちます
.
.
// ソースバッファーを作成します
let videoSourceBuffer = mediaSource.addSourceBuffer("video/mp4");
// HLSまたはDASHマニフェストからダウンロードしたメディアチャンクを追加します
mediaSource.append(byteArray);
.
.
.
// 後でアプリでビデオをレンダリングして再生を開始するときに、KeplerVideoSurfaceを
// レンダーツリーに追加します。

// onSurfaceViewCreatedイベントのハンドルには、サーフェスハンドルが渡されます。
const onSurfaceViewCreated = (_surfaceHandle: string) : void => {
    videoPlayer.setSurfaceHandle(_surfaceHandle);
    videoPlayer.play();
}

// アプリがバックグラウンドに移行すると、サーフェスが破棄されます
const onSurfaceViewDestroyed = (_surfaceHandle: string) : void => {
    videoPlayer.clearSurfaceHandle(null);
}

// React NativeのKeplerVideoSurfaceViewコンポーネントをレンダーツリーに追加します
<View style={{ backgroundColor: "white", alignItems: "stretch",
    width: deviceWidth, height: deviceHeight}}>
        <KeplerVideoSurfaceView  style={{zIndex: 0}}
            onSurfaceViewCreated={onSurfaceViewCreated}
            onSurfaceViewDestroyed={onSurfaceViewDestroyed}
        />
</View>

React NativeのAudioコンポーネント

Audioは、HTMLMediaElementインターフェイスを継承するHTMLAudioElementインターフェイスを実装するReact Nativeコンポーネントです。

オーディオのみを含むMP3やMPEG DASH/HLSなどのオーディオを再生するには、このコンポーネントを使用します。

このコンポーネントは、デフォルトのメディアコントロールGUIをサポートしています。

コンポーネントをレンダーツリーに追加し、その参照を保存します。

この参照に対してHTMLMediaElementやHTMLAudioElementのAPIを呼び出します。

このコンポーネントでは、オーディオをデバイス上で再生する前にアプリでコンテンツをプレバッファリングすることはできません。プレバッファリングが必要な場合は、AudioPlayer JavaScriptクラスコンポーネントを使用します。

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

<Audio
  ref={ref => {
    audio = ref; // このコンポーネントの参照を保存
  }}
/>

AudioPlayerコンポーネント

AudioPlayerコンポーネントは、HTMLMediaElementインターフェイスを継承するHTMLAudioElementインターフェイスを実装します。

AudioPlayerはTypeScriptクラスであり、React Nativeコンポーネントではありません。

オーディオのみを含むMP3やMPEG DASH/HLSなどの形式を再生するには、このコンポーネントを使用します。

アプリでは、AudioPlayerのインスタンスを作成し、それを使用して、再生を開始せずにコンテンツのバッファリングを開始する必要があります。

メディアコントロールのGUIは表示されません。アプリには、独自のメディアコントロールUIを構築し、再生エクスペリエンスを制御することが求められます。

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

// オーディオプレーヤーのインスタンスを作成します
let audioPlayer = new AudioPlayer();
audioPlayer.initialize().then(() => {
    // Promiseの解決を待ちます
});
.
.
// これを使用してMSE APIでプレバッファリングを開始します
let mediaSource = new MediaSource();
let mediaSourceUrl = URL.createObjectURL(mediaSource);
audioPlayer.src = mediaSourceUrl;
// メディアソースのオープン状態の変更を待ちます
.
.
// ソースバッファーを作成します
let audioSourceBuffer = mediaSource.addSourceBuffer("audio/mpeg");
// HLSまたはDASHマニフェストからダウンロードしたメディアチャンクを追加します
mediaSource.append(byteArray);
.
.
.
// 後でアプリで再生を開始するときは以下のようにします。
audioPlayer.play();

KeplerVideoSurfaceView

KeplerVideoSurfaceViewは、画面上にビデオフレームをレンダリングするReact Nativeコンポーネントです。

このコンポーネントは、VideoPlayerを使用してプレバッファリングモードで動作している場合にのみ使用してください。このモードでは、複数のプレーヤーに異なるコンテンツを同時にプレバッファリングできます。

アプリでは、onSurfaceViewCreatedイベントコールバックで渡されたサーフェスハンドルを、画面上にレンダリングする必要のあるビデオプレーヤーインスタンスに関連付けます。

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

// ビデオプレーヤーのインスタンスを作成します
let videoPlayer = new VideoPlayer();

// これを使用してMSE APIでプレバッファリングを開始します
let mediaSource = new MediaSource();
let mediaSourceUrl = URL.createObjectURL(mediaSource);
videoPlayer.src = mediaSourceUrl;
// メディアソースのオープン状態の変更を待ちます
.
.
// ソースバッファーを作成します
let videoSourceBuffer = mediaSource.addSourceBuffer("video/mp4");
// HLSまたはDASHマニフェストからダウンロードしたメディアチャンクを追加します
mediaSource.append(byteArray);
.
.
.
// 後でアプリでビデオをレンダリングして再生を開始するときに、KeplerVideoSurfaceを
// レンダーツリーに追加します。

// onSurfaceViewCreatedイベントのハンドルには、サーフェスハンドルが渡されます。
const onSurfaceViewCreated = (_surfaceHandle: string) : void => {
    videoPlayer.setSurfaceHandle(_surfaceHandle);
    videoPlayer.play();
}

// アプリがバックグラウンドに移行すると、サーフェスが破棄されます
const onSurfaceViewDestroyed = (_surfaceHandle: string) : void => {
    videoPlayer.clearSurfaceHandle(null);
}

// React NativeのKeplerVideoSurfaceViewコンポーネントをレンダーツリーに追加します。
<View style={{ backgroundColor: "white", alignItems: "stretch",
    width: deviceWidth, height: deviceHeight}}>
        <KeplerVideoSurfaceView  style={{zIndex: 0}}
            onSurfaceViewCreated={onSurfaceViewCreated}
            onSurfaceViewDestroyed={onSurfaceViewDestroyed}
        />
</View>

KeplerCaptionsView

クローズドキャプションや字幕を画面上にレンダリングするReact Nativeコンポーネントです。このコンポーネントは、VideoPlayerコンポーネントやAudioPlayerコンポーネントを使用してプレバッファリングモードで動作している場合にのみ使用してください。

アプリでは、onCaptionViewCreatedイベントコールバックで渡されたキャプションハンドルを、setCaptionViewHandleメソッドを通じてVideoPlayerとAudioPlayerに関連付けて、プレーヤーがキャプションや字幕を画面上にレンダリングできるようにします。

現在、キャプションはデフォルトではレンダリングされません。

レンダリングを有効にするには、以下のコマンドを実行します。

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

vdcm set com.amazon.devconf/system/accessibility/ClosedCaptioningEnabled 1

以下の例は、このコンポーネントの使用方法を示しています。

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

// onCaptionViewCreatedイベントコールバックのハンドルには、キャプションハンドルが渡されます。
const onCaptionViewCreated = (captionsHandle: string) : void => {
    videoPlayer.setCaptionViewHandle(captionsHandle);
}

// React NativeのKeplerCaptionsViewコンポーネントをレンダーツリーに追加します。
<View style={{ backgroundColor: "white", alignItems: "stretch",
    width: deviceWidth, height: deviceHeight}}>
        <KeplerCaptionsView
            onCaptionViewCreated={onCaptionViewCreated}
            style={{ width: '100%',
            height: '100%',
            top: 0,
            left: 0,
            position: 'absolute',
            backgroundColor: 'transparent',
            flexDirection: 'column',
            alignItems: 'center',zIndex: 2}}
        />
</View>

HTMLMediaElement

KeplerScriptアプリで再生を制御するために使用する、メインのプレーヤーインターフェイスです。このインターフェイスは、React NativeのVideoおよびAudioコンポーネントと、TypeScriptのVideoPlayerおよびAudioPlayerコンポーネントに実装されています。

詳細については、https://html.spec.whatwg.org/multipage/media.html（英語のみ）を参照してください。

以下で説明するように、アプリはコンテンツのタイプ（アダプティブまたは非アダプティブ）に応じて2つのモードで再生を開始できます。

  • URLモードによる非アダプティブストリーミング形式（MP4、MP3、MKVメディアファイルなど）の再生。AudioコンポーネントとVideoコンポーネントは、「src」属性により、MP4、MP3、MKVなどの非アダプティブストリーミング形式の再生をサポートします。

      - メディアURLをsrc属性に設定します。

      アプリで「src」属性にコンテンツのURLを設定します。

      `video.src = [some url] or audio.src = [some url]`

  • Media Source Extension（MSEモード）によるアダプティブストリーミング形式（HLS、MPEG DASHなど）の再生。HLSやMPEG DASHなどのアダプティブストリーミング形式は、Media Source Extension（MSE）APIによってサポートされます。このAPIを使用すると、アプリでHLSやDASHなどのアダプティブストリーミングコンテンツのメディアセグメントをプレーヤーに挿入できます。アプリは、マニフェストをダウンロードして解析し、コンテンツがサポートするさまざまなビットレート品質レベルとバリエーションを把握します。次に、利用可能なネットワーク帯域幅に基づいていずれかの品質レベルのメディアセグメントをダウンロードし、MediaSourceとSourceBufferのメソッドを通じてプレーヤーに渡します。

     これらのAPIの使用方法の詳細については、[https://www.w3.org/TR/media-source-2/](https://www.w3.org/TR/media-source-2/)を参照してください。

 - MediaSourceオブジェクトを作成します。<br>
     `let mediaSource = new MediaSource();`

 - MediaSourceのBlob URLを作成します。<br>
     `let url = URL.createObjectURL(mediaSource)`

 - MediaSourceをビデオまたはオーディオコンポーネントに関連付けます。<br>
     `video.src = url` or `audio.src = url`

 - MIMEタイプに基づいて`SourceBuffer`を追加します。<br>
     `let sourceBuffer = mediaSource.addSourceBuffer(mimeType)`

 -5 メディアセグメントをダウンロードしてSourceBufferに追加します。<br>

     ```javascript
     // fetch APIを使用してメディアセグメントをArrayBufferにダウンロードします。
     let response = await fetch(uri);
     let arrayBuffer = await response.arrayBuffer();

     // ダウンロードしたメディアセグメントバッファーをSourceBufferに渡します。
     sourceBuffer.appendBuffer(arrayBuffer);
     ```

一般的なメディア操作

HTMLMediaElementのメソッドを通じてメディア再生やその他の一般的な操作を制御するには、以下に示すように、React NativeのAudioコンポーネントまたはVideoコンポーネントの参照を使用します。

再生の開始

video.play()またはaudio.play()

再生の一時停止

video.pause()またはaudio.pause()

現在の再生時間の取得

現在の再生位置を取得するには、currentTime属性を読み取ります。

console.log('${video.currentTime}');またはconsole.log('${audio.currentTime}');

目的の位置へのシーク

目的の位置にシークするには、currentTime属性を設定します。

video.currentTime = seekPosition;またはaudio.currentTime = seekPosition;

イベントの処理

Kepler W3C Media APIでは、W3Cのメディア仕様に記載されているすべてのイベントがサポートされています。VideoまたはAudioにイベントハンドラーを登録するには、以下の2つの方法があります。

  • React NativeのAudio/Videoコンポーネントのプロパティを使用します。サポートされているプロパティの一覧については、MediaPropsを参照してください。たとえば、endedのイベントハンドラーは次のように登録できます。

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

      <Video>
  onended = {onEnded}
  />

  1. EventTarget addEventListener()メソッドを使用します。

    VideoコンポーネントとAudioコンポーネントには、EventTargetインターフェイスの2つのメソッド、addEventListenerとremoveEventListenerが実装されています。

    アプリでは、これらのメソッドを使用して、React NativeのAudio/Videoコンポーネントの参照にイベントハンドラーを登録できます。たとえば、次のようにイベントハンドラーを登録できます。

    video.addEventListener("ended", onEnded);

React NativeのAudioコンポーネントとVideoコンポーネントのほかに、非React Nativeコンポーネントにも、AudioTrackList、VideoTrackList、MediaSource、SourceBuffer、SourceBufferListなど、イベントを生成し、EventTargetのaddEventListenerメソッドを通じて処理できるものがあります。これらのメソッドはすべて、addEventListenerをサポートしています。

注： これらのメソッドのEventHandler属性はサポートされません。

次の例は、VideoTrackListのaddtrackイベントを処理する方法を示しています。

video.videoTracks.addEventListener("addtrack", onVideoTrackAdded);

また、MediaSourceのsourceopenイベントを処理するには、次のようにします。

mediasource.addEventListener("sourceopen", onMediaSourceOpen)

Encrypted Media Extensionは、MSEモードでのみDRMで保護された再生をサポートします。詳細については、https://w3c.github.io/encrypted-media/（英語のみ）を参照してください。

サポート対象外のHTMLMediaElementの機能

  • networkState
  • load
  • canPlayType - すべてのタイプをサポートしていることを示します。
  • fastSeek - currentTimeの設定によるシークと同じ動作をします。
  • getStartDate
  • addTextTrack
  • preload
  • defaultPlaybackRate、playbackRate
  • preservesPitch
  • loop
  • ボリューム、ミュート

サポート対象外のMedia Source Extension（MSE）の機能

MediaSource API（https://www.w3.org/TR/media-source-2/#mediasource（英語のみ））

  • EventHandler属性はサポートされません。アプリでは、MediaSourceに実装されているEventTargetインターフェイスのaddEventListenerメソッドを使用してイベントハンドラーを登録できます。

      EventHandler onsourceopen;
  EventHandler onsourceended;
  EventHandler onsourceclose;

  • audioTracks、videoTracks、textTracks

SourceBuffer API（https://www.w3.org/TR/media-source-2/#sourcebuffer（英語のみ））

  • changeType

  • EventHandler - 以下の属性はサポートされません。現在、アプリでは、SourceBufferに実装されているEventTargetインターフェイスのaddEventListenerメソッドを使用してイベントハンドラーを登録できます。

    double              appendWindowStart;
unrestricted double appendWindowEnd;
EventHandler        onupdatestart;
EventHandler        onupdate;
EventHandler        onupdateend;
EventHandler        onerror;
EventHandler        onabort;

SourceBufferList API（https://www.w3.org/TR/media-source-2/#sourcebufferlist（英語のみ））

  • 以下のEventHandler属性はサポートされません。現在、アプリでは、SourceBufferListに実装されているEventTargetインターフェイスのaddEventListenerメソッドを使用できます。

    EventHandler  onaddsourcebuffer;
EventHandler  onremovesourcebuffer;

モジュール

Last updated: 2025年10月2日

フォローする

サポート対象デバイス

amazon_developer_logo

© 2010-2025, Amazon.com, Inc. or its affiliates. All Rights Reserved. 無断複写·転載を禁じます。

利用規約

Amazon開発者ブログ

お問い合わせ