Logo

Application collectors

React Native Video Media Player

For the React Native Collector

The React Native Video Media Player Extension is a configuration option for the React Native Collector by Datazoom that makes the following additional data points automatically collectable in real time.

Integration Instructions

Prerequisites

Important Notice: Datazoom NPM Collector SDK Required

This project is structured and configured to work with NPM (Node Package Manager), and it is mandatory to use NPM for installing the Datazoom Collector SDK and other dependencies. Direct inclusion of the Collector SDK or other dependencies is not supported and may lead to compatibility issues or unexpected behavior.

Implementation

Step 1: Setup React Native Project

Run the command to create a new React Native project:

1npx @react-native-community/cli@latest init your-project-name

Replace your-project-name with your desired project name.

Navigate to your project directory:

1cd your-project-name

Step 2: Install the Required Packages

Inside your project directory, run the following commands to install the required packages.

React Native Video player:

1npm install --save react-native-video

Datazoom collector SDK:

1# Without MediaTailor SDK2npm install --save @datazoom/collector_react_native_video34# With MediaTailor SDK5npm install --save @datazoom/collector_react_native_video_mt_om

Poly-fills required for Datazoom/MediaTailor SDKs

1npm install --save react-native-url-polyfill2npm install --save @xmldom/xmldom

Step 3: Add the Player

After installing the packages, you need to integrate the Player into your React Native application by:

  1. Import Video component from react-native-video.

  2. Use the Video component, providing necessary props such as source, ref, etc.

Example:

App.tsx

