Twilio Video (WebRTC) for React Native
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 TwilioVideo version.
Installation
- react-native >= 0.40.0: install react-native-twilio-video-webrtc@1.0.1
- react-native < 0.40.0: install react-native-twilio-video-webrtc@1.0.0
iOS
CocoaPods
Add node package using yarn/NPM:
yarn add https://github.com/blackuy/react-native-twilio-video-webrtc
Add the plugin dependency to your Podfile, pointing at the path where NPM installed it:
pod 'react-native-twilio-video-webrtc', path: '../node_modules/react-native-twilio-video-webrtc'
You will need to point your React code the path where NPM installed it too. If you didn't do it add this to your Pofile:
pod 'Yoga', path: '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'pod 'React', path: '../node_modules/react-native'
Install Pods:
pod install
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:
yarn add https://github.com/blackuy/react-native-twilio-video-webrtc
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')
Now you're ready to load the package in MainApplication.java
. In the imports section, add this:
Then update the getPackages()
method:
protected List<ReactPackage> { return Arrays.<ReactPackage>; }
Permissions
For most applications, you'll want to add camera and audio permissions to your AndroidManifest.xml
file:
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.
Docs
You can see the documentation here.
Usage
We have three important components to understand:
TwilioVideo
/ is responsible for connecting to rooms, events delivery and camera/audio.TwilioVideoLocalView
/ is responsible local camera feed viewTwilioVideoParticipantView
/ is responsible remote peer's camera feed view
Here you can see a complete example of a simple application that uses almost all the apis:
; state = isAudioEnabled: true isVideoEnabled: true status: 'disconnected' participants: videoTracks: roomName: '' token: '' { thisrefstwilioVideo this } { thisrefstwilioVideo } { thisrefstwilioVideo } { console this } { console const videoTracks = thisstatevideoTracks videoTracks this } { return <View style=stylescontainer> thisstatestatus === 'disconnected' && <View> <Text style=styleswelcome> React Native Twilio Video </Text> <TextInput style=stylesinput autoCapitalize='none' value=thisstateroomName onChangeText= this> </TextInput> <TextInput style=stylesinput autoCapitalize='none' value=thisstatetoken onChangeText= this> </TextInput> <Button title="Connect" style=stylesbutton onPress=this_onConnectButtonPress> </Button> </View> thisstatestatus === 'connected' || thisstatestatus === 'connecting' && <View style=stylescallContainer> thisstatestatus === 'connected' && <View style=stylesremoteGrid> Object </View> <View style=stylesoptionsContainer> <TouchableOpacity style=stylesoptionButton onPress=this_onEndButtonPress> <Text style=fontSize: 12>End</Text> </TouchableOpacity> <TouchableOpacity style=stylesoptionButton onPress=this_onMuteButtonPress> <Text style=fontSize: 12> thisstateisAudioEnabled ? "Mute" : "Unmute" </Text> </TouchableOpacity> <TouchableOpacity style=stylesoptionButton onPress=this_onFlipButtonPress> <Text style=fontSize: 12>Flip</Text> </TouchableOpacity> <TwilioVideoLocalView enabled=true style=styleslocalVideo /> </View> </View> <TwilioVideo ref="twilioVideo" onRoomDidConnect= this_onRoomDidConnect onRoomDidDisconnect= this_onRoomDidDisconnect onRoomDidFailToConnect= this_onRoomDidFailToConnect onParticipantAddedVideoTrack= this_onParticipantAddedVideoTrack onParticipantRemovedVideoTrack= thisonParticipantRemovedVideoTrack /> </View> ; } AppRegistry;
Run the Example Application
To run the example application:
- Move to the Example directory:
cd Example
- Install node dependencies:
yarn install
- Install objective-c dependencies:
cd ios && pod install
- Open the xcworkspace and run the app:
open Example.xcworkspace
Contact
- Martín Fernández fmartin91@gmail.com
- Gaston Morixe gaston@black.uy