react-native-twilio-videocall v1.0.1

Twilio Video for React Native

This library provide video call feature for one to one call and one to many also

Platforms:

• iOS
• Android

People using a version < 1.0.1 please move to 1.0.1 since the project changed a lot internally to support the stable Twilio Video version.

Installation (Twillio video call dependencies)

 npm install react-native-twilio-video-webrtc@latest npm install react-native-permissions npm install react-native-twilio-videocall

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

As with iOS, make sure the package is installed:

Then 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.** { *; }

Important Point

For creating Access Token, room id and participant id follow this url : https://console.twilio.com/us1/develop/video/manage/video-credentials?frameUrl=%2Fconsole%2Fvideo%2Fproject%2Ftesting-tools%3Fx-target-region%3Dus1

Steps: 1. Create account in twilio (https://www.twilio.com/login). 2. After login to twilio account then,check the trail amount ,it should be $ 15 for trail pack and after spending all the trail amount ,user have to purchase it. 3. Then follow this link for creating token https://console.twilio.com/us1/develop/video/manage/video-credentials?frameUrl=%2Fconsole%2Fvideo%2Fproject%2Ftesting-tools%3Fx-target-region%3Dus1 4. Enter CLIENT INDENTITY (Participant Name) ,Choose your Room Name (Room Id) and click GENERATE ACCESS TOKEN . 5. If user want to create multiple token then Choose your Room Name (Room Id) will be same for all but CLIENT INDENTITY (Participant Name) should be different.

Usage

import React, { useState } from 'react';
import { LogBox, SafeAreaView, Text, TouchableOpacity, View } from 'react-native';
import MeetingCall from 'react-native-twilio-videocall';

const App = () => {
 const accessToken=''  // Enter access token
 const roomId=''     // Enter room Id
 const participantId=''    // Enter Participant Name 

const [joinStatus,setJoinStatus]=useState(false);

  return (
    <SafeAreaView style={{ flex: 1,justifyContent:'center' }}>
      {!joinStatus ?
   <View style={{width:'100%',
   justifYContent:'center',
   alignItems:'center'}}>
       <TouchableOpacity 
       style={{width:100,height:80,}}
      onPress={()=>setJoinStatus(true)}
      >
        <Text style={{color:'orange',
         fontSize:12, fontWeight:'900',
          textAlign:'center'}}>Join Meeting</Text>
      </TouchableOpacity>
   </View>
    : 
     <MeetingCall
    onEndCall={()=>console.log('Call end')}
    twilioRoomId={roomId}
    twilioToken={accessToken}
    participantId={participantId}
/>
}
      
    </SafeAreaView>
);
}
export default App;