Ease Live Bridge SDK for React Native

Requirements

React Native 0.74.1.

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

• iOS SDK
• Android SDK

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

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 ... />
)}

For a full list of options see the API reference