Ease Live Bridge SDK for React Native

Requirements

Latest stable React Native version is recommended, currently 0.80.1 or newer, but will probably work on recent older versions. This release was tested on React Native 0.80.1 and 0.74.2.

This is a wrapper for the native EaseLive SDKs. For platform specific requirements see:

• iOS SDK
• Android SDK

Example project

Download example project

Installation

NPM package

The package can be downloaded from Ease Live's NPM registry by adding it to either your NPM or Yarn config, depending on which your use:

NPM

Add in .npmrc file in your RN project directory

@ease-live:registry=https://easelive.jfrog.io/artifactory/api/npm/npm-public/

Once the npm config is in place, install the package:

npm install @ease-live/react-native-ease-live

Yarn

If using Yarn instead of NPM, add in .yarnrc.yml file in your RN project directory

npmScopes:
  ease-live:
    npmRegistryServer: https://easelive.jfrog.io/artifactory/api/npm/npm-public/

Once the yarn config is in place, install the package:

yarn add @ease-live/react-native-ease-live

iOS dependencies

Add or update source in your ios/Podfile to add the EaseLive SDK pod repo:

source 'https://cdn.cocoapods.org'
source 'https://github.com/ease-live/ease-live-bridge-ios-pod.git'

From the ios folder, install the dependencies

pod install --repo-update

Android dependencies

Add or update repositories in your android/app/build.gradle to add the EaseLive SDK repo:

repositories {
  mavenCentral()
  google()
  maven {
    url "https://sdk.easelive.tv/maven"
  }
}

Use

For a full example see Example project.

For a full list of options see the API reference

Set up states for player values shared to EaseLive

const [easeLiveEnabled, setEaseLiveEnabled] = useState(true);
const [playerControlsVisible, setPlayerControlsVisible] = useState(false);
const [playerTime, setPlayerTime] = useState(0);
const [playerState, setPlayerState] = useState('playing');

Listen for changes in the player, and change the state to emit it to the EaseLive overlay.

Place the EaseLive component between the video and the player controls.

<Video ...
  onProgress={(e: any) => {
    // send UTC time of current playback position to EL
    if (e.currentPlaybackTime > 0) {
      setPlayerTime(e.currentPlaybackTime);
    }
  }}
/>

{easeLiveEnabled && (
<EaseLive
  easeLiveConfig={{
    // project and environment to load
    accountId: 'tutorials',
    projectId: '0346ae3e-7a91-4760-bcd3-cd84bb6790dd',
    programId: '2d2711ff-6ff2-41c1-a141-060e9ffa2c38',
    env: 'prod',
    // optionally add query parameters to the URL loaded from the environment
    params: {
      someParam: 'myValue',
    },
  }}
  playerControlsVisible={playerControlsVisible} // let EL know current player controls visibility
  playerTime={playerTime} // let EL know time of the current playback position, in UTC milliseconds
  playerState={playerState} // let EL know current playback state
  onEaseLiveError={(e: NativeSyntheticEvent<OnEaseLiveErrorData>) => {
    // error from EL. Should disable EL if fatal error
    if (e.nativeEvent.level === 'fatal') {
      setEaseLiveEnabled(false);
    }
  }}
  onEaseLiveStatus={(e: NativeSyntheticEvent<OnEaseLiveStatusData>) => {
    // producer changed program status. Should remove EL if disabled
    if (e.nativeEvent.status === 'disabled') {
      setEaseLiveEnabled(false);
    } else if (!easeLiveEnabled) {
      setEaseLiveEnabled(true);
    }
  }}
  onPlayerControls={(e: NativeSyntheticEvent<OnPlayerControlsData>) => {
    // request from EL to change player controls visibility
    setPlayerControlsVisible(e.nativeEvent.visible);
  }}
/>
)}

{playerControlsVisible && (
  <PlayerControlsView ... />
)}

Audio in the overlay

If the EaseLive overlay should play audio, you may need to configure the audio session to allow mixing.

If you use Expo it has expo-audio module, where it can be configured by:

import { setAudioModeAsync } from 'expo-audio'
setAudioModeAsync({
    interruptionMode: 'mixWithOthers'
})

This option can only work if your player doesn't also override the audio session. If it does, it should instead be configured through your player:

For example if using react-native-video player, it should instead be configured by setting mixWithOthers (iOS) and disableFocus (Android):

<Video mixWithOthers="mix" disableFocus={true} ...