使用WebView构建网页应用

​

将初始焦点设置到WebView

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

export const App = () => {
const webRef = useRef(null);
return (
  <View >
      <WebView
      ref={webRef}
      hasTVPreferredFocus={true}
      source={{
        uri: "https://www.example.com",
      }}
      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>
  );
};

​

在WebView页面发送和接收消息

• 适用于Vega的React Native -> Web： injectJavaScript方法。
• 网页 -> 适用于Vega的React Native： onMessage属性。

​

通过网页实现Vega设备的Fire TV功能

​

在适用于Vega的WebView中检查HDR格式和编解码器支持

​

在网页JavaScript中启用后退按钮遥控器按键事件

• 在src/App.tsx文件中，将allowSystemKeyEvents属性设置为true。

​

启用并使用DevTools进行调试

• 在命令提示符处，运行以下命令。
  vega build -b Debug
  

1. 安装并启动调试应用，这样将打开WebView。
2. 在命令提示符下，通过运行以下命令执行端口转发。
   vda forward tcp:9229 tcp:9229.
   DevTools在端口9229上运行。
   
3. 打开Google Chrome并导航到chrome://inspect/#devices。
4. 在Remote Target（远程目标）部分已连接设备列表中，找到DevTools。
5. 选择inspect（检查）打开DevTools，然后检查WebView。

​

支持的遥控器按键事件

​

使用canPlayType() 检查HDR的示例

>const video = document.querySelector('video');
>console.log(video.canPlayType('video/webm; codecs="vp09.02.10.10'));
probably

>console.log(video.canPlayType('video/mp4; codecs="hev1.2.4.L153.B0"'));
probably

​

使用isTypeSupported() 检查HDR的示例

>MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10"');
true

>MediaSource.isTypeSupported('video/mp4; codecs="hev1.2.4.L153.B0"');
true

​

使用HEVC的示例

const hevcConfig = {
    type: 'media-source',
    video: {
        contentType: 'video/mp4; codecs="hvc1.2.4.L153.B0"',
        width: 3840,
        height: 2140,
        framerate: 60,
        bitrate: 20000000,
        transferFunction: 'pq',
        colorGamut: 'rec2020'
    }
};

navigator.mediaCapabilities.decodingInfo(hevcConfig)

​

如何覆盖默认媒体控制处理程序

• 在广告期间禁用搜索操作。
• 在实时播放期间禁用所有媒体控制。

• 使用navigator.mediaSession的基于网页的实现。采用这种实现时，启用allowsDefaultMediaControl，原因如下。
  • 它支持对播放、暂停、向前跳过和向后跳过的传输控制。
  • 它直接在网页中实现，无需更改应用代码。
• 在应用代码中直接与VegaMediaControl接口集成。采用这种集成时，禁用allowsDefaultMediaControl，原因如下。
  • 它提供了对设备媒体控制功能的完全访问权限。
  • 建议将它用于需要深度系统集成的应用。

​

使用navigator.mediaSession的基于网页的实现

​

使用navigator.mediaSession的示例

// 网页JavaScript代码（将包含在网页中）
// 获取对视频元素的引用
const video = document.querySelector('video');
if ('mediaSession' in navigator) {
    // 覆盖播放操作
    navigator.mediaSession.setActionHandler('play', () => {
        // 此处为自定义播放逻辑
        video.play();
    });
    // 覆盖暂停操作
    navigator.mediaSession.setActionHandler('pause', () => {
        // 此处为自定义暂停逻辑
        video.pause();
    });
    // 覆盖搜索操作
    navigator.mediaSession.setActionHandler('seekbackward', (details) => {
        // 此处为自定义搜索逻辑
        const skipTime = details.seekOffset || 10;
        video.currentTime = Math.max(video.currentTime - skipTime, 0);
    });
    navigator.mediaSession.setActionHandler('seekforward', (details) => {
        // 此处为自定义搜索逻辑
        const skipTime = details.seekOffset || 10;
        video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
    });
}

