naluri-rn-video-sdk

Naluri React Native VideoSDK

Installation

Option A: yarn

yarn add https://github.com/naluri-hidup/naluri-rn-video-sdk

Option B: yarn

npm install https://github.com/naluri-hidup/naluri-rn-video-sdk --save

Peer Dependancy

Naluri-rn-video-sdk requires this dependency to run smoothly.

react-native-twilio-video-webrtc

iOS

Option A: Install with CocoaPods (recommended)

1. Add this package to your Podfile

pod 'react-native-twilio-video-webrtc', path: '../node_modules/react-native-twilio-video-webrtc'

Note that this will automatically pull in the appropriate version of the underlying TwilioVideo pod.

2. Install Pods with

pod install

Option B: Install without CocoaPods (manual approach)

1. Add the Twilio dependency to your Podfile

pod 'TwilioVideo'

2. Install Pods with

pod install

3. Add the XCode project to your own XCode project's Libraries directory from

node_modules/react-native-twilio-video-webrtc/ios/RNTwilioVideoWebRTC.xcodeproj

4. Add libRNTwilioVideoWebRTC.a to your XCode project target's Linked Frameworks and Libraries

5. Update Build Settings

Find Search Paths and add $(SRCROOT)/../node_modules/react-native-twilio-video-webrtc/ios with recursive to Framework Search Paths and Library Search Paths

Post install

Be sure to increment your iOS Deployment Target to at least iOS 11 through XCode and your Podfile contains

platform :ios, '11.0'

Permissions

To enable camera usage and microphone usage you will need to add the following entries to your Info.plist file:

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

Android

Add the library to your settings.gradle file:

include ':react-native-twilio-video-webrtc'
project(':react-native-twilio-video-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-twilio-video-webrtc/android')

And include the library in your dependencies in android/app/build.gradle: (if using gradle 4 or lower, replace implementation with compile below)

dependencies {
    .....
    .....
    .....
    implementation project(':react-native-twilio-video-webrtc')
}

You will also need to update this file so that you compile with java 8 features:

android {
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}

Now you're ready to load the package in MainApplication.java. In the imports section, add this:

import com.twiliorn.library.TwilioPackage;

Then update the getPackages() method:

    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            ...
            new TwilioPackage()
        );
    }

Permissions

For most applications, you'll want to add camera and audio permissions to your AndroidManifest.xml file:

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-feature android:name="android.hardware.camera" android:required="false" />
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
    <uses-feature android:name="android.hardware.microphone" android:required="false" />

Newer versions of Android have a different permissions model. You will need to use the PermissionsAndroid class in react-native in order to request the CAMERA and RECORD_AUDIO permissions.

Additional Tips

Under default settings, the Android build will fail if the total number of symbols exceeds a certain threshold. If you should encounter this issue when adding this library (e.g., if your build fails with com.android.dex.DexIndexOverflowException), you can turn on jumbo mode by editing your app/build.gradle:

android {
  ...
  dexOptions {
    jumboMode true
  }
}

If you are using proguard (very likely), you will also need to ensure that the symbols needed by this library are not stripped. To do that, add these two lines to proguard-rules.pro:

  -keep class com.twilio.** { *; }
  -keep class tvi.webrtc.** { *; }

Usage

We have three important components to understand:

import { VideoComponent } from 'naluri-rn-video-sdk';

• VideoComponent.ref / is responsible for connecting to rooms, events delivery and camera/audio.
• VideoComponent / is responsible local camera & remote peer's camera feed view

Here you can see a complete example of a simple application that uses almost all the apis:

import {
  PermissionsAndroid,
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { VideoComponent } from 'naluri-rn-video-sdk';
import { RoomEventCb } from 'react-native-twilio-video-webrtc';
import { VideoComponentScreenProps } from 'lib/typescript/types/videos';

export default function App() {
  const [isAudioEnabled, setIsAudioEnabled] = React.useState < boolean > false;
  const [isCameraEnabled, setIsCameraEnabled] = React.useState < boolean > true;
  const Video = React.useRef < Partial < VideoComponentScreenProps >> null;

  React.useEffect(() => {
    const permissionGrant = async () => {
      if (Platform.OS === 'android') {
        await _requestAudioPermission();
        await _requestCameraPermission();
      }
    };
    permissionGrant();
  }, []);

  /**
   * Video Room connection callback.
   */
  const _onRoomDidConnect: RoomEventCb = ({
    participants,
    localParticipant,
  }) => {
    console.log('connected', participants, localParticipant);
  };

  const _onRoomDidDisconnect = ({ error }: { error: any }) => {
    console.log('_onRoomDidDisconnect ERROR: ', error);
  };

  const _onRoomDidFailToConnect = (error: any) => {
    console.log('_onRoomDidFailToConnect ERROR: ', error);
  };

  /**
   * Video Control callback.
   */
  const _onConnectButtonPress = () => {
    Video.current?.connect?.();
  };

  const _onEndButtonPress = () => {
    Video.current?.disconnect?.();
  };

  const _onMuteButtonPress = () => {
    Video.current?.onMute?.();
    setIsAudioEnabled(!isAudioEnabled);
  };

  const _onFlipButtonPress = () => {
    Video.current?.onVideoFlip?.();
  };

  const _onToggleVideo = () => {
    setIsCameraEnabled(!isCameraEnabled);
    Video.current?.onToggleLocalVideo?.();
  };

  /**
   * Permission request handle for Android
   */
  const _requestAudioPermission = () => {
    return PermissionsAndroid.request(
      // @ts-expect-error TS(2345): Argument of type 'Permission | undefined' is not a... Remove this comment to see the full error message
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
        title: 'Need permission to access microphone',
        message:
          'To run this demo we need permission to access your microphone',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      }
    );
  };

  const _requestCameraPermission = () => {
    return PermissionsAndroid.request(
      // @ts-expect-error TS(2345): Argument of type 'Permission | undefined' is not a... Remove this comment to see the full error message
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: 'Need permission to access camera',
        message: 'To run this demo we need permission to access your camera',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      }
    );
  };

  return (
    <View style={styles.container}>
      <VideoComponent
        ref={Video}
        room={room}
        token={accessToken}
        onRoomDidConnect={_onRoomDidConnect}
        onRoomDidDisconnect={_onRoomDidDisconnect}
        onRoomDidFailToConnect={_onRoomDidFailToConnect}
      />
      <View style={styles.optionsContainer}>
        <TouchableOpacity
          style={styles.optionButton}
          onPress={_onEndButtonPress}
        >
          <Text style={styles.font}>End</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.optionButton}
          onPress={_onMuteButtonPress}
        >
          <Text style={styles.font}>{isAudioEnabled ? 'Mute' : 'Unmute'}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.optionButton}
          onPress={_onFlipButtonPress}
        >
          <Text style={styles.font}>Flip</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.optionButton}
          onPress={_onConnectButtonPress}
        >
          <Text style={styles.font}>Connect</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.optionButton} onPress={_onToggleVideo}>
          <Text style={styles.font}>
            {isCameraEnabled ? 'Off camera' : 'On camera'}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

License

MIT

Made with create-react-native-library