@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”（ReferenceError：属性“React”不存在）的异常。
   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.*"
   

​

用法

​

Video React Native组件

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;
// 等待来自mediasource的打开状态更改
.
.
// 创建源缓冲区
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);
}

// 将KeplerVideoSurfaceView React Native组件添加到渲染树中。
<View style={{ backgroundColor: "white", alignItems: "stretch",
    width: deviceWidth, height: deviceHeight}}>
        <KeplerVideoSurfaceView  style={{zIndex: 0}}
            onSurfaceViewCreated={onSurfaceViewCreated}
            onSurfaceViewDestroyed={onSurfaceViewDestroyed}
        />
</View>

​

Audio React Native组件

<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;
// 等待来自mediasource的打开状态更改
.
.
// 创建源缓冲区
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;
// 等待来自mediasource的打开状态更改
.
.
// 创建源缓冲区
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);
}

// 将KeplerVideoSurfaceView React Native组件添加到渲染树中。
<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);
}

// 将KeplerCaptionsView React Native组件添加到渲染树中。
<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。 应用将内容URL设置为“src”属性。 video.src = [some url] or audio.src = [some url]
• 媒体源扩展 (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或audio.src = url
  • 按mime类型添加SourceBuffer。
    let sourceBuffer = mediaSource.addSourceBuffer(mimeType)
  -5下载媒体片段并将其附加到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连接到video或audio组件。<br>
       `video.src = url`或`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接口的两种方法：addEventListener和removeEventListener。 应用可以使用这些方法在React Native的Audio/Video组件的引用上注册事件处理程序。例如，您可以按以下示例所示注册事件处理程序。 video.addEventListener("ended", onEnded);

​

HTMLMediaElement中不支持的功能

• networkState
• 加载
• canPlayType - 指明支持的任何类型。
• fastSeek - 执行与设置currentTime相同的搜索。
• getStartDate
• addTextTrack
• 预加载
• defaultPlaybackRate、playbackRate
• preservesPitch
• 循环
• 音量、静音

​

媒体源扩展 (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—Video是一个React Native组件，可实现HTMLVideoElement接口
• 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有三种类型：
• MediaKeySessionType—指定媒体密钥会话的类型。
• MediaKeysRequirement—必需：
• MediaPlayerDeInitStatus—此文件是从ATVKeplerNFPBindingsInterface vmpf-dev分支复制的
• Robustness—安全：使用安全的视频缓冲区
• TextTrackKind—表示文本轨道的类型。
• TextTrackMode—表示文本轨道的显示模式。
• TransferFunction—VideoConfiguration可能包含以下类型之一：

​

函数

• decodingInfo
• KeplerVideoView—这是一个React Native组件，会按照指定的方式渲染以下内容
• QuotaExceededError
• requestMediaKeysSystemAccess—待办事项：在未来版本中（在MR32之后）中弃用“requestMediaKeysSystemAccess”。
• requestMediaKeySystemAccess—https://www.w3.org/TR/encrypted-media/#dom-navigator-requestmediakeysystemaccess