Skip to content

Conversation

@maciekBudzinski
Copy link

Summary

This PR adds Dynamic Ad Insertion (DAI) support for both Android and iOS.

iOS Demo Android Demo
iOS Demo Android Demo

Motivation

Right now, the react-native-video only supports client-side ad insertion (CSAI) where the player requests ads separately and plays them during breaks. Adding DAI support would enable server-side ad insertion (DAI), expanding the types of ads that can be used with react-native-video.

It's also feature requested by the community: #4399

Changes

JS

  • Added TypeScript type definitions for DAI configuration, supporting both VOD (with contentSourceId and videoId) and Live (with assetKey) modes using discriminated unions for type safety
  • Updated the main Video component to accept and handle the dai prop in source configuration
  • Modified source parsing logic to allow empty URI when DAI is configured (since IMA SDK handles stream requests directly)
  • Updated native component specs to include DAI configuration in the bridge interface

iOS

  • Created data structures to parse and store DAI configuration from React Native bridge
  • Integrated DAI support into the video source pipeline and IMA ads manager
  • Implemented DAI stream handling to request and play streams via IMA SDK
  • Added support for both VOD and Live DAI streams with backup stream fallback
  • Minor code cleanup (removed unnecessary access modifiers, formatting improvements)

Android

  • Created Kotlin classes to parse DAI configuration from React Native bridge with proper null safety
  • Updated source parsing to accept DAI configuration and allow empty URIs when DAI is used
  • Implemented DAI stream request logic using ExoPlayer's IMA extension for both VOD and Live streams
  • Added support for custom ad tag parameters and automatic fallback to backup streams
  • Created stub classes for IMA DAI extension integration
  • Updated Media3 version from 1.4.1 to 1.8.0 to support DAI features

Testing App

  • Created a complete Expo example app (examples/expo-dai/) demonstrating DAI functionality
  • Built UI components for configuring and testing both VOD and Live DAI streams
  • Added real-time event logging to monitor video and ad events
  • Added comprehensive README with installation steps, usage guide, and known issues

Documentation

  • Added comprehensive dai prop documentation to the props reference page with property descriptions, examples for both VOD and Live modes, and usage notes
  • Updated the ads documentation page with a dedicated DAI section explaining server-side ad insertion, configuration options, event handling, backup stream functionality, and a comparison table between DAI and CSAI

Test plan

A complete test app is available at examples/expo-dai/ that demonstrates DAI functionality with both VOD and Live streams. The app includes a UI for configuring DAI parameters, real-time event logging, and controls for testing various playback scenarios. The README in examples/expo-dai/ is worth reading before testing as it contains important setup instructions, usage guidelines, and known issues.

Key Testing Scenarios:

  • VOD DAI streams - Verify that VOD streams with contentSourceId and videoId play correctly on both iOS and Android
  • Live DAI streams - Verify that Live streams with assetKey play correctly on both iOS and Android
  • Ad events - Confirm that ad events are properly received via onReceiveAdEvent callback
  • Backup stream fallback - Test that the player automatically falls back to backupStreamUri when DAI stream fails to load
  • Custom ad tag parameters - Verify that adTagParameters are correctly passed through to the IMA SDK
  • Error handling - Test behavior with missing required parameters (should show appropriate error messages)

Note: Picture-in-Picture testing requires a real iOS device as simulators don't reliably support PiP. Google's official sample streams may have known issues with HLS VOD streams stopping around 1:10 (documented in the example app README).

@moskalakamil
Copy link
Collaborator

hey @maciekBudzinski, thanks for the pr!

@CarlosELopez
Copy link

@moskalakamil how are you? I'd be interested to collab with you and @maciekBudzinski to see if there is anything we could do to land this. We are exploring porting it to v7 but wanted to start with v6 to see if its stable and can get adoption. Any comments welcome. We can clean the CLang Format warning, but wanted to see if there is interest or other comments first.

@moskalakamil
Copy link
Collaborator

hey @CarlosELopez, thanks for reaching out. @fnwk and I will jump in to help get this merged. We’ll take a deeper look into the DAI aspects and close out the review on our side

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: To Triage

Development

Successfully merging this pull request may close these issues.

3 participants