Vegaウェブアプリの概要

npm install @amazon-devices/webview@~3.3.0

[wants]

# Webアプリにキーボードサポートが必要な場合
[[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
        // headers: {},
        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はサポートされていません'));