1import React, { useEffect, useState, useRef } from 'react';2import { SafeAreaView, View, StyleSheet } from 'react-native';3import Video from 'react-native-video';45export default function App() {6  const [currentVideoUrl, setCurrentVideoUrl] = useState<string>(null);7  const videoRef = useRef(null);89  useEffect(() => {10    setCurrentVideoUrl('your_video_stream_url');11  }, []);1213  // The 'videoRef.current' methods can be used to interact with the player programmatically1415  return (16    <SafeAreaView style={styles.container}>17      <View style={[ styles.videoContainer ]}>18        <Video19          ref={videoRef}20          source={{ uri: currentVideoUrl }}21          style={StyleSheet.absoluteFill}22          controls23          resizeMode=&quot;contain&quot;24        />25      </View>26    </SafeAreaView>27  );28}2930const styles = StyleSheet.create({31  container: {32    flex: 1,33    backgroundColor: '#111',34  },35  videoContainer: {36    width: '100%',37    height: 220,38    backgroundColor: '#000',39  }40});

Step 4: Add Datazoom SDK integration

First add the poly-fills required for Datazoom/MediaTailor SDKs by creating a new file polyfill.js with the following content (to be imported in the next step):

1import 'react-native-url-polyfill/auto';2import { DOMParser } from '@xmldom/xmldom';34globalThis.DOMParser = DOMParser;

Import and configure the Datazoom Collector for React Native Video Player per the documentation of @datazoom/collector_react_native_video:

1// Add polyfills required by the Datazoom/MediaTailor SDK2import './polyfill.js';34// Add Datazoom SDK5import datazoom from '@datazoom/collector_react_native_video'6// or from '@datazoom/collector_react_native_video_mt_om' for MediaTailor use cases.78datazoom.init({9  configuration_id: dzConfigId,10  log: &quot;debug&quot;11});

  • Replace dzConfigId with your configuration id.

  • The log: "debug" option can be omitted if console debug logging isn’t needed.

Optionally (for MediaTailor use cases), set up the mediatailor root object and enable MediaTailor debug logging if needed:

1// Get the 'mediatailor' root object from Datazoom SDK2const mediatailor = datazoom.mediatailor;34// Enable MediaTailor debug logs5mediatailor.setLogLevel(mediatailor.LogLevel.DEBUG);

When a React Native Video element is rendered, create a Datazoom context object to observe the playback activities and manage the gathered information:

1export default function App() {2  ...3  const dzContextRef = useRef(null);4  ...5  if (dzContextRef.current == null) {6    // Create a Datazoom context object7    dzContextRef.current = datazoom.createContext();8  }9  ...10  return (11    <SafeAreaView style={styles.container}>12      <View style={[ styles.videoContainer ]}>13        <Video14          ref={videoRef}15          source={{ uri: currentVideoUrl }}16          style={StyleSheet.absoluteFill}17          controls18          resizeMode=&quot;contain&quot;19          {...dzContextRef.current.eventListeners()}20        />21      </View>22    </SafeAreaView>23  );24}

  • The pre-existence of dzContextRef.current is checked before creating a new context object. This is to prevent redundancies and confusions when React renders the same element twice when operating in its strict-mode during development phase.

  • As shown in the line {...dzContextRef.current.eventListeners()} above, the Datazoom context object provides a list of event listeners through its eventListeners() method. These listeners should be specified as props in the declaration of the react-native-video Video element.

Optionally (to start a MediaTailor streaming session), add a useEffect hook with the following code to start a session right after the application root element is rendered:

1export default function App() {2  ...3  const mtSessionRef = useRef(null);4  const mtSessionRequestedRef = useRef(false);5  ...6  useEffect(() => {7    if (mtSessionRequestedRef.current === false) {8      // Initialize a MT session9      const sessionConfig = {10        sessionInitUrl: 'your_mediatailor_session_init_url'11      };12      mediatailor.createSession(sessionConfig).then(13        session => {14          // Update the playback URL of the video player element15          setCurrentVideoUrl(session.getPlaybackUrl());16          // Attach the MediaTailor session to the Datazoon context object17          dzContextRef.current.attachMediaTailorSession(session);18          // Keep track of the MediaTailor session object for its other uses19          mtSessionRef.current = session;20        },21        error => {22          console.warn(&quot;MT session initialization failed&quot;, error);23        }24      );25      mtSessionRequestedRef.current = true;26    }27  }, []);28}

Example:

App.tsx

1import React, { useEffect, useState, useRef } from 'react';2import { SafeAreaView, View, StyleSheet } from 'react-native';3import Video from 'react-native-video';45// Add polyfills required by the Datazoom/MediaTailor SDK6import './polyfill.js';78// Add Datazoom SDK9import datazoom from '@datazoom/collector_react_native_video_mt_om'1011datazoom.init({12  configuration_id: dzConfigId,13  log: &quot;debug&quot;14});1516// Get the 'mediatailor' root object from Datazoom SDK17const mediatailor = datazoom.mediatailor;1819// Enable MediaTailor debug logs20mediatailor.setLogLevel(mediatailor.LogLevel.DEBUG);2122export default function App() {23  const [currentVideoUrl, setCurrentVideoUrl] = useState<string>(null);24  const videoRef = useRef(null);25  const dzContextRef = useRef(null);26  const mtSessionRef = useRef(null);27  const mtSessionRequestedRef = useRef(false);2829  if (dzContextRef.current == null) {30    // Create a Datazoom context object31    dzContextRef.current = datazoom.createContext();32  }3334  useEffect(() => {35    if (mtSessionRequestedRef.current === false) {36      // Initialize a MT session37      const sessionConfig = {38        sessionInitUrl: 'your_mediatailor_session_init_url'39      };40      mediatailor.createSession(sessionConfig).then(41        session => {42          // Update the playback URL of the video player element43          setCurrentVideoUrl(session.getPlaybackUrl());44          // Attach the MediaTailor session to the Datazoon context object45          dzContextRef.current.attachMediaTailorSession(session);46          // Keep track of the MediaTailor session object for its other uses47          mtSessionRef.current = session;48        },49        error => {50          console.warn(&quot;MT session initialization failed&quot;, error);51        }52      );53      mtSessionRequestedRef.current = true;54    }55  }, []);5657  // The 'videoRef.current' methods can be used to interact with the player programmatically5859  return (60    <SafeAreaView style={styles.container}>61      <View style={[ styles.videoContainer ]}>62        <Video63          ref={videoRef}64          source={{ uri: currentVideoUrl }}65          style={StyleSheet.absoluteFill}66          controls67          resizeMode=&quot;contain&quot;68          {...dzContextRef.current.eventListeners()}69        />70      </View>71    </SafeAreaView>72  );73}7475const styles = StyleSheet.create({76  container: {77    flex: 1,78    backgroundColor: '#111',79  },80  videoContainer: {81    width: '100%',82    height: 220,83    backgroundColor: '#000',84  }85});

References:

React Native Video Player NPM: https://www.npmjs.com/package/react-native-video

React Native Video Player Doc: https://docs.thewidlarzgroup.com/react-native-video/docs/v6/intro

Datazoom Collector: https://www.npmjs.com/package/@datazoom/collector_react_native_video and https://www.npmjs.com/package/@datazoom/collector_react_native_video_mt_om

Ad Frameworks Extensions

If your React Native application has a media player with an ad framework, Datazoom’s React Native Collector with a React Native Video Media Player can be extended with the following ad framework extensions.

Previous
React Native Collector
Next
MediaTailor Ad Framework