How to render WebView UI controls on top of KeplerVideoSurfaceView on Vega OS?

Vega Open Beta Q&A
, ,
1

Hi,

I’m building a Vega OS app (React Native with Kepler platform) that uses a WebView loading a remote web app URL alongside a native DASH player using @amazon-devices/react-native-w3cmedia.

Architecture:
WebView loads a remote web app that provides the UI (transport controls, menus, etc.)
Native side handles DASH video playback using VideoPlayer + KeplerVideoSurfaceView + Dash.js
Communication between WebView and React Native is via postMessage / injectJavaScript

Problem:

When video is playing, the WebView UI controls are not visible on top of the video. The KeplerVideoSurfaceView hardware surface always renders above the WebView regardless of React Native zIndex or elevation values.

What I’ve tried (all failed):
Setting zIndex on WebView (makes WebView visible but video disappears)
Setting zIndex/elevation on NativePlayer container
Setting WebView backgroundColor to ‘transparent’

Questions:

Is there a API available on Vega OS that allows a WebView to overlay a video surface?

Is there a supported way to make a WebView transparent so the native video surface shows through, while the WebView HTML content (controls) renders on top?

Environment:

Platform: Vega SDK version (0.23)

@amazon-devices/react-native-kepler: ^2.0.0

@amazon-devices/react-native-w3cmedia: ^2.2.21
@amazon-devices/webview: ^3.3.x

4

Hi @Hari_Krishnan,

Thank you for the detailed description of your setup.

Based on the current Vega documentation, here’s what we can confirm:

  1. KeplerVideoSurfaceView is a dedicated video rendering surface - it renders video frames on the screen and is separate from the React Native component tree. Apps receive a surface handle via the onSurfaceViewCreated callback and pass it to the VideoPlayer instance.
  2. Apps are expected to build their own media controls UI - the official VideoPlayer API states: “It doesn’t render video to the screen by default, nor does it render the media controls GUI. Apps are expected to build their own media controls UI and control the playback experience.”
  3. React Native’s zIndex and elevation properties control ordering within the RN view hierarchy but do not affect the hardware video surface layer, which is why the approaches you tried did not work.

We are looking into this further and will get back to you with more specific guidance on supported overlay patterns for rendering UI controls on top of the video surface.

Thanks for helping us improve the Vega platform.

Warm regards,
Aishwarya