Media Player Setup

The following sections outline the core project settings and updates needed to incorporate the W3C Media Player into a React Native for Vega app. To get started, you must create a Vega app. For detailed instructions on creating a Vega app, see Build Your App.

Add dependencies

Update the package.json file in your app:

1. In the dependencies section, add the following entry:

  "@amazon-devices/react-native-w3cmedia": "~2.1.80"

This adds a dependency on the W3C Media APIs, which are provided through the @amazon-devices/react-native-w3cmedia package.

The ~2.1.80 version specifier allows automatic updates to patch versions (for example, 2.1.81, 2.1.82) while maintaining compatibility.

1. Open a terminal window and navigate to your app folder. Use npm to install the packages in your app.

    npm install  

Configure Babel

To make sure that your app is compatible with the W3C Media Player integration, update your babel.config.js file. Without this, your app might encounter a "ReferenceError: Property 'React' doesn't exist" exception at runtime.

Update the babel.config.js file with the following changes.

module.exports = {
    presets: [ ['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }] ],
    plugins: [
      [
        '@babel/plugin-transform-react-jsx',
        {
          runtime: 'automatic',
        },
      ],
    ]
  };

Add permissions

You must add the necessary permissions to the manifest.toml file for your app. This makes sure that the app has the required permissions to use the W3C Media Player functionality:

• Media metrics service: Enables playback analytics and monitoring
• Media server: Provides core media playback capabilities
• Player session service: Manages media playback sessions
• Accessibility privilege: Required for closed captions and subtitles
• Audio services: Handle audio streaming, control, and system sounds

In the manifest.toml file, add the following under the [wants] section.

[wants]
[[wants.service]]
id = "com.amazon.mediametrics.service" # Required for playback analytics and monitoring,

[[wants.privilege]]
id = "com.amazon.devconf.privilege.accessibility" # Required for captions.

[[wants.service]]
id = "com.amazon.mediabuffer.service" # Required for media buffer management. 

[[wants.service]]
id = "com.amazon.mediatransform.service" # Required for media decode/encode 

[[wants.service]]
id = "com.amazon.audio.stream" # Required for audio streaming.

[[wants.service]]
id = "com.amazon.audio.control" # Required for audio control.

# legacy permissions.
[[wants.service]]
id = "com.amazon.media.server" # Required for core media decode/encode. Superseded by com.amazon.mediatransform.service. 

[[wants.service]]
id = "com.amazon.media.playersession.service" # Required for managing media controls. Superseded by KMC.

These wants grant the app the permissions required for the media playback. For additional information about the manifest file, see Vega App Manifest File Overview.

Next steps

After you understand your specific use case requirements, see Selecting Playback Mode.

Related topics

• W3C Media integration with Vega Media Controls
• Implement Headless JavaScript Playback
• Media Player API

Last updated: Mar 20, 2026