Gathering detailed insights and metrics for react-native-twilio-video-webrtc
Gathering detailed insights and metrics for react-native-twilio-video-webrtc
Gathering detailed insights and metrics for react-native-twilio-video-webrtc
Gathering detailed insights and metrics for react-native-twilio-video-webrtc
react-native-twilio-video-webrtc-withandroid
Twilio Video WebRTC for React Native with Android support. Branched From react-native-twilio-video-webrtc.
ir-react-native-custom-twilio-video-webrtc
twilio video webrtc for react native with customizing options
@wrethink/react-native-twilio-video-webrtc-wtk
Twilio Video WebRTC for React Native.
react-native-twilio-video-webrtc-pru
Twilio Video WebRTC for React Native.
npm install react-native-twilio-video-webrtc
Typescript
Module System
Node Version
NPM Version
32.1
Supply Chain
56.6
Quality
70.5
Maintenance
50
Vulnerability
89.1
License
Total
1,139,220
Last Day
202
Last Week
9,737
Last Month
47,164
Last Year
561,245
609 Stars
304 Commits
403 Forks
25 Watching
14 Branches
70 Contributors
Updated on 29 Nov 2024
Minified
Minified + Gzipped
Java (50.25%)
JavaScript (23.84%)
Objective-C (22.25%)
TypeScript (1.85%)
Starlark (1.06%)
Ruby (0.76%)
Cumulative downloads
Total Downloads
Last day
98%
202
Compared to previous day
Last week
-15%
9,737
Compared to previous week
Last month
-13.7%
47,164
Compared to previous month
Last year
43.2%
561,245
Compared to previous year
Platforms:
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.
1yarn add react-native-twilio-video-webrtc
1npm install react-native-twilio-video-webrtc --save
To use this library with Expo
we recommend using our config plugin that you can configure like the following example:
1{ 2 "name": "my app", 3 "plugins": [ 4 [ 5 "react-native-twilio-video-webrtc", 6 { 7 "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera", 8 "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone" 9 } 10 ] 11 ] 12}
Also you will need to install expo-build-properties
package:
1npx expo install expo-build-properties
The plugin support the following properties:
cameraPermission
: Specifies the text to show when requesting the camera permission to the user.
microphonePermission
: Specifies the text to show when requesting the microphone permission to the user.
1pod '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.
1pod install
1pod 'TwilioVideo'
1pod install
Libraries
directory fromnode_modules/react-native-twilio-video-webrtc/ios/RNTwilioVideoWebRTC.xcodeproj
Add libRNTwilioVideoWebRTC.a
to your XCode project target's Linked 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
Be sure to increment your iOS Deployment Target to at least iOS 11 through XCode and your Podfile
contains
platform :ios, '11.0'
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>
TwilioVideo version 1.3.8 (latest) has the following know issues.
As with iOS, make sure the package is installed:
1yarn 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')
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:
1import com.twiliorn.library.TwilioPackage;
Then update the getPackages()
method:
1 protected List<ReactPackage> getPackages() { 2 return Arrays.<ReactPackage>asList( 3 ... 4 new TwilioPackage() 5 ); 6 }
For most applications, you'll want to add camera and audio permissions to your AndroidManifest.xml
file:
1 <uses-permission android:name="android.permission.CAMERA" /> 2 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> 3 <uses-permission android:name="android.permission.RECORD_AUDIO" /> 4 <uses-feature android:name="android.hardware.camera" android:required="false" /> 5 <uses-feature android:name="android.hardware.camera.autofocus" android:required="false" /> 6 <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.
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.** { *; }
You can see the documentation here.
We have three important components to understand:
1import { 2 TwilioVideo, 3 TwilioVideoLocalView, 4 TwilioVideoParticipantView, 5} from "react-native-twilio-video-webrtc";
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 viewHere you can see a complete example of a simple application that uses almost all the apis:
1import React, { Component, useRef } from "react"; 2import { 3 TwilioVideoLocalView, 4 TwilioVideoParticipantView, 5 TwilioVideo, 6} from "react-native-twilio-video-webrtc"; 7 8const Example = (props) => { 9 const [isAudioEnabled, setIsAudioEnabled] = useState(true); 10 const [isVideoEnabled, setIsVideoEnabled] = useState(true); 11 const [status, setStatus] = useState("disconnected"); 12 const [participants, setParticipants] = useState(new Map()); 13 const [videoTracks, setVideoTracks] = useState(new Map()); 14 const [token, setToken] = useState(""); 15 const twilioRef = useRef(null); 16 17 const _onConnectButtonPress = () => { 18 twilioRef.current.connect({ accessToken: token }); 19 setStatus("connecting"); 20 }; 21 22 const _onEndButtonPress = () => { 23 twilioRef.current.disconnect(); 24 }; 25 26 const _onMuteButtonPress = () => { 27 twilioRef.current 28 .setLocalAudioEnabled(!isAudioEnabled) 29 .then((isEnabled) => setIsAudioEnabled(isEnabled)); 30 }; 31 32 const _onFlipButtonPress = () => { 33 twilioRef.current.flipCamera(); 34 }; 35 36 const _onRoomDidConnect = ({ roomName, error }) => { 37 console.log("onRoomDidConnect: ", roomName); 38 39 setStatus("connected"); 40 }; 41 42 const _onRoomDidDisconnect = ({ roomName, error }) => { 43 console.log("[Disconnect]ERROR: ", error); 44 45 setStatus("disconnected"); 46 }; 47 48 const _onRoomDidFailToConnect = (error) => { 49 console.log("[FailToConnect]ERROR: ", error); 50 51 setStatus("disconnected"); 52 }; 53 54 const _onParticipantAddedVideoTrack = ({ participant, track }) => { 55 console.log("onParticipantAddedVideoTrack: ", participant, track); 56 57 setVideoTracks((originalVideoTracks) => { 58 originalVideoTracks.set(track.trackSid, { 59 participantSid: participant.sid, 60 videoTrackSid: track.trackSid, 61 }); 62 return new Map(originalVideoTracks); 63 }); 64 }; 65 66 const _onParticipantRemovedVideoTrack = ({ participant, track }) => { 67 console.log("onParticipantRemovedVideoTrack: ", participant, track); 68 69 setVideoTracks((originalVideoTracks) => { 70 originalVideoTracks.delete(track.trackSid); 71 return new Map(originalVideoTracks); 72 }); 73 }; 74 75 return ( 76 <View style={styles.container}> 77 {status === "disconnected" && ( 78 <View> 79 <Text style={styles.welcome}>React Native Twilio Video</Text> 80 <TextInput 81 style={styles.input} 82 autoCapitalize="none" 83 value={token} 84 onChangeText={(text) => setToken(text)} 85 ></TextInput> 86 <Button 87 title="Connect" 88 style={styles.button} 89 onPress={_onConnectButtonPress} 90 ></Button> 91 </View> 92 )} 93 94 {(status === "connected" || status === "connecting") && ( 95 <View style={styles.callContainer}> 96 {status === "connected" && ( 97 <View style={styles.remoteGrid}> 98 {Array.from(videoTracks, ([trackSid, trackIdentifier]) => { 99 return ( 100 <TwilioVideoParticipantView 101 style={styles.remoteVideo} 102 key={trackSid} 103 trackIdentifier={trackIdentifier} 104 /> 105 ); 106 })} 107 </View> 108 )} 109 <View style={styles.optionsContainer}> 110 <TouchableOpacity 111 style={styles.optionButton} 112 onPress={_onEndButtonPress} 113 > 114 <Text style={{ fontSize: 12 }}>End</Text> 115 </TouchableOpacity> 116 <TouchableOpacity 117 style={styles.optionButton} 118 onPress={_onMuteButtonPress} 119 > 120 <Text style={{ fontSize: 12 }}> 121 {isAudioEnabled ? "Mute" : "Unmute"} 122 </Text> 123 </TouchableOpacity> 124 <TouchableOpacity 125 style={styles.optionButton} 126 onPress={_onFlipButtonPress} 127 > 128 <Text style={{ fontSize: 12 }}>Flip</Text> 129 </TouchableOpacity> 130 <TwilioVideoLocalView enabled={true} style={styles.localVideo} /> 131 </View> 132 </View> 133 )} 134 135 <TwilioVideo 136 ref={twilioRef} 137 onRoomDidConnect={_onRoomDidConnect} 138 onRoomDidDisconnect={_onRoomDidDisconnect} 139 onRoomDidFailToConnect={_onRoomDidFailToConnect} 140 onParticipantAddedVideoTrack={_onParticipantAddedVideoTrack} 141 onParticipantRemovedVideoTrack={_onParticipantRemovedVideoTrack} 142 /> 143 </View> 144 ); 145}; 146 147AppRegistry.registerComponent("Example", () => Example);
To run the example application:
cd Example
yarn install
cd ios && pod install
open Example.xcworkspace
s.dependency 'TwilioVideo', '~> 2.2.0'
Both participants and tracks are uniquely identified by their sid
/trackSid
field.
The trackId
field no longer exists and should be replaced by trackSid
. Commensurate with this change,
participant views now expect participantSid
and videoTrackSid
keys in the trackIdentity
prop (instead of
identity
and trackId
).
Make sure you're listening to participant events via onParticipant{Added/Removed}VideoTrack
rather than onParticipant{Enabled/Disabled}Track
.
The MIT License (MIT)
Copyright (c) 2016-2024 Gaston Morixe gaston@gastonmorixe.com
Full License text you must include and attribute in your project: LICENSE.
Compliance Requirement: All users must include the full text of the MIT License, including the copyright notice and permission notice, in any copies or substantial portions of the Software.
Commercial Use: Commercial entities using this software please ensure compliance with the license terms and proper attribution.
Consequences of Violation: Failure to comply with the MIT License constitutes copyright infringement and may result in legal action, including injunctions and monetary damages. Please ensure to respect the open source project.
For any questions regarding licensing or to request additional permissions, please contact the author.
No vulnerabilities found.
Reason
11 commit(s) and 6 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
binaries present in source code
Details
Reason
Found 6/22 approved changesets -- score normalized to 2
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
41 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-12-02
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More