Adding DRM Information

The example code shows how to use the LuraPlayer to play encrypted content protected with Digital Rights Management (DRM) systems. LuraPlayer currently supports fairplay, widevine, and playready.

A DRM (Digital Rights Management) license URL is a URL that points to a server that issues licenses for protected digital content. When content is protected by DRM, it is encrypted to prevent unauthorized access and distribution. In order to view or use the content, the user needs a license that grants them permission to do so. The license contains information such as the user's rights to the content, the expiration date of the license, and the decryption key needed to access the content.

Widevine and Playready

To configure Widevine or Playready DRM in Lura Player, you only need to add a license URL to the encrypted media object.

Attribute	Type	Required	Description
licenseUrl	string	yes	License URL of the content.

Widevine and Playready

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlayer, type Configuration } from "@akta-tech/lura-player-react-native";
import { LuraPlayerControls } from "@akta-tech/lura-player-react-native-ui";

export default function App() {
    const playerRef = useRef<UnifiedPlayer>(null);
    const config: Configuration = {
      ...
      content: {
          media: [
              ...
              {
                  url: "YOUR_PROTECTED_MEDIA",
                  type: "application/dash+xml",
                  licenseUrl: "YOUR_DRM_LICENSE_SERVER_URL"
              }
              ...
          ]
      }
      ...
    };
    useEffect(() => {
        playerRef.current?.setConfig(config)
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player}>
                <LuraPlayerControls></LuraPlayerControls>
            </LuraPlayer>
        </View>
    );
}

const styles = StyleSheet.create({
    player: {
        backgroundColor: "#000",
        width: "100%",
        maxWidth: 640,
        aspectRatio: 16 / 9,
    },
});

FairPlay

In addition to the configuration above, for FairPlay, the license URL and FairPlay certificate data properties must be specified. You can provide the FairPlay certificate data in two ways:

Attribute	Type	Description
data	string	FairPlay certificate data.
url	string	URL to download the FairPlay certificate data by GET request.

FairPlay

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlayer, type Configuration } from "@akta-tech/lura-player-react-native";
import { LuraPlayerControls } from "@akta-tech/lura-player-react-native-ui";

export default function App() {
    const playerRef = useRef<UnifiedPlayer>(null);
    const config: Configuration = {
      ...
      content: {
          media: [
              ...
              {
                  url: "YOUR_PROTECTED_MEDIA",
                  type: "application/x-mpegURL",
                  licenseUrl: "YOUR_DRM_LICENSE_SERVER_URL"
              }
              ...
          ],
          clientCertificates: {
              fairplay: {
                  // You can either provide the certificate data
                  data: "YOUR_FAIRPLAY_CERTIFICATE_DATA",
                  // Or the URL to get the certificate data
                  url: "https://example.com/path/to/certificate/data"
              }
          }
      }
      ...
    };
    useEffect(() => {
        playerRef.current?.setConfig(config)
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player}>
                <LuraPlayerControls></LuraPlayerControls>
            </LuraPlayer>
        </View>
    );
}

const styles = StyleSheet.create({
    player: {
        backgroundColor: "#000",
        width: "100%",
        maxWidth: 640,
        aspectRatio: 16 / 9,
    },
});

Preferred DRM Systems

You can specify the Preferred DRM Systems on your configuration by adding preferredDRMSystems attribute to your configuration. By specifying this attribute, LuraPlayer will only try to use the preferred DRM systems on supported devices.

danger

Specifying this attribute may lead to playback failure if none of the preferred drm systems are supported on the browser. Please provide the widest range of DRM systems the license server supports.

Attribute	Type	Description
preferredDRMSystems	Array<"widevine" | "fairplay" | "playready">	Preferred DRM Systems.

Preferred DRM Systems

import React, { useRef, useEffect, useState } from "react";
import { SafeAreaView, StyleSheet, View } from "react-native";
import { LuraPlayer, type UnifiedPlayer, type Configuration } from "@akta-tech/lura-player-react-native";
import { LuraPlayerControls } from "@akta-tech/lura-player-react-native-ui";

export default function App() {
    const playerRef = useRef<UnifiedPlayer>(null);
    const config: Configuration = {
      ...
      content: {
          media: [
              ...
              {
                  url: "YOUR_PROTECTED_MEDIA",
                  type: "application/x-mpegURL",
                  licenseUrl: "YOUR_DRM_LICENSE_SERVER_URL"
              }
              ...
          ],
          clientCertificates: {
              fairplay: {
                  data: "YOUR_FAIRPLAY_CERTIFICATE_DATA"
              }
          },
          preferredDRMSystems: [
              "widevine",
              "fairplay"
          ]
      }
      ...
    };
    useEffect(() => {
        playerRef.current?.setConfig(config)
    }, [playerRef]);
    return (
        <View>
            <SafeAreaView />
            <LuraPlayer ref={playerRef} style={styles.player}>
                <LuraPlayerControls></LuraPlayerControls>
            </LuraPlayer>
        </View>
    );
}

const styles = StyleSheet.create({
    player: {
        backgroundColor: "#000",
        width: "100%",
        maxWidth: 640,
        aspectRatio: 16 / 9,
    },
});