W3C Media integration with Vega Media Controls

Vega Media Controls (KMC) provides functionality that allows media app developers on Vega to streamline the integration of various input modalities for media control. While media apps typically feature in-app user interface controls, such as play, pause, and stop, customers often want additional interaction methods such as remote control or voice commands through services such as Alexa. Vega Media Controls functionality handles the integration of these diverse input methods, allowing developers to focus on the core business logic of smooth media playback.

Apps that use the W3C Media API to play their content can now get the KMC integration for free for basic playback controls such as pause, play, and seek. The W3C Media API internally creates the KMC server, publishes the server states, and handles basic commands of play, pause, and seek.

To opt-in to this integration:

1. Enable KMC. Add the necessary manifest entries to your manifest.toml file as described in Get started with Vega Media Controls Overview.
2. Update your package.json file to take a dependency on @amazon-devices/kepler-media-controls.

3. Get the component instance of the interactive component:

   Copy code Copied to clipboard.

    import { useComponentInstance , IComponentInstance } from '@amazon-devices/react-native-kepler';
   
    const componentInstance: IComponentInstance = useComponentInstance();
   

4. Before initializing the video player set the media control focus on the player instance.

   Copy code Copied to clipboard.

   player.setMediaControlFocus(componentInstance);

Now, this player instance will be enabled with KMC and will support basic functionality of pause/play and seek remote control and Alexa voice controls.

Override certain control commands

In some cases, the app might want to override the handling of certain control commands that is handled by W3C Media by default. For example, disable seek during live content playback. W3C media also provides a way to achieve this.

1. Extend VegaMediaControlHandler provided by W3C media and override the function that the application wants to override.

   Copy code Copied to clipboard.

    import {VegaMediaControlHandler} from "@amazon-devices/react-native-w3cmedia";
    import {IMediaSessionId } from '@amazon-devices/kepler-media-controls';
   
    class AppOverrideMediaControlHandler extends VegaMediaControlHandler {
        async handlePlay(mediaSessionId?: IMediaSessionId) {
            if(shouldOverride) {
                // do custom handling as per app's requirement
            } else {
                // call default handler
                super.handlePlay(mediaSessionId);
            }
        }
    };
   

2. Pass the app's media control handler as the second parameter to the setMediaControlFocus method.

   Copy code Copied to clipboard.

    player.setMediaControlFocus(componentInstance, new AppOverrideMediaControlHandler());
   

Related topics

• Vega Media Controls API reference

---

Last updated: Sep 30, 2025