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:

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.

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.

Develop Vega Apps

Prerequisites for adding media playback capability

Add Dependencies

Configure Babel

Add Permissions

Next Steps

​Add Dependencies

​Configure Babel

​Add Permissions

​Next Steps

​Related topics

Add Dependencies

Configure Babel

Add Permissions

Next Steps

Related topics