Console

Settings

Sign out

Notifications

Alexa

亚马逊应用商店

AWS

文档

Support

My Cases

Console

Vega开发者文档

主页

新手入门

设计和开发

应用发布

参考

支持

Vega网页应用概述

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅发布说明。

重要须知： Vega网页应用仅在M系列计算机上支持Vega虚拟设备。由于Vega软件开发工具包 (SDK) 具有更多的功能，因此可以考虑使用该SDK来开发应用。有关详细信息，请参阅SDK概述。

如果将网页WebView添加到您的React Native应用中

如果将WebView作为一个组件添加到React Native应用中，则可能需要改用Vega WebView 组件参考。以下部分重点介绍如何构建以WebView为主要接口的电视网页应用。

Vega WebView组件显示您的Vega应用中基于网页的内容，包括HTML、JavaScript和CSS。这使您可以利用应用的现有网络内容，例如静态页面（帮助页面、条款和条件等）、登录屏幕，甚至应用的整个演示层。WebView组件利用Chromium引擎，可自定义（例如自定义标头、DOM存储等），并支持通过消息传递桥在WebView源和包含的Vega应用之间进行数据通信。

确保您的网页内容针对电视设备进行了优化，其中包括remote-control/directional-pad（方向键）输入的焦点导航。单击/触摸/拖动用户体验实现通常与电视用户体验不兼容，而且电视设备消耗的电量通常低于台式机和移动设备。例如，您应该通过减少电视动画来优化您的网页内容。有关性能和流畅度的更多指导，请参阅网页应用开发最佳实践。

快速设置您的网页应用

步骤1：添加应用模板

已复制到剪贴板。

npm install @amazon-devices/webview@^3.3.0

有关更多详细信息，请参阅使用模板创建应用。

步骤2：将所需的服务添加到manifest.toml文件中

已复制到剪贴板。

[wants]

# 用于渲染网页内容的网页渲染器服务
[[wants.service]]
id = "com.amazon.webview.renderer_service"

# 如果网页应用需要键盘支持
[[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.*" 

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

步骤3：在App.tsx文件中导入并使用WebView组件

已复制到剪贴板。

 
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 }
});

WebView属性

有关WebView组件属性的完整列表，请参阅Vega WebView组件参考。

重要须知： 务必设置hasTVPreferredFocus={true}，才能在电视设备上实现正确的焦点行为。

支持的媒体格式

Vega网页应用支持以下音频和视频格式：

支持的音频格式

FLAC
MP3
Opus
Vorbis
AAC
PCM 8位无符号整数
PCM 16位有符号整数小端
PCM 24位有符号整数小端
PCM 32位浮点数小端
PCM 16位有符号整数大端
PCM 24位有符号整数大端
PCM μ-law
PCM A-law
AAC-LC
AAC-SBR
AAC-PS
AAC Scalable (MPEG-2)

支持的视频软件格式

Theora
MPEG4 Part 2

支持的视频硬件格式

VP8
VP9
H.264
H.265

注意： 数字版权管理 (DRM) 支持： WebView以硬件安全级别支持Widevine和PlayReady。

Last updated: 2025年10月13日

Vega网页应用概述

快速设置您的网页应用

步骤1： 添加应用模板

步骤2： 将所需的服务添加到manifest.toml文件中

步骤3： 在App.tsx文件中导入并使用WebView组件

WebView属性

支持的媒体格式

支持的音频格式

支持的视频软件格式

支持的视频硬件格式

相关主题

步骤1：添加应用模板

步骤2：将所需的服务添加到manifest.toml文件中

步骤3：在App.tsx文件中导入并使用WebView组件