// React Native应用代码（将在您的应用中实现）
return (
    <View style={styles.sectionContainer}>
      <WebView
        ref={webRef}
        hasTVPreferredFocus={true}
        allowsDefaultMediaControl={true}  // navigator.mediaSession正常工作所必需
        source={{
          uri: "https://example.com",  // 替换为您的URL
        }}
        javaScriptEnabled={true}
      />
    </View>
);

​

在应用中集成VegaMediaControl接口

1. 配置WebView属性。
   • 默认情况下，WebView中的默认媒体控制处于禁用状态。要让控制保持禁用状态，要么让属性保持未设置状态，要么明确地将allowsDefaultMediaControl设置为false。要使用VegaMediaControl集成，请让媒体控制保持禁用状态。
2. 实现VegaMediaControl接口。
   • 将VegaMediaControl集成添加到您的应用
3. JavaScript桥通信
   • 使用injectJavaScript来根据VegaMediaControl处理程序控制网页播放器。

​

在应用代码中集成VegaMediaControl的示例

1. 在manifest.toml中添加对VegaMediaControl的支持。更新VegaMediaControl的清单以及其他条目。
   [components]
   [[components.interactive]]
   categories = ["com.amazon.category.kepler.media"]
   
   [[extras]]
   key = "interface.provider"
   component-id = "com.amazondeveloper.keplerwebapp.main"
   
   [extras.value.application]
   [[extras.value.application.interface]]
   interface_name = "com.amazon.kepler.media.IMediaPlaybackServer"
   command_options = [
       "Play",
       "Pause",
       "SkipForward",
       "SkipBackward",
   ]
   
2. 在package.json中，添加以下依赖项。
   "@amazon-devices/kepler-media-controls": "~1.0.0",
   "@amazon-devices/kepler-media-types": "~1.0.0",
   
3. 以下应用代码示例创建了VegaMediaControl服务器和关联的处理程序。这些处理程序可通过自定义行为将JavaScript注入网页。
    import { WebView } from "@amazon-devices/webview";
    import { useEffect, useRef, useMemo } from "react";
    import { StyleSheet, View } from "react-native";
    import {
      Action,
      IMediaControlHandlerAsync,
      IMediaMetadata,
      IMediaSessionId,
      ITimeValue,
      ITrack,
      MediaControlServerComponentAsync,
      MediaSessionState,
      RepeatMode,
    } from "@amazon-devices/kepler-media-controls";
    import { IComponentInstance, useComponentInstance } from "@amazon-devices/react-native-kepler";
       
    export const App = () => {
      const webRef = useRef(null);
      const componentInstance: IComponentInstance = useComponentInstance();
       
      const mediaControlsHandler: IMediaControlHandlerAsync = useMemo(
        (): IMediaControlHandlerAsync => ({
          handlePlay: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("媒体控制", ["handlePlay"]);
            // 根据网页实现更新JS脚本。
            webRef.current?.injectJavaScript("document.querySelector('video')?.play();");
            return Promise.resolve();
          },
          handlePause: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("媒体控制", ["handlePause"]);
            // 根据网页实现更新JS脚本。
            webRef.current?.injectJavaScript("document.querySelector('video')?.pause();");
            return Promise.resolve();
          },
          handleTogglePlayPause: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("媒体控制", ["handleTogglePlayPause"]);
            // 根据网页实现注入javascript
            return Promise.resolve();
          },
          handleStop: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("媒体控制", ["handleStop"]);
            // 根据网页实现注入javascript
            return Promise.resolve();
          },
          handleStartOver: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("媒体控制", ["handleStartOver"]);
            // 根据网页实现注入javascript
            return Promise.resolve();
          },
          handleFastForward: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("媒体控制", ["handleFastForward"]);
            // 根据网页实现注入javascript
            return Promise.resolve();
          },
          handleRewind: function (sessionId?: IMediaSessionId): Promise<void> {
            console.log("媒体控制", ["handleRewind"]);
            // 根据网页实现注入javascript
            return Promise.resolve();
          },
          handleGetMetadataInfo: function (id: MediaId): Promise<IMediaMetadata> {
            console.log("媒体控制", ["handleGetMetadataInfo", id]);
            return Promise.resolve({
              mediaId: id.contentId,
              title: 'Sample Title',
              date: '2024-01-01',
              artwork: [
                {
                  url: 'https://example.com/artwork1.jpg',
                  sizeTag: 'medium',
                  id: 'sample artwork id1',
                  tag: 'fantastic',
                },
                {
                  url: 'https://example.com/artwork2.jpg',
                  sizeTag: 'large',
                  id: 'sample artwork id2',
                  tag: 'wonderful',
                },
              ],
            });
          },
          handleGetSessionState: function (sessionId?: IMediaSessionId): Promise<MediaSessionState[]> {
            console.log("媒体控制", ["handleGetSessionState"]);
            // 根据网页实现注入javascript
            return Promise.resolve([]);
          },
        }),
        []
      );
       
      useEffect(() => {
        const mediaControlServer = MediaControlServerComponentAsync.getOrMakeServer();
        mediaControlServer.setHandlerForComponent(mediaControlsHandler, componentInstance);
      }, [componentInstance, mediaControlsHandler]);
       
      const styles = StyleSheet.create({
        sectionContainer: {
          flex: 1,
        },
      });
       
      return (
        <View style={styles.sectionContainer}>
          <WebView
            ref={webRef}
            hasTVPreferredFocus={true}
            source={{
              // 替换为您的URL。
              uri: "https://example.com",
            }}
            javaScriptEnabled={true}
          />
        </View>
      );
    };
   

