Playback of encrypted content

The following describes how to playback streams encrypted with native DRM systems (Widevine on Android, FairPlay on Apple). It assumes integration into an existing project; see the React Native SDK Integration Guide for details. To view this feature in a standalone project, see the readme in the examples.zip archive in the release files.

OTVPlayer Source

The entry point for playback is the OTVPlayer object. In the .js file for your screen, you need to do the following:

Import the OTVPlayer class.
Add an OTVPlayer element to your DOM.
Specify an appropriate source object for the OTVPlayer element.
Call the elements play() method on an appropriate event.

Example code

Click here to see a minimal implementation to get native encrypted playback working.

CODE

this.sourceStream = {
	src: "https://stream.com/fairplay.m3u8",
	token: "t0ken",
	drm: {
		certificateUrl: "https://licenseservice.com/certificates",
		licenseURL: "https://licenseservice.com/licenses"
	}
}

See below for an example of how you might include this in your application.

CODE

…
import OTVPlayer from '@nagra/react-otvplayer'
…
const App: () => Node = () => {
    …
    this.otvplayer = {
        ref: OTVPlayer
    };
 
    // This is effectively an autoplay for when the media has loaded
    this._onLoad = (data = {}) => {
        this.otvplayer.ref.play();
    };
 
    this.events = {
        onLoad: this._onLoad.bind(this)
    };
 
	this.encryptedStream = {
		src: "https://stream.com/fairplay.m3u8",
		token: "t0ken",
		drm: {
			certificateUrl: "https://licenseservice.com/certificates",
			licenseURL: "https://licenseservice.com/licenses"
		}
	}

    return (
        <OTVPlayer ref={otvplayer => this.otvplayer.ref = otvplayer}
            source={this.encryptedStream}
            style={[styles.player.container]}
            autoplay={true}
        >
        </OTVPlayer>
    );
    …
}
…

For more information, see the OTVPlayer API documentation. The main difference between this example and the clear playback is the definition of the source object passed to the OTVPlayer element. For encrypted content, just the source is insufficient - a token and licence URL must be given, as well as a certificate URL for FairPlay.