Getting Started

Configuration of the Lura Player is very straight forward and on point. After following the steps shown in Setting Up Dependencies, you can start exploring the configuration options.

You can simply put the attributes in the following manner to your config.

{ attribute: value, attribute: value, attribute: value, ... }

To start simple, we will start with the basic attributes to play a video. There are two ways to play a video in Lura Player.

Lura configuration for content playback

This is the most simple way of playing videos. Lura Player will configure itself based on the play configuration you have configured from MCP. To see more details, check out Lura Configuration

Attribute	Type	Description
appKey	string	AppKey generated in MCP based on the pre-adjusted play configuration
assetId	string	AssetId of the VOD or the Live Stream
token	string	(Optional) When specified the provided token will be used in entitlements requests.

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 = {
        ...
        lura: {
            appKey: "<YOUR_APP_KEY>",
            assetId: "<ASSET_ID>",
        },
        ...
    };
    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,
    },
});

Manual media configuration for content playback

To manually configure the media, you need to add following media objects and attributes based on your needs.

• Media source
• DRM configuration
• Caption source
• Poster image source
• Trick play image source
• Title configuration
• Description configuration
• Start at configuration
• Annotations configuration

Here is an example code to play a media with all features.

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: {
            title: "Example title",
            description: "Example description",
            media: [
                {
                    url: "https://media.example.com/hls.m3u8",
                    type: "application/x-mpegURL",
                    licenseUrl: "https://license.example.com",
                },
                {
                    url: "https://media.example.com/dash.mpd",
                    type: "application/dash+xml",
                    licenseUrl: "https://license.example.com",
                },
                {
                    url: "https://media.example.com/mp4.mp4",
                    type: "video/mp4",
                },
                {
                    url: "https://media.example.com/poster.webp",
                    type: "image/webp",
                },
                {
                    url: "https://media.example.com/trick-play.bif",
                    type: "image/bif",
                },
                {
                    url: "https://media.example.com/caption-en.vtt",
                    type: "text/vtt",
                    language: "en",
                },
            ],
            clientCertificates: {
                fairplay: {
                    url: "https://license.example.com/fairplay-license",
                },
            },
        },
    };
    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,
    },
});