MediaMelon React Native Video SDK Integration Document

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

Step 1: Install MediaMelon React Native SDK

Step 2: Import SDK Package

Step 3: Register and Initialise SDK

Step 4: Custom Adapter

Release Notes

Step 1: Install MediaMelon React Native SDK

$REACT_NATIVE_PROJECT = {ReactNativeVideo - v6.19.0}

The SDK files should be added to the build environment

Using NPM:

1. Use this command in your terminal:-

npm i mediamelon-js-react-native-sdk@1.5.0

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 [e-mail].

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",
      appSessionId: "APP_SESSION_ID",
      deviceId: "DEVICE_ID",
      cdn: "CDN",
      encodingService: "ENCODING_SERVICE",
      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);

Release Notes:

Current Release

v1.5.0 ^{_{May 07, 2026}}

• Added support for React Native Video Player v6.19.0

• Introduced tracking for buffering and seek events

• Enhanced rendition tracking with bitrate and codec data

• Added Seek duration metric

• Introduced new metadata fields: App Session ID and Encoding Service

• Added CDN_CHANGE event support