DRM with ReactJS

Guide to set up Widevine & Fairplay DRM with ReactDRMPlayer on ReactJS

React DRM Player is a player to play DRM protected videos on react web applications. It can play both HLS and DASH streams and supports DRM.

To keep the scope of this document limited we expect you have already setup React JS development environment and have an application running.

πŸ“Ή

Protect your video assets from piracy.

Easily enable secure video playback with Widevine and Fairplay DRM on your ReactJS applications with Gumlet.

Step 1: Install the react-drm-player package

npm i @gumlet/react-drm-player

Step 2: Add the ReactDRMPlayer

For the simplicity of this document we are making the changes in App.js itself and our web application would only have a video player in it.

...

function App() {
  const onError = (event) => {
    console.error('Error code', event.detail.code, 'object', event.detail) // eslint-disable-line no-console
  }

  return (
    <div className="App">
      <ReactDRMPlayer 
        src={`<Normal video link here>`} 
        onPlayerError={(error) => {onError(error)}}
        onPlaybackError={(error) => {onError(error)}}
        width="640" 
        height="264" 
        controls 
        muted
        preload="none"
        autoPlay={false}
    	/>
    </div>
  );
}

...

If you run the application and navigate to http://localhost:3000/ you would see a video playing. This video was just an example and it is not an encrypted video. We will move to a DRM encrypted video next.

Step 3: Enabling DRM playback

Widevine DRM playback also needs Licence Server URL along with playback URL to play the content. Similarly Fairplay DRM playback needs Licence Server URL and a Certificate along with playback URL to play the content. The licence server URL will inform player the place from where the licence can be acquired.

For security reasons, Licence Server URL needs authentication token to be passed so it knows the request for licence is legitimate, due to this reason the code for generating a Licence Server URL should be on the server and not reside in the web application code.

Refer to these guide to generate the widevine and fairplay licence server URL on a backend server with your choice of programming language.

🚧

Remember!

Never generate the one time token for licence server on client side. You must generate token from your server and send it to client.

For simplicity we have omitted the code to generate the license server URLs

...

function App() {
  const onError = (error) => {
    console.error(error);
  }

  return (
    <div className="App">
      <ReactDRMPlayer 
        src={`<YOUR DRM PROTECTED VIDEO URL>`} 
        fairplayCertificateURI={`<YOUR FAIRPLAY CERTIFICATE URI>`}
        fairplayLicenseURI={`<YOUR PAIRPLAY LICENSE URI>`}

        widevineLicenseURI={`<YOUR WIDEVINE LICENSE URI>`}
        onPlayerError={(error) => {onError(error)}}
        onPlaybackError={(error) => {onError(error)}}
        width="640" 
        height="264" 
        controls 
        muted
        preload="none"
        autoPlay={false}
      />
    </div>
  );
}

...

Open the chrome or a chrome driver based browser and navigate to http://localhost:3000/ your DRM enabled video playback would be playing.

Open the safari browser and navigate to http://localhost:3000/ your DRM enabled video playback would be playing.

πŸ‘

Done

You can now play your DRM protected videos in a React Web Applications

Full Code Snippet

import './App.css';
import ReactDRMPlayer from "./lib/component/player"

function App() {
  const onError = (error) => {
    console.error(error);
  }

  return (
    <div className="App">
      <ReactDRMPlayer 
        src={`https://video.gumlet.io/5f462c1561cf8a766464ffc4/63bbcd99b03c5ea88606d0cd/main.m3u8`} 
        fairplayCertificateURI={`https://fairplay.gumlet.com/certificate/5f2bdde3e93619b8859d8831`}
        fairplayLicenseURI={`https://fairplay.gumlet.com/licence/5f2bdde3e93619b8859d8831/63bbcd99b03c5ea88606d0cd?expires=1673286311740&token=9c6c12919da400d20be2f6e31ce2a2cab2c76d24`}

        widevineLicenseURI={`https://widevine.gumlet.com/licence/5f2bdde3e93619b8859d8831/63bbcd99b03c5ea88606d0cd?expires=1673257114869&token=973149697111c3f18112bad20499c964f83a90df`}
        onPlayerError={(error) => {onError(error)}}
        onPlaybackError={(error) => {onError(error)}}
        width="640" 
        height="264" 
        controls 
        muted
        preload="none"
        autoPlay={false}
      />
    </div>
  );
}

export default App;

You can find working repository of the above code at the following github link