Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
react-native-twilio-video-webrtc
Advanced tools
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.
yarn add react-native-twilio-video-webrtc
npm 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:
{
"name": "my app",
"plugins": [
[
"react-native-twilio-video-webrtc",
{
"cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
"microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone"
}
]
]
}
Also you will need to install expo-build-properties
package:
npx 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.
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.
pod install
pod 'TwilioVideo'
pod 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:
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')
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()
);
}
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.
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:
import {
TwilioVideo,
TwilioVideoLocalView,
TwilioVideoParticipantView,
} 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:
import React, { Component, useRef } from "react";
import {
TwilioVideoLocalView,
TwilioVideoParticipantView,
TwilioVideo,
} from "react-native-twilio-video-webrtc";
const Example = (props) => {
const [isAudioEnabled, setIsAudioEnabled] = useState(true);
const [isVideoEnabled, setIsVideoEnabled] = useState(true);
const [status, setStatus] = useState("disconnected");
const [participants, setParticipants] = useState(new Map());
const [videoTracks, setVideoTracks] = useState(new Map());
const [token, setToken] = useState("");
const twilioRef = useRef(null);
const _onConnectButtonPress = () => {
twilioRef.current.connect({ accessToken: token });
setStatus("connecting");
};
const _onEndButtonPress = () => {
twilioRef.current.disconnect();
};
const _onMuteButtonPress = () => {
twilioRef.current
.setLocalAudioEnabled(!isAudioEnabled)
.then((isEnabled) => setIsAudioEnabled(isEnabled));
};
const _onFlipButtonPress = () => {
twilioRef.current.flipCamera();
};
const _onRoomDidConnect = ({ roomName, error }) => {
console.log("onRoomDidConnect: ", roomName);
setStatus("connected");
};
const _onRoomDidDisconnect = ({ roomName, error }) => {
console.log("[Disconnect]ERROR: ", error);
setStatus("disconnected");
};
const _onRoomDidFailToConnect = (error) => {
console.log("[FailToConnect]ERROR: ", error);
setStatus("disconnected");
};
const _onParticipantAddedVideoTrack = ({ participant, track }) => {
console.log("onParticipantAddedVideoTrack: ", participant, track);
setVideoTracks((originalVideoTracks) => {
originalVideoTracks.set(track.trackSid, {
participantSid: participant.sid,
videoTrackSid: track.trackSid,
});
return new Map(originalVideoTracks);
});
};
const _onParticipantRemovedVideoTrack = ({ participant, track }) => {
console.log("onParticipantRemovedVideoTrack: ", participant, track);
setVideoTracks((originalVideoTracks) => {
originalVideoTracks.delete(track.trackSid);
return new Map(originalVideoTracks);
});
};
return (
<View style={styles.container}>
{status === "disconnected" && (
<View>
<Text style={styles.welcome}>React Native Twilio Video</Text>
<TextInput
style={styles.input}
autoCapitalize="none"
value={token}
onChangeText={(text) => setToken(text)}
></TextInput>
<Button
title="Connect"
style={styles.button}
onPress={_onConnectButtonPress}
></Button>
</View>
)}
{(status === "connected" || status === "connecting") && (
<View style={styles.callContainer}>
{status === "connected" && (
<View style={styles.remoteGrid}>
{Array.from(videoTracks, ([trackSid, trackIdentifier]) => {
return (
<TwilioVideoParticipantView
style={styles.remoteVideo}
key={trackSid}
trackIdentifier={trackIdentifier}
/>
);
})}
</View>
)}
<View style={styles.optionsContainer}>
<TouchableOpacity
style={styles.optionButton}
onPress={_onEndButtonPress}
>
<Text style={{ fontSize: 12 }}>End</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.optionButton}
onPress={_onMuteButtonPress}
>
<Text style={{ fontSize: 12 }}>
{isAudioEnabled ? "Mute" : "Unmute"}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.optionButton}
onPress={_onFlipButtonPress}
>
<Text style={{ fontSize: 12 }}>Flip</Text>
</TouchableOpacity>
<TwilioVideoLocalView enabled={true} style={styles.localVideo} />
</View>
</View>
)}
<TwilioVideo
ref={twilioRef}
onRoomDidConnect={_onRoomDidConnect}
onRoomDidDisconnect={_onRoomDidDisconnect}
onRoomDidFailToConnect={_onRoomDidFailToConnect}
onParticipantAddedVideoTrack={_onParticipantAddedVideoTrack}
onParticipantRemovedVideoTrack={_onParticipantRemovedVideoTrack}
/>
</View>
);
};
AppRegistry.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.
FAQs
Twilio Video WebRTC for React Native.
We found that react-native-twilio-video-webrtc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.