React native wrapper for Jitsi Meet SDK
React native wrapper for Jitsi Meet SDK
npm install react-native-jitsi-meet --save
If you are using React-Native < 0.60, you should use a version < 2.0.0.
For versions higher than 2.0.0, you need to add the following piece of code in your
metro.config.jsfile to avoid conflicts between react-native-jitsi-meet and react-native in metro bundler.
const blacklist = require('metro-config/src/defaults/blacklist');module.exports = { resolver: { blacklistRE: blacklist([ /ios/Pods/JitsiMeetSDK/Frameworks/JitsiMeet.framework/assets/node_modules/react-native/.*/, ]), }, };
Although most of the process is automated, you still have to follow the platform install guide below (iOS and Android) to get this library to work.
The following component is an example of use:
import React from 'react'; import { View } from 'react-native'; import JitsiMeet, { JitsiMeetView } from 'react-native-jitsi-meet';class VideoCall extends React.Component { constructor(props) { super(props); this.onConferenceTerminated = this.onConferenceTerminated.bind(this); this.onConferenceJoined = this.onConferenceJoined.bind(this); this.onConferenceWillJoin = this.onConferenceWillJoin.bind(this); }
componentDidMount() { setTimeout(() => { const url = 'https://your.jitsi.server/roomName'; // can also be only room name and will connect to jitsi meet servers const userInfo = { displayName: 'User', email: '[email protected]', avatar: 'https:/gravatar.com/avatar/abc123' }; JitsiMeet.call(url, userInfo); /* You can also use JitsiMeet.audioCall(url) for audio only call / / You can programmatically end the call with JitsiMeet.endCall() */ }, 1000); }
onConferenceTerminated(nativeEvent) { /* Conference terminated event */ }
onConferenceJoined(nativeEvent) { /* Conference joined event */ }
onConferenceWillJoin(nativeEvent) { /* Conference will join event */ }
render() { return ( ); } }
export default VideoCall;
You can also check the ExampleApp
You can add listeners for the following events: - onConferenceJoined - onConferenceTerminated - onConferenceWillJoin
In your component,
1.) import JitsiMeet and JitsiMeetEvents:
import JitsiMeet, { JitsiMeetEvents } from 'react-native-jitsi-meet';
2.) add the following code:
const initiateVideoCall = () => { JitsiMeet.initialize(); JitsiMeetEvents.addListener('CONFERENCE_LEFT', (data) => { console.log('CONFERENCE_LEFT'); }); setTimeout(() => { JitsiMeet.call(``); }, 1000); };
You can add listeners for the following events: - CONFERENCEJOINED - CONFERENCELEFT - CONFERENCEWILLJOIN
1.) navigate to
/ios//
Info.plistand add the following lines
NSCameraUsageDescription Camera Permission NSMicrophoneUsageDescription Microphone Permission
3.) in
Info.plist, make sure that
UIBackgroundModescontains
voip
1.) Modify your Podfile to have
platform :ios, '10.0'and execute
pod install
Libraries➜
Add Files to [project]
node_modules/react-native-jitsi-meet/ios/RNJitsiMeet.xcodeprojthen
Add
node_modules/react-native-jitsi-meet/ios/WebRTC.frameworkand
node_modules/react-native-jitsi-meet/ios/JitsiMeet.frameworkto the Frameworks folder
node_modules/react-native-jitsi-meet/ios/JitsiMeet.storyboardin the same folder as AppDelegate.m
UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window.rootViewController = rootViewController;
with this one
UIViewController *rootViewController = [UIViewController new]; UINavigationController *navigationController = [[UINavigationController alloc]initWithRootViewController:rootViewController]; navigationController.navigationBarHidden = YES; rootViewController.view = rootView; self.window.rootViewController = navigationController;
This will create a navigation controller to be able to navigate between the Jitsi component and your react native screens.
2-1.) select
Build Settings, find
Search Paths
Framework Search Pathsand
Library Search Paths
$(SRCROOT)/../node_modules/react-native-jitsi-meet/ioswith
recursive
3-1.) go to
Generaltab
Deployment Targetto
8.0
WebRTC.frameworkand
JitsiMeet.frameworkin
Embedded Binaries
Build Phasestab, open
Link Binary With Libraries
libRNJitsiMeet.a
WebRTC.frameworkand
JitsiMeet.frameworklinked
AVFoundation.framework AudioToolbox.framework CoreGraphics.framework GLKit.framework CoreAudio.framework CoreVideo.framework VideoToolbox.framework libc.tbd libsqlite3.tbd libstdc++.tbd libc++.tbd
Build settingset
Dead Code Strippingto
No, set
Enable Bitcodeto
Noand
Always Embed Swift Standard Librariesto
Yes
echo "Target architectures: $ARCHS"APP_PATH="${TARGET_BUILD_DIR}/${WRAPPER_NAME}"
find "$APP_PATH" -name '*.framework' -type d | while read -r FRAMEWORK do FRAMEWORK_EXECUTABLE_NAME=$(defaults read "$FRAMEWORK/Info.plist" CFBundleExecutable) FRAMEWORK_EXECUTABLE_PATH="$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME" echo "Executable is $FRAMEWORK_EXECUTABLE_PATH" echo $(lipo -info "$FRAMEWORK_EXECUTABLE_PATH")
FRAMEWORK_TMP_PATH="$FRAMEWORK_EXECUTABLE_PATH-tmp"
remove simulator's archs if location is not simulator's directory
case "${TARGET_BUILD_DIR}" in *"iphonesimulator") echo "No need to remove archs" ;; *) if $(lipo "$FRAMEWORK_EXECUTABLE_PATH" -verify_arch "i386") ; then lipo -output "$FRAMEWORK_TMP_PATH" -remove "i386" "$FRAMEWORK_EXECUTABLE_PATH" echo "i386 architecture removed" rm "$FRAMEWORK_EXECUTABLE_PATH" mv "$FRAMEWORK_TMP_PATH" "$FRAMEWORK_EXECUTABLE_PATH" fi if $(lipo "$FRAMEWORK_EXECUTABLE_PATH" -verify_arch "x86_64") ; then lipo -output "$FRAMEWORK_TMP_PATH" -remove "x86_64" "$FRAMEWORK_EXECUTABLE_PATH" echo "x86_64 architecture removed" rm "$FRAMEWORK_EXECUTABLE_PATH" mv "$FRAMEWORK_TMP_PATH" "$FRAMEWORK_EXECUTABLE_PATH" fi ;; esac
echo "Completed for executable $FRAMEWORK_EXECUTABLE_PATH" echo $
done
This will run a script everytime you build to clean the unwanted architecture
1.) In
android/app/build.gradle, add/replace the following lines:
project.ext.react = [ entryFile: "index.js", bundleAssetName: "app.bundle", ]
2.) In
android/app/src/main/java/com/xxx/MainApplication.javaadd/replace the following methods:
import androidx.annotation.Nullable; //3.) In
android/build.gradle, add the following codeallprojects { repositories { mavenLocal() jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } maven { url "https://maven.google.com" } maven { //Android Additional Install for RN < 0.60
1.) In
android/app/src/main/AndroidManifest.xmladd these permissions
2.) In the
section ofandroid/app/src/main/AndroidManifest.xml, addxml3.) In
android/settings.gradle, include react-native-jitsi-meet modulegradle include ':react-native-jitsi-meet' project(':react-native-jitsi-meet').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-jitsi-meet/android')4.) In
android/app/build.gradle, add react-native-jitsi-meet to dependenciesgradle android { ... packagingOptions { pickFirst 'lib/x86/libc++_shared.so' pickFirst 'lib/x86/libjsc.so' pickFirst 'lib/x86_64/libjsc.so' pickFirst 'lib/arm64-v8a/libjsc.so' pickFirst 'lib/arm64-v8a/libc++_shared.so' pickFirst 'lib/x86_64/libc++_shared.so' pickFirst 'lib/armeabi-v7a/libc++_shared.so' pickFirst 'lib/armeabi-v7a/libjsc.so' } } dependencies { ... implementation(project(':react-native-jitsi-meet')) }and set your minSdkVersion to be at least 24.
5.) In
android/app/src/main/java/com/xxx/MainApplication.javaimport com.reactnativejitsimeet.RNJitsiMeetPackage; // getPackages() { return Arrays.asList( new MainReactPackage(), new RNJitsiMeetPackage() //Side-note
If your app already includes
react-native-locale-detectororreact-native-vector-icons, you must exclude them from thereact-native-jitsi-meetproject implementation with the following code (even if you're app uses autolinking with RN > 0.60):implementation(project(':react-native-jitsi-meet')) { exclude group: 'com.facebook.react',module:'react-native-locale-detector' exclude group: 'com.facebook.react',module:'react-native-vector-icons' // Un-comment below if using hermes //exclude group: 'com.facebook',module:'hermes' // Un-comment any packages below that you have added to your project to prevent `duplicate_classes` errors //exclude group: 'com.facebook.react',module:'react-native-community-async-storage' //exclude group: 'com.facebook.react',module:'react-native-community_netinfo' //exclude group: 'com.facebook.react',module:'react-native-svg' //exclude group: 'com.facebook.react',module:'react-native-fetch-blob' //exclude group: 'com.facebook.react',module:'react-native-webview' //exclude group: 'com.facebook.react',module:'react-native-linear-gradient' //exclude group: 'com.facebook.react',module:'react-native-sound' }