Vega网页应用概述

"dependencies": {
  "@amazon-devices/webview": "^4.0.2"
}

npm install @amazon-devices/webview@^4.0.2

[wants]

# 如果网页应用需要键盘支持
[[wants.service]]
id = "com.amazon.inputmethod.service"

# 如果网页应用需要视频播放
[[wants.service]]
id = "com.amazon.media.server"

# 从视频播放中发出指标的必需项
[[wants.service]]
id = "com.amazon.mediametrics.service"

# 在稳定API上播放视频的必需项
[[wants.service]]
id = "com.amazon.mediabuffer.service"
[[wants.service]]
id = "com.amazon.mediatransform.service"

# 如果网页应用需要音频播放
[[wants.service]]
id = "com.amazon.audio.stream"

# 音频管理功能在WebView中正常工作的必需项，例如音频焦点、音量控制等功能
[[wants.service]]
id = "com.amazon.audio.control"

# 要实现应用对无障碍功能支持，建议使用服务注册器添加UCC服务
[[wants.service]]
id = "com.amazon.kepler.ucc.publisher"

# 取消注释以下部分以启用加密媒体播放（DRM内容）
# [[wants.service]]
# id = "com.amazon.drm.key"
# [[wants.service]]
# id = "com.amazon.drm.crypto"
# [[needs.privilege]]
# id = "com.amazon.privilege.security.file-sharing"

# 启用Group-IPC以访问媒体服务
[[wants.service]]
id = "com.amazon.gipc.uuid.*"
[offers]
[[offers.service]]
id = "com.amazon.gipc.uuid.*" 

# 您可以根据需要添加其他服务

 
import { WebView } from "@amazon-devices/webview";
import * as React from "react";
import { useRef } from "react";
import { View, StyleSheet } from "react-native";

export const App = () => {
  const webRef = useRef(null);
  return (
    <View style={styles.container}>
      <WebView
        // 标题：{}，
        ref={webRef}
        hasTVPreferredFocus={true}
        source={{
          // 替换为您的URL。
          uri: "https://www.example.com",
          // 或者引用位于<根目录>/assets/index.html的文件
          // uri："file:///pkg/assets/index.html"
        }}
        javaScriptEnabled={true}
        onLoadStart={(event) => {
          console.log("onLoadStart url: ", event.nativeEvent.url)
        }}
        onLoad={(event) => {
          console.log("onLoad url: ", event.nativeEvent.url)
        }}
        onError={(event) => {
          console.log("onError url: ", event.nativeEvent.url)
        }}
      />
    </View>
  );
};

// 布局样式，是正确焦点行为的必需项
const styles = StyleSheet.create({
  container: { flex: 1 }
});

const system = 'com.widevine.alpha';
const config = [
  {
    audioCapabilities: [
      {
        contentType: 'audio/mp4;codecs="mp4a.40.2"',
        encryptionScheme: 'cenc',
        robustness: 'SW_SECURE_CRYPTO'
      }
    ],
    videoCapabilities: [
      {
        contentType: 'video/mp4;codecs="avc1.42E01E"',
        encryptionScheme: 'cenc',
        robustness: 'HW_SECURE_ALL'
      }
    ]
  }
];

navigator.requestMediaKeySystemAccess(system, config)
  .then(() => console.log('支持DRM'))
  .catch(() => console.log('不支持DRM'));