This guide walks through integration with react-native-video to collect video performance metrics with Mux Data.
Beta SDK
This SDK is currently beta. See the Known Issues and Caveats in the README on GitHub.
The following data can be collected by the Mux Data SDK when you use the React Native Video SDK, as described below.
Supported Features:
Video Quality metrics are not available.
@mux/mux-data-react-native-video
Include the Mux JavaScript SDK on every page of your web app that includes video.
npm install --save @mux/mux-data-react-native-video
Get your ENV_KEY
from the Mux environments dashboard.
Env Key is different than your API token
ENV_KEY
is a client-side key used for Mux Data monitoring. These are not to be confused with API tokens which are created in the admin settings dashboard and meant to access the Mux API from a trusted server.
Wrap your Video
component with the muxReactNativeVideo
higher-order-component.
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/mux-data-react-native-video';
// 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
},
}}
/>
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.
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.
If you have integrated a custom domain for Data collection, specify your custom domain by setting beaconCollectionDomain
.
muxOptions={{
application_name: app.name, // (required) the name of your application
application_version: app.version, // the version of your application (optional, but encouraged)
beaconCollectionDomain: 'CUSTOM_DOMAIN', // ex: 'foo.bar.com'
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'
},
}}
});
mux-embed
to v5.3.0mux-embed
to v5.2.1mux-embed
to v5.2.0Target ES5 for bundles and validate bundles are ES5
Update mux-embed
to v5.1.0
mux-embed
to v5.0.0mux-embed
to v4.30.0mux-embed
to v4.29.0mux-embed
to v4.28.1Add renditionchange events for Android
Introduces error tracking
Bug fix for rebuffering metrics
Update mux-embed
to v4.28.0
fix an issue where seek latency could be unexpectedly large
fix an issue where seek latency does not include time at end of a view
Update mux-embed
to v4.27.0
mux-embed
to v4.26.0mux-embed
to v4.25.1mux-embed
to v4.25.0Fix an issue where beacons over a certain size could get hung and not be sent
Update mux-embed
to v4.24.0
Fix an issue where tracking rebuffering can get into an infinite loop
Update mux-embed
to v4.23.0
mux-embed
to v4.22.0mux-embed
to v4.21.0mux-embed
to v4.20.0Improve accuracy of react-native-video rebuffer tracking
Update mux-embed
to v4.19.0
mux-embed
to v4.18.0Support player_error_context
in errorTranslator
Update mux-embed
to v4.17.0
Adds support for new and updated fields: renditionchange
, error, DRM type, dropped frames, and new custom fields
Update mux-embed
to v4.16.0
mux-embed
to v4.15.0mux-embed
to v4.14.0mux-embed
to v4.13.4mux-embed
to v4.13.3mux-embed
to v4.13.2mux-embed
to v4.13.1Upgraded internal webpack version
Update mux-embed
to v4.13.0
mux-embed
to v4.12.1mux-embed
to v4.12.0mux-embed
to v4.11.0mux-embed
to v4.10.0mux-embed
to v4.9.4mux-embed
to v4.9.3mux-embed
to v4.9.2mux-embed
to v4.9.1mux-embed
to v4.9.0mux-embed
to v4.8.0mux-embed
to v4.7.0mux-embed
to v4.6.2mux-embed
to v4.6.1playerID
is null
when wrapping the component with react-native-video-controls.mux-embed
to v4.2.0programchange
may not have been tracked correctlydestroy
was called multiple times, it would raise an exception