Skip to content

Conversation

@fnwk
Copy link

@fnwk fnwk commented Jan 9, 2026

Note: This PR is based on #4765 (feat: add DAI support) by @maciekBudzinski

Summary

This PR adds Dynamic Ad Insertion (DAI) support for both Android and iOS, while also unifying the ad configuration API.

iOS Demo Android Demo
iOS Demo Android Demo

Motivation

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

This is also a feature requested by the community: #4399

Changes

Breaking Change: Unified Ad Configuration API

The ad configuration has been unified into a single source.ad property with a type discriminator:

Before (CSAI only):

<Video
  adTagUrl="https://example.com/vast"
  adLanguage="en"
/>

After (CSAI):

<Video
  source={{
    uri: 'https://example.com/video.mp4',
    ad: {
      type: 'csai',
      adTagUrl: 'https://example.com/vast',
      adLanguage: 'en'
    }
  }}
/>

After (DAI VOD):

<Video
  source={{
    ad: {
      type: 'dai',
      contentSourceId: '2548831',
      videoId: 'tears-of-steel',
      format: 'hls', // or 'dash' (Android only)
      fallbackUri: 'https://example.com/backup.m3u8'
    }
  }}
/>

After (DAI Live):

<Video
  source={{
    ad: {
      type: 'dai',
      assetKey: 'c-rArva4ShKVIAkNfy6HUQ',
      fallbackUri: 'https://example.com/backup.m3u8'
    }
  }}
/>

Note: The old adTagUrl and adLanguage props are still supported but deprecated.

JS

  • Added TypeScript type definitions for unified ad configuration using discriminated unions (AdConfigCSAI, AdConfigDAI, AdConfigDAIVod, AdConfigDAILive)
  • Updated the main Video component to normalize ad configuration and handle both CSAI and DAI through the unified source.ad prop
  • Modified source parsing logic to allow empty URI when DAI is configured (since IMA SDK handles stream requests directly)
  • Added format property to DAI configuration for HLS/DASH stream format selection (Android only)

iOS

  • Created AdParams data structure to parse and store ad 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
  • Added support for custom adTagParameters

Android

  • Extended AdsProps Kotlin class to parse unified ad configuration with DAI properties
  • 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 (ImaServerSideAdInsertionMediaSource) for both VOD and Live streams
  • Added support for custom ad tag parameters and automatic fallback to backup streams
  • Added format property support for HLS/DASH stream format selection via ImaServerSideAdInsertionUriBuilder
  • Fixed broken wait() call in DAI initialization that could cause issues
  • 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 with format selection
  • Added real-time event logging to monitor video and ad events
  • Added comprehensive README with installation steps, usage guide, and known issues

Documentation

  • Updated source.ad prop documentation with both CSAI and DAI configuration options
  • Added format property documentation for DAI streams
  • 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
  • Marked old adTagUrl and adLanguage props as deprecated

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 (including format selection), 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
  • Stream format - Test both HLS and DASH formats on Android (iOS auto-detects)
  • Ad events - Confirm that ad events are properly received via onReceiveAdEvent callback
  • Backup stream fallback - Test that the player automatically falls back to fallbackUri when DAI stream fails to load
  • Custom ad tag parameters - Verify that adTagParameters are correctly passed through to the IMA SDK
  • CSAI backward compatibility - Verify that existing CSAI implementations still work with the new unified API
  • Deprecated props - Verify that old adTagUrl prop still works (with deprecation warning in docs)
  • Error handling - Test behavior with missing required parameters

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).

@fnwk fnwk requested a review from moskalakamil January 9, 2026 18:39
@fnwk fnwk self-assigned this Jan 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: To Triage

Development

Successfully merging this pull request may close these issues.

3 participants