MediaMelon React Native Video v5.2.1 SDK Integration Document

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

Step 1: Install MediaMelon React Native SDK

Step 2: Import SDK Package

Step 3: Register and Initialise SDK

Step 4: Custom Adapter

Step 5: Limitations

Step 1: Install MediaMelon React Native SDK

$REACT_NATIVE_PROJECT = {ReactNativeVideo - v5.2.1}

The SDK files should be added to the build environment

Using NPM:

1. Use this command in your terminal:-

npm i [email protected]

Using JS file:

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

Step 2: Import SDK Package

$REACT_NATIVE_PROJECT/App.js

Using NPM:

import {MMReactNativeVideoSDK, MMCustomAdapter, MMPlayerState} from 'mediamelon-js-react-native-sdk';

Using JS File:

import {MMReactNativeVideoSDK, MMCustomAdapter, MMPlayerState} from './mmsmartstreaming_reactnative.min.js';

Step 3: Register and Initialise SDK

CUSTOMER_ID is your MediaMelon assigned Customer ID. If you do not know your Customer ID, contact MediaMelon at [email protected].

Wrap your Video component with the MMReactNativeVideoSDK.

const MMPlayer = MMReactNativeVideoSDK(Video);

<MMPlayer
    source={{ uri: 'STREAM_URL' }}
    ...
    mmOptions={{
      register: {
        customerId: 'CUSTOMER_ID',      
        subscriberId: 'SUBSCRIBER_ID',   
        subscriberType: 'SUBSCRIBER_TYPE',
        subscriberTag:'SUBSCRIBER_TAG',  
        hashSubscriberId: false,
        playerName: 'PLAYER_NAME',
        playerBrand:"PLAYER_BRAND",
        playerModel:"PLAYER_MODEL",
        playerVersion:'PLAYER_VERSION',
        basePlayerName: "BASE_PLAYER_NAME",
        basePlayerVersion: "BASE_PLAYER_VERSION",
        domainName: 'DOMAIN_NAME',
        applicationName: 'APP_NAME',            
        applicationVersion: 'APP_VERSION',      
        deviceMarketingName:'DEVICE_MARKETING_NAME'
      },
      contentMetadata: {
        assetName:'ASSET_NAME',
        assetId:"ASSET_ID",
        videoId:"VIDEO_ID",
        contentType:'CONTENT_TYPE',
        genre:'GENRE',
        drmProtection:'DRM_PROTECTION',
        episodeNumber:'EPISODE_NUMBER',
        season:'SEASON',
        seriesTitle:'SERIES_TITLE',                  
        isLive: false,
      },
      streamInfo:{
        mediaType: 'MEDIA_TYPE',
        streamFormat: 'STREAM_FORMAT',
        sourceType: 'SOURCE_TYPE'
      },
      customTags:{
        "KEY1": "VALUE_STRING1",
        "KEY2": "VALUE_STRING2"
      },
      experimentName: "EXPERIMENT_NAME",
      subPropertyId: "SUB_PROPERTY_ID",
      viewSessionId: "VIEW_SESSION_ID",
      deviceId: "DEVICE_ID",
      cdn: "CDN",
      enableLogTrace: false
    }}
/>

• isLive: Set to true for live video stream and to false for the VOD stream.

• hashSubscriberId: Set it to true to hash the subscriber ID, and to false to process the subscriber ID without hashing.

Step 4: Custom Adapter

Step 4.1: Report Player State

Use the Custom Adapter to report player state changes during video playback.

The adapter exposes the method reportPlayerState(state) and accepts an enum value from MMPlayerState.

Player State Mapping

• PLAYING → Reported when playback starts or resumes.

• PAUSED → Reported when playback is paused.

• STOPPED → Reported when playback ends or the user exits playback.

const mmAdapter = MMCustomAdapter();

mmAdapter.reportPlayerState(MMPlayerState.PLAYING);

Enum: MMPlayerState
- PLAYING
- PAUSED
- STOPPED

Step 4.2: Report Custom Metadata

Use this method to report any additional metadata that doesn’t fall under predefined fields. This allows flexibility to send custom business-specific or platform-specific information to the SDK. This is the same as customTags in the contentMetadata object.

mmAdapter.reportCustomMetadata("KEY", "VALUE");

Step 4.3: Update Asset Info

If Asset Information needs to be updated dynamically during the live session without re-initiating the player, then the updateAssetInfo API can be used to update the new AssetInfo

Note

• This API must be called for updating asset info for the live streams only

• This API must be called after the Player has started the playback of the live stream

• New Asset Info Object will override the previous values. Hence, set all the fields that are required every time calling this API, including all Custom Tags.

// Create a new assetInfo object with the values need to be updated
var newAssetInfo =  { 
     "assetName": "ASSET_NAME",
     "assetId": "ASSET_ID",
     "videoId": "VIDEO_ID",
     "contentType": "CONTENT_TYPE",
     "drmProtection": "DRM_PROTECTION",
     "episodeNumber": "EPISODE_NUMBER",
     "season": "SEASON",
     "seriesTitle": "SERIES_TITLE",
     "customTags":{
         "key1": "VALUE1",
         "key2": "VALUE2"
     }          
}

// Update the new assetInfo
mmAdapter.updateAssetInfo(newAssetInfo);

Step 4.4 Report Rendition

At the start of the video, create a ReditionInfo object, assign initial rendition values to the object, and report it to the SDK. For any subsequent rendition change, update only the fields that changed in the same RenditionInfo object. Leave the unchanged fields as-is, and report the updated object to the SDK.

var renditionInfo = new RenditionInfo();
rendition.bitrate = <birate>;            //Integr Value in bps
rendition.width = <width>;               //Integr Value
rendition.height = <height>;             //Integer Value
rendition.frameRate = <frame_rate>;      //Integr Value in fps
rendition.aCodec = "AUDIO_CODEC";
rendition.vCodec = "VIDEO_CODEC";

mmAdapter.reportRendition(renditionInfo);

Step 5: Limitations

• The built-in player state tracking doesn't work as expected on Android. Use the Custom Adapter for more reliable player state monitoring.

• Buffering events are not tracked on Android because the onBuffer() callback is not triggered consistently.

• Seek start/complete events are tracked internally only for VOD, as the onSeek() listener is not consistent across platforms.