Quick Start

Introduction

Lura Player React Native SDK enables HLS and DASH video playback in web, ios and android applications. It has a user-friendly interface, developer-friendly SDK and includes industry standard capabilities, making it a comprehensive solution for video streaming and advertising. The SDK is written in TypeScript, a programming language that provides a strict type system and code stability, making it easier to integrate into TypeScript-based projects. Lura Player offers advanced advertisement support and a range of features for a seamless viewing experience, including support for multiple audio and subtitle tracks and advanced playback controls.

This section describes all the mandatory steps to integrate Lura React Native SDK into your application to create a basic application.

Prerequisites

In order to integrate the Lura Player React Native SDK in your React Native applications, you need to have the following installed on your development environment:

• React native environment setup (Node 18 or higher, Watchman, the React Native command line interface, JDK, Android Studio, XCode, and CocoaPods). If you don't have the react native environment setup, please follow the environment setup until "Creating a new application" section. (This will take approximately 30 minutes to complete and is only required once.)
• Lura Player React Native SDK tarball or access to private npm registry

Getting Started

Before we create a sample app, you need to login to npmjs for the Lura Player npm package. You can login to npmjs with the following command.

npm login

The first step in this part is to build a simple demo app that uses the lura-player-react-native package.

1. Create an Expo App with New Architecture Enabled

npx create-expo-app@latest -e with-new-arch lura_player_sample_app

2. Change the current working directory to lura_player_sample_app

cd lura_player_sample_app/

3. Make the typescript configuration

mv App.js App.tsx && npx expo install -- --save-dev typescript @types/react

4. Install Expo Web (Optional)

npx expo install react-native-web react-dom @expo/metro-runtime

5. Prebuild the Expo App

npx expo prebuild

6. Install Lura Player packages and dependencies

# Core Lura Player SDK
yarn add @akta-tech/lura-player-react-native

# Lura Player UI
yarn add @akta-tech/lura-player-react-native-ui
yarn add react-native-svg

# Lura Player Plugins
yarn add @akta-tech/lura-player-react-native-<PLUGIN_NAME>-plugin

7. After installing the npm package, import the player in your project by copying the following code to your App.tsx file.

import React, { useRef } from "react";
import { Button, SafeAreaView, StyleSheet } from "react-native";
import { LuraPlayer, type UnifiedPlayer } 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);
    return (
        <SafeAreaView>
            <LuraPlayer ref={playerRef} style={styles.player}>
                <LuraPlayerControls></LuraPlayerControls>
            </LuraPlayer>
            <Button
                title="Watch Sintel"
                onPress={() => {
                    playerRef.current?.setConfig({
                        lura: {
                            appKey: "tqylhUC5n_I4DTH0924LKBxYDTnDmesfzOnHFn3LwUmE4usyMz5rJMjLimCuSH3sSHBjwTX_FNTohzKSBO-zGiD0zHOMGHcg_9OOcvHxDaQ",
                            assetId: "5179686",
                        },
                        controls: {
                            autoplay: true,
                        },
                    });
                }}
            />
        </SafeAreaView>
    );
}

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

Note that you need to replace the placeholder config property with your own Lura Player config.

9. Open the metro server by executing:

yarn start -c

8. Run the React Native app by executing:

# For Web
yarn web

# For iOS
yarn ios

# For Android
yarn android

That's it! You should now see the Lura Player embedded in your React Native application. Note that you need to make additional configurations to use all of the player features in Android or IOS, please check out the Setting Up Dependencies section.