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:

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

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

Navigate to your project directory:

cd 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:

npm install --save react-native-video

Datazoom collector SDK:

# Without MediaTailor SDK
npm install --save @datazoom/collector_react_native_video

# With MediaTailor SDK
npm install --save @datazoom/collector_react_native_video_mt_om

Poly-fills required for Datazoom/MediaTailor SDKs

npm install --save react-native-url-polyfill
npm 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

import React, { useEffect, useState, useRef } from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
import Video from 'react-native-video';

export default function App() {
  const [currentVideoUrl, setCurrentVideoUrl] = useState<string>(null);
  const videoRef = useRef(null);

  useEffect(() => {
    setCurrentVideoUrl('your_video_stream_url');
  }, []);

  // The 'videoRef.current' methods can be used to interact with the player programmatically

  return (
    <SafeAreaView style={styles.container}>
      <View style={[ styles.videoContainer ]}>
        <Video
          ref={videoRef}
          source={{ uri: currentVideoUrl }}
          style={StyleSheet.absoluteFill}
          controls
          resizeMode="contain"
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#111',
  },
  videoContainer: {
    width: '100%',
    height: 220,
    backgroundColor: '#000',
  }
});

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

import 'react-native-url-polyfill/auto';
import { DOMParser } from '@xmldom/xmldom';

globalThis.DOMParser = DOMParser;

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

// Add polyfills required by the Datazoom/MediaTailor SDK
import './polyfill.js';

// Add Datazoom SDK
import datazoom from '@datazoom/collector_react_native_video'
// or from '@datazoom/collector_react_native_video_mt_om' for MediaTailor use cases.

datazoom.init({
  configuration_id: dzConfigId,
  log: "debug"
});

  • 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:

// Get the 'mediatailor' root object from Datazoom SDK
const mediatailor = datazoom.mediatailor;

// Enable MediaTailor debug logs
mediatailor.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:

export default function App() {
  ...
  const dzContextRef = useRef(null);
  ...
  if (dzContextRef.current == null) {
    // Create a Datazoom context object
    dzContextRef.current = datazoom.createContext();
  }
  ...
  return (
    <SafeAreaView style={styles.container}>
      <View style={[ styles.videoContainer ]}>
        <Video
          ref={videoRef}
          source={{ uri: currentVideoUrl }}
          style={StyleSheet.absoluteFill}
          controls
          resizeMode="contain"
          {...dzContextRef.current.eventListeners()}
        />
      </View>
    </SafeAreaView>
  );
}

  • 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:

export default function App() {
  ...
  const mtSessionRef = useRef(null);
  const mtSessionRequestedRef = useRef(false);
  ...
  useEffect(() => {
    if (mtSessionRequestedRef.current === false) {
      // Initialize a MT session
      const sessionConfig = {
        sessionInitUrl: 'your_mediatailor_session_init_url'
      };
      mediatailor.createSession(sessionConfig).then(
        session => {
          // Update the playback URL of the video player element
          setCurrentVideoUrl(session.getPlaybackUrl());
          // Attach the MediaTailor session to the Datazoon context object
          dzContextRef.current.attachMediaTailorSession(session);
          // Keep track of the MediaTailor session object for its other uses
          mtSessionRef.current = session;
        },
        error => {
          console.warn("MT session initialization failed", error);
        }
      );
      mtSessionRequestedRef.current = true;
    }
  }, []);
}

Example:

App.tsx

import React, { useEffect, useState, useRef } from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
import Video from 'react-native-video';

// Add polyfills required by the Datazoom/MediaTailor SDK
import './polyfill.js';

// Add Datazoom SDK
import datazoom from '@datazoom/collector_react_native_video_mt_om'

datazoom.init({
  configuration_id: dzConfigId,
  log: "debug"
});

// Get the 'mediatailor' root object from Datazoom SDK
const mediatailor = datazoom.mediatailor;

// Enable MediaTailor debug logs
mediatailor.setLogLevel(mediatailor.LogLevel.DEBUG);

export default function App() {
  const [currentVideoUrl, setCurrentVideoUrl] = useState<string>(null);
  const videoRef = useRef(null);
  const dzContextRef = useRef(null);
  const mtSessionRef = useRef(null);
  const mtSessionRequestedRef = useRef(false);

  if (dzContextRef.current == null) {
    // Create a Datazoom context object
    dzContextRef.current = datazoom.createContext();
  }

  useEffect(() => {
    if (mtSessionRequestedRef.current === false) {
      // Initialize a MT session
      const sessionConfig = {
        sessionInitUrl: 'your_mediatailor_session_init_url'
      };
      mediatailor.createSession(sessionConfig).then(
        session => {
          // Update the playback URL of the video player element
          setCurrentVideoUrl(session.getPlaybackUrl());
          // Attach the MediaTailor session to the Datazoon context object
          dzContextRef.current.attachMediaTailorSession(session);
          // Keep track of the MediaTailor session object for its other uses
          mtSessionRef.current = session;
        },
        error => {
          console.warn("MT session initialization failed", error);
        }
      );
      mtSessionRequestedRef.current = true;
    }
  }, []);

  // The 'videoRef.current' methods can be used to interact with the player programmatically

  return (
    <SafeAreaView style={styles.container}>
      <View style={[ styles.videoContainer ]}>
        <Video
          ref={videoRef}
          source={{ uri: currentVideoUrl }}
          style={StyleSheet.absoluteFill}
          controls
          resizeMode="contain"
          {...dzContextRef.current.eventListeners()}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#111',
  },
  videoContainer: {
    width: '100%',
    height: 220,
    backgroundColor: '#000',
  }
});

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