React Native Video v6.4.2 with Mediamelon SDK

This guide provides detailed instructions on integrating the React Native Video MediaMelon SDK with React Native Video v6.4.2 player

Step 1: Prerequisites

Step 2: Set up the build environment

Step 3: Import Packages

Step 4: Register and Initialise SDK

Step 5: Variables and Description

Step 1: Prerequisites

  • React native video - v6.4.2 application.

  • MediaMelon SmartSight SDK mm_react_native6_sdk.min.js file is necessary.

Step 2: Set up the build environment

$REACT_NATIVE_PROJECT = {ReactNativeVideo - v6.4.2}

The SDK files should be added to the build environment

Using NPM:

  1. Use this command in your terminal:-

npm i mediamelon-reactnative-video@2.0.0

Using JS file:

  • Copy mm_react_native_sdk.js provided in the release package to the React native project. Example $REACT_NATIVE_PROJECT/mm_react_native6_sdk.min.js

Step 3: Import Packages

$REACT_NATIVE_PROJECT/App.js

Using NPM:

import mmReactNativeVideo from 'mediamelon-reactnative-video';

Using JS file:

import mmReactNativeVideo from './mm_react_native6_sdk.min.js';

Step 4: Register and Initialise SDK

The SDK must be initialised at the start of each video session. Initialisation includes setting the application context, initialising the playback session, and indicating the intent for playback with the SDK.

The enableLogTrace feature should be enabled for testing during the integration process. Set this to False before releasing the player to production.

CUSTOMER_ID is your MediaMelon assigned Customer ID. If you do not know your Customer ID contact MediaMelon at customer-support@mediamelon.com.

Wrap your Video component with the mmReactNativeVideo.

const MMPlayer = mmReactNativeVideo(Video);

<MMPlayer
        source={{ uri: 'STREAM_URL' }} 
        style={styles.video} 
        controls={true}  
        resizeMode="contain"
        onLoad = {"HANDEL_ON_LOAD"} // 
        mmOptions={{
          data: {
           application_name: 'APP_NAME',            // (required) the name of your application
           application_version: 'APP_VERSION',      // the version of your application (optional, but encouraged)
           player_name: 'PLAYER_NAME',
           customer_id: 'CUSTOMER_ID',             // (required)
           subscriber_id: 'SUBSCRIBER_ID',
           domain_name: 'DOMAIN_NAME',
           subscriber_type: 'SUBSCRIBER_TYPE',
           subscriber_tag:'SUBSCRIBER_TAG',
           player_brand:"PLAYER_BRAND",
           player_model:"PLAYER_MODEL",
           player_version:'PLAYER_VERSION',
           device_marketing_name:'DEVICE_MARKETING_NAME'
          },
          content_metadata: {                  //optional
            asset_name:'ASSET_NAME',
            asset_id:"ASSET_ID",
            video_Id:"VIDEO_ID",
            content_type:'CONTENT_TYPE',
            genre:'GENRE',
            drm_protection:'DRM_PROTECTION',
            episode_number:'EPISODE_NUMBER',
            season:'SEASON',
            series_title:'SERIES_TITLE',
            video_type:'VIDEO_TYPE',
            is_live: false,
          },
          custom_tags:{                       // optional
            "KEY1": "VALUE_STRING1",
            "KEY2": "VALUE_STRING2"
          },
          enableLogTrace:true,
        }}
/>

Step 5: Variables and Description

Last updated