Media Player Set up

This topic outlines 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 (e.g., 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 has compatibility 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 your app's manifest.toml file. This will 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 metrics service

[[wants.service]]
id = "com.amazon.media.server"

[[wants.service]]
id = "com.amazon.gipc.uuid.*"

[[wants.service]]
id = "com.amazon.media.playersession.service"

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

[[wants.service]]
id = "com.amazon.mediabuffer.service"

[[wants.service]]
id = "com.amazon.mediatransform.service"

[[wants.service]]
id = "com.amazon.audio.stream"

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

[offers]
[[offers.service]]
id = "com.amazon.gipc.uuid.*"

This grants the app the permissions required for the media playback.

To enable the playback of system sounds (such as those used by systemd), you'll need to add the following audio management service name to your app's manifest.toml file.

[[wants.service]]
id = "com.amazon.audio.system"

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: Jan 13, 2026