react-native-twilio-videocall
v1.0.1
Published
Twilio video call
Downloads
7
Readme
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)
- 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.
- Install Pods with
pod install
Option B: Install without CocoaPods (manual approach)
- Add the Twilio dependency to your Podfile
pod 'TwilioVideo'
- Install Pods with
pod install
- Add the XCode project to your own XCode project's
Libraries
directory from
node_modules/react-native-twilio-video-webrtc/ios/RNTwilioVideoWebRTC.xcodeproj
Add
libRNTwilioVideoWebRTC.a
to your XCode project target'sLinked Frameworks and Libraries
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:
- Create account in twilio (https://www.twilio.com/login).
- 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.
- 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
- Enter CLIENT INDENTITY (Participant Name) ,Choose your Room Name (Room Id) and click GENERATE ACCESS TOKEN .
- 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;