@amazon-devices/react-native-w3cmedia

​

開始の手順

​

セットアップ

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

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

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コンポーネント

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

​

VideoPlayerコンポーネント

• KeplerVideoSurfaceView React Nativeコンポーネントをレンダーツリーに追加する
• 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
  ref={ref => {
    audio = ref; // このコンポーネントの参照を保存
  }}
/>

​

AudioPlayerコンポーネント

// オーディオプレーヤーのインスタンスを作成します
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

// ビデオプレーヤーのインスタンスを作成します
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

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

• URLモードによる非アダプティブストリーミング形式（MP4、MP3、MKVメディアファイルなど）の再生。AudioコンポーネントとVideoコンポーネントは、「src」属性により、MP4、MP3、MKVなどの非アダプティブストリーミング形式の再生をサポートします。
  • src属性にメディアURLを設定します。 アプリで「src」属性にコンテンツのURLを設定します。 `video.src = [some url] or audio.src = [some url]`
• Media Source Extension（MSE）モードによるアダプティブストリーミング形式（HLS、MPEG DASHなど）の再生。MSE APIは、HLSやMPEG DASHなどのアダプティブストリーミング形式をサポートしています。このAPIを使用すると、アプリでHLSやDASHなどのアダプティブストリーミングコンテンツのメディアセグメントをプレーヤーに挿入できます。アプリは、マニフェストをダウンロードして解析し、コンテンツがサポートするさまざまなビットレート品質レベルとバリエーションを判断します。アプリは、利用可能なネットワーク帯域幅に基づいて、適切な品質レベルのメディアセグメントをダウンロードします。続けて、MediaSourceメソッドとSourceBufferメソッドを介してプレーヤーにそのメディアセグメントを渡します。 これらのAPIの使用方法の詳細については、https://www.w3.org/TR/media-source-2/（英語のみ）を参照してください。
  • MediaSourceオブジェクトを作成します。
    let mediaSource = new MediaSource();
  • MediaSourceのBlob URLを作成します。
    let url = URL.createObjectURL(mediaSource)
  • MediaSourceをビデオコンポーネントまたはオーディオコンポーネントに関連付けます。
    video.src = url or audio.src = url
  • MIMEタイプに基づいてSourceBufferを追加します。
    let sourceBuffer = mediaSource.addSourceBuffer(mimeType)
  メディアセグメントをダウンロードして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);
       ```
  

​

一般的なメディア操作

​

再生の開始

​

再生の一時停止

​

現在の再生時間の取得

​

目的の位置へのシーク

​

イベントの処理

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

2. EventTarget addEventListener()メソッドを使用します。 VideoコンポーネントとAudioコンポーネントには、EventTargetインターフェイスの2つのメソッド、addEventListenerとremoveEventListenerが実装されています。 アプリでは、これらのメソッドを使用して、React NativeのAudio/Videoコンポーネントの参照にイベントハンドラーを登録できます。たとえば、次のようにイベントハンドラーを登録できます。 video.addEventListener("ended", onEnded);

​

サポート対象外の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;
  

​

関連トピック

• メディアプレーヤーのセットアップ
• 再生モードの選択

​

APIリファレンス

​

クラス

• Audio - HTMLAudioElementインターフェイスを実装するReact Nativeコンポーネントです。
• AudioPlayer - *
• Event
• HTMLAudioElement
• HTMLMediaElement - https://html.spec.whatwg.org/multipage/media.html#htmlmediaelement（英語のみ）
• HTMLVideoElement
• InvalidStateError
• KeplerCaptionsView - クローズドキャプションや字幕をレンダリングするReact Nativeコンポーネントです。
• KeplerMediaControlHandler
• KeplerShareableSurfaceView - これは、画面上にビデオフレームをレンダリングするReact Nativeコンポーネントです。
• KeplerVideoSurfaceView - これは、画面上にビデオフレームをレンダリングするReact Nativeコンポーネントです。
• Media - https://html.spec.whatwg.org/multipage/media.html#htmlmediaelement（英語のみ）
• MediaError - すべてのメディア要素にはエラーステータスが関連付けられています。
• MediaSource - MediaSourceインターフェイスを実装します。EventEmitterを使用してイベントを発行します。
• NotSupportedError
• SourceBufferImpl - このクラスはSourceBufferインターフェイスを実装しています。
• TextDecoder
• TextTrackImpl - それぞれ別の実装が必要です。
• TrackEvent - https://html.spec.whatwg.org/multipage/media.html#trackevent（英語のみ）
• Video - HTMLVideoElementインターフェイスを実装するReact Nativeコンポーネントです。
• VideoPlayer - *
• VTTCue - https://www.w3.org/TR/webvtt1/#the-vttcue-interface（英語のみ）
• W3CLibPolyfill
• WebCrypto

​

インターフェイス

• AudioConfiguration - https://w3c.github.io/media-capabilities/#dictdef-audioconfiguration（英語のみ）
• AudioTrack - オーディオトラックオブジェクトを表します。
• AudioTrackList - 追加情報については、以下を参照してください。
• CDMiInterface
• EventListener
• EventTarget - https://dom.spec.whatwg.org/#interface-eventtarget（英語のみ）
• KeySystemTrackConfiguration - https://www.w3.org/TR/media-capabilities/#keysystemtrackconfiguration（英語のみ）
• MediaCapabilities - https://w3c.github.io/media-capabilities/#media-capabilities-interface（英語のみ）
• MediaCapabilitiesDecodingInfo - https://w3c.github.io/media-capabilities/#dictdef-mediacapabilitiesdecodinginfo（英語のみ）
• MediaCapabilitiesInfo - https://w3c.github.io/media-capabilities/#dictdef-mediacapabilitiesinfo（英語のみ）
• MediaCapabilitiesKeySystemConfiguration - https://w3c.github.io/media-capabilities/#mediacapabilitieskeysystemconfiguration（英語のみ）
• MediaConfiguration - https://w3c.github.io/media-capabilities/#dictdef-mediaconfiguration（英語のみ）
• MediaDecodingConfiguration - デコード機能への入力は、MediaDecodingConfigurationディクショナリで表されます。
• MediaKeys - MediaKeysオブジェクトは、関連付けられたキーのセットを表します。
• MediaKeySession - これはメディアキーセッションを表します。
• MediaKeysSystemAccess - MediaKeySystemAccessオブジェクトはキーシステムへのアクセスを提供します。
• MediaKeySystemConfiguration - https://www.w3.org/TR/encrypted-media/#mediakeysystemconfiguration-dictionary（英語のみ）
• MediaKeySystemMediaCapability - MIMEタイプのキーシステムの堅牢性を指定します。
• MediaProvider
• MediaSourceHandle - TextTrackCue。
• SourceBuffer - 追加情報については、以下を参照してください。
• SourceBufferList - 追加情報については、以下を参照してください。
• TextTrack - https://html.spec.whatwg.org/multipage/media.html#texttrack（英語のみ）
• TextTrackCue - https://html.spec.whatwg.org/multipage/media.html#texttrackcue（英語のみ）
• TextTrackCueList - https://html.spec.whatwg.org/multipage/media.html#texttrackcuelist（英語のみ）
• TextTrackList - 追加情報については、以下を参照してください。
• TimeRanges - 時間の範囲（期間）のリストを表します。
• VideoConfiguration - https://w3c.github.io/media-capabilities/#dictdef-videoconfiguration（英語のみ）
• VideoTrack
• VideoTrackList - 追加情報については、以下を参照してください。
• W3CMediaTurboModuleInterface

​

列挙型

• AppendMode - 追加情報については、以下を参照してください。
• AudioContentType - オーディオコンテンツのタイプを表します。
• AudioUsageType - オーディオ使用タイプを表します。
• EndOfStreamError - 追加情報については、以下を参照してください。
• ReadyState - 追加情報については、以下を参照してください。

​

型エイリアス

• BufferSource - 詳細については、以下を参照してください。
• CanPlayTypeResult -「未定」：
• ColorGamut - VideoConfigurationには、次のいずれかのタイプを含めることができます。
• HdrMetadataType - HdrMetadataTypeが存在する場合、指定されたタイプのHDRメタデータを解釈する機能を表します。
• InitDataType - 暗号化関連の初期化データ形式を指定します。
• MediaDecodingType - MediaDecodingConfigurationには次の3つのタイプがあります。
• MediaKeySessionType - メディアキーセッションのタイプを指定します。
• MediaKeysRequirement - 必須：
• MediaPlayerDeInitStatus - このファイルはATVKeplerNFPBindingsInterface vmpf-devブランチからコピーされます。
• Robustness - SECURE：セキュアなビデオバッファーを使用します。
• TextTrackKind - テキストトラックのタイプを表します。
• TextTrackMode - テキストトラックの表示モードを表します。
• TransferFunction - VideoConfigurationには、次のいずれかのタイプを含めることができます。

​

関数

• decodingInfo
• KeplerVideoView - これは以下の要素をレンダリングするReact Nativeコンポーネントです。
• QuotaExceededError
• requestMediaKeysSystemAccess - TODO：将来のリリース（MR32以降）では’requestMediaKeysSystemAccess’を廃止します。
• requestMediaKeySystemAccess - https://www.w3.org/TR/encrypted-media/#dom-navigator-requestmediakeysystemaccess（英語のみ）