Monitor React native video

1Install mux-stats-sdk-react-native-video

Install from GitHub in your package.json (when this is officially released then it will be available on NPM).

copy
yarn add "https://github.com/muxinc/mux-stats-sdk-react-native-video#v0.1.0"  

OR

copy
npm install "https://github.com/muxinc/mux-stats-sdk-react-native-video#v0.1.0" --save  

2Wrap your Video component

Get your ENV_KEY from the Mux environments dashboard.

Wrap your Video component with the muxReactNativeVideo higher-order-component.

copy
import app from './package.json' // this is your application's package.json
import Video from 'react-native-video'; // import Video from react-native-video like your normally would
import muxReactNativeVideo from 'mux-react-native-video-sdk';

// wrap the `Video` component with Mux functionality
const MuxVideo = muxReactNativeVideo(Video);

// Pass the same props to `MuxVideo` that you would pass to the
// `Video` element. All of these props will be passed through to your underlying react-native-video component
// Include a new prop for `muxOptions`
<MuxVideo
  style={styles.video}
  source={{
    uri:
      'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
  }}
  controls
  muted
  muxOptions={{
    application_name: app.name,            // (required) the name of your application
    application_version: app.version,      // the version of your application (optional, but encouraged)
    data: {
      env_key: 'YOUR_ENVIRONMENT_KEY',     // (required)
      video_id: 'My Video Id',             // (required)
      video_title: 'My awesome video',
      player_software_version: '5.0.2'     // (optional, but encouraged) the version of react-native-video that you are using
      player_name: 'React Native Player',  // See metadata docs for available metadata fields https://docs.mux.com/docs/web-integration-guide#section-5-add-metadata
    },
  }}
/>  

3Make your data actionable

The required fields in the muxOptions that you pass into the MuxVideo component are application_name, data.env_key and data.video_id. However, without some metadata the metrics in your dashboard will lack the necessary information to take meaningful actions. Metadata allows you to search and filter on important fields in order to diagnose issues and optimize the playback experience for your end users.

Pass in metadata under the data on initialization.

copy
muxOptions={{
    application_name: app.name,            // (required) the name of your application
    application_version: app.version,      // the version of your application (optional, but encouraged)
    data: {
      env_key: 'ENV_KEY',
      // Site Metadata
      viewer_user_id: '', // ex: '12345'
      experiment_name: '', // ex: 'player_test_A'
      sub_property_id: '', // ex: 'cus-1'
      // Player Metadata
      player_name: '', // ex: 'My Main Player'
      player_version: '', // ex: '1.0.0'
      player_init_time: '', // ex: 1451606400000
      // Video Metadata
      video_id: '', // ex: 'abcd123'
      video_title: '', // ex: 'My Great Video'
      video_series: '', // ex: 'Weekly Great Videos'
      video_duration: '', // in milliseconds, ex: 120000
      video_stream_type: '', // 'live' or 'on-demand'
      video_cdn: '' // ex: 'Fastly', 'Akamai'
    },
  }}
});  

For more information, view Make your data actionable.

Release Notes

Current release

v0.3.0

• Fix an issue where playerID is null when wrapping the component with react-native-video-controls.

v0.2.0

• Update mux-embed to v4.2.0
• Fix an issue where views that resulted from programchange may not have been tracked correctly
• Fix an issue where if destroy was called multiple times, it would raise an exception

Previous releases

v0.1.0

• Initial release