​

将存储在设备上的本地文件URL加载到WebView中

• 在src/App.tsx中，将allowFileAccess属性设置为true。

​

示例：使用WebView从assets目录加载HTML文件

<View>
    <WebView
        source={{
            uri: "file:///pkg/assets/sample.html",
        }}
    />
</View>

​

示例：使用WebView从应用数据目录加载HTML文件

<View>
    <WebView
        source={{
            uri: "file:///data/sample.html",
        }}
        allowFileAccess={true}
    />
</View>

​

WebView中的方向键导航

​

阻止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
        style={styles.webview}
        ref={webRef}
        hasTVPreferredFocus={true}
        source={{
          uri: "https://www.example.com",
        }}
        javaScriptEnabled={true}
        onLoadStart={(event) => {
          console.log("onLoadStart", event.nativeEvent.description)
        }}
        onLoad={(event) => {
          console.log("onLoad", event.nativeEvent.description)
        }}
        onError={(event) => {
          console.log("onError", event.nativeEvent.description)
        }}
      />
    </View>
  );
};

// 布局和背景颜色的样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    backgroundColor: "#000000"
  }
});

​

如何移除视频播放屏幕顶部的远程播放图标

const obj = document.createElement("audio");
obj.disableRemotePlayback = true;

​

如何选择性地允许或阻止HTTP

​

工作方式

​

常见用例

• 允许除少数域（黑名单）之外的所有HTTP。 示例：允许对整个应用使用明文，敏感域除外。
    [network-traffic-policy.cleartext]
    allowed-domains = ["*"]  # 允许所有域
    blocked-domains = [
        "sensitive-api.com",
        "*.bank.com",
        "payment.example.com"
    ]
  
• 阻止除特定域（允许列表）之外的所有HTTP。 示例：不对整个应用启用明文，但信任特定域。
    [network-traffic-policy.cleartext]  
    allowed-domains = [  
        "debug.myapp.com",  
        "*.test.internal.com",  
        "localhost"  
    ]  
    # 省略了阻止的域名——允许列表不需要
  
• 阻止所有HTTP（无例外）。 示例：完全不允许使用明文。
    [package]
    # 省略了network-traffic-policy.cleartext
    # 这是默认的安全行为
  
• 允许所有HTTP（无限制）。 示例：允许对所有域使用明文。也许用于受控门户应用或网络诊断。
    [network-traffic-policy.cleartext]  
    allowed-domains = ["*"]  # 允许所有域
  

​

相关主题

• Vega网页应用概述
• 网页应用性能最佳实践