Overview of Vega Web Apps

​

Layers of the WebView stack

1. WebView core components: The following set of core components offers a range of APIs that parse and render web content within a WebView window.
2. Media stack: The OS API that provides access to hardware acceleration. It can also include the software audio and video decoder supported by the System-on-a-Chip (SoC) and Board Support Package (BSP) of the platform to decode a frame.
3. DRM: The API that handles the digital rights management (DRM) license and keys. This API works with a decoder component to decrypt the frames in the ARM Trust Zone, or Trusted Execution Environment (TEE).
4. Graphics: The API that provides the surface and subsurface for web content and media rendering.
5. Keyboard: The service that provides an on-screen keyboard for WebView.
6. App framework: The framework that provides a life-cycle manager, package manager, event manager, and more.
7. Chromium: The Chromium web engine, optimized for Vega. The engine is responsible for parsing and rendering web pages, including HTML, CSS, and JavaScript.
8. UI Framework: A cross-platform toolkit that supports a reactive programming, which is a declarative programming style, similar to React. The framework enables component developers to interact with operating system (OS) level API surfaces by exposing cross-platform API abstractions.
9. Native Vega WebView Component: A component written in C++ that enables WebView for the developer.
10. React Native WebView API: The software interface between Amazon and your React Native for Vega app.
11. React Native for Vega App: An app created by the developer.

​

Quick setup of your web app

​

Step 1: Add an app template

npm install @amazon-devices/webview@~3.5.0

​

Step 2: Add the required services to your manifest.toml file

[wants]

# If Web App needs keyboard support
[[wants.service]]
id = "com.amazon.inputmethod.service"

# If Web App needs video playback
[[wants.service]]
id = "com.amazon.media.server"

# Required for emitting metrics from video playback
[[wants.service]]
id = "com.amazon.mediametrics.service"

# Required for video playback on stable APIs
[[wants.service]]
id = "com.amazon.mediabuffer.service"
[[wants.service]]
id = "com.amazon.mediatransform.service"

# If Web App needs audio playback
[[wants.service]]
id = "com.amazon.audio.stream"

# Required for audio management features to work in WebView, features like audio focus, volume control
[[wants.service]]
id = "com.amazon.audio.control"

# To enable accessibility support for your app, we recommend you add the UCC service with the Service Registrar
[[wants.service]]
id = "com.amazon.kepler.ucc.publisher"

# Uncomment below section to enable encrypted media playback (DRM content)
# [[wants.service]]
# id = "com.amazon.drm.key"
# [[wants.service]]
# id = "com.amazon.drm.crypto"
# [[needs.privilege]]
# id = "com.amazon.privilege.security.file-sharing"

# Enable Group-IPC to access media services
[[wants.service]]
id = "com.amazon.gipc.uuid.*"
[offers]
[[offers.service]]
id = "com.amazon.gipc.uuid.*"

# You may add other services as needed

​

Step 3: Import and use the WebView component in your App.tsx file

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={{
          // Replace with your URL.
          uri: "https://www.example.com",
          // or to reference a file located at <root>/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>
  );
};

// Styles for layout, which are necessary for proper focus behavior
const styles = StyleSheet.create({
  container: { flex: 1 }
});

​

WebView props

​

Supported media formats

​

Supported audio formats

• FLAC
• MP3
• Opus
• Vorbis
• AAC
• PCM 8-bit unsigned integer
• PCM 16-bit signed integer little endian
• PCM 24-bit signed integer little endian
• PCM 32-bit float little endian
• PCM 16-bit signed integer big endian
• PCM 24-bit signed integer big endian
• PCM μ-law
• PCM A-law
• AAC-LC
• AAC-SBR
• AAC-PS
• AAC Scalable (MPEG-2)

​

Supported video software formats

• Theora
• MPEG4 Part 2

​

Supported video hardware formats

• VP8
• VP9
• H.264
• H.265

​

Support for Digital Rights Management (DRM)

​

Checking if a device supports DRM content

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 supported'))
  .catch(() => console.log('DRM not supported'));

​

Usage notes

• The robustness field in the config determines the level of DRM being queried. Use HW_SECURE_ALL for hardware-backed DRM and SW_SECURE_CRYPTO for software DRM. Audio is not supported through hardware, so use SW_SECURE_CRYPTO for audio content.
• If the device does not support the requested DRM configuration, the promise will reject.
• Check for both hardware and software DRM levels and gracefully fall back based on availability.

​

Unsupported features and known limitations

​

Unsupported features

• Geolocation
• File uploads or downloads
• Multiline text boxes
• Launching to external browser
• .mov files
• Advertising ID
• WebGPU

​

Known limitations

• Popups are limited - only popups that use Javascript alert(), or <select> dropdown elements. General popups like window.open() is not supported.

​

Related topics

• Developer Guide for Web Apps
• Performance Best Practices for Web Apps
• Vega WebView Component Reference