React native wrapper for Jitsi Meet SDK
npm install react-native-avc --save
See the main package and follow the installation process from react-native-jitsi-meet github https://github.com/skrafft/react-native-jitsi-meet
The following component is an example of use:
import React, { useEffect } from 'react';
import { View } from 'react-native';
import JitsiMeet, { JitsiMeetView } from 'react-native-avc';
const VideoCall = () => {
const onConferenceTerminated = (nativeEvent) => {
/* Conference terminated event */
}
const onConferenceJoined = (nativeEvent) => {
/* Conference joined event */
}
const onConferenceWillJoin= (nativeEvent) => {
/* Conference will join event */
}
useEffect(() => {
setTimeout(() => {
const options = {
token: 'String',
audioMuted: false,
audioOnly: false,
videoMuted: false,
subject: 'String',
};
const meetFeatureFlags = {
add-people.enabled: false,
welcomepage.enabled: false
};
const url = 'https://meet.jit.si/deneme'; // can also be only room name and will connect to jitsi meet servers
const userInfo = { displayName: 'User', email: 'user@example.com', avatar: 'https:/gravatar.com/avatar/abc123' };
JitsiMeet.call(url, userInfo, options, meetFeatureFlags);
/* You can also use JitsiMeet.audioCall(url) for audio only call */
/* You can programmatically end the call with JitsiMeet.endCall() */
}, 1000);
}, [])
return (
<View style={{ backgroundColor: 'black', flex: 1 }}>
<JitsiMeetView onConferenceTerminated={onConferenceTerminated} onConferenceJoined={onConferenceJoined} onConferenceWillJoin={onConferenceWillJoin} style={{ flex: 1, height: '100%', width: '100%' }} />
</View>
)
}
export default VideoCall;
You can also check the ExampleApp
Jitsi SDK version used for this package:
- Android (3.10.2)
- IOS (3.10.4)
You can add listeners for the following events:
- onConferenceJoined
- onConferenceTerminated
- onConferenceWillJoin
List of feature flags used in this packge:
- add-people.enabled
- calendar.enabled
- call-integration.enabled
- close-captions.enabled
- help.enabled
- invite.enabled
- ios.recording.enabled
- ios.screensharing.enabled
- android.screensharing.enabled
- live-streaming.enabled
- meeting-password.enabled
- pip.enabled
- reactions.enabled
- security-options.enabled
- recording.enabled
- video-share.enabled
- welcomepage.enabled
After completing the installation process from main package,
1.) In android/app/src/main/AndroidManifest.xml
add these permissions
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" // <--- Add this line if not already existing
...
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
2.) navigate to android/app/build.gradle
and set your minSdkVersion to be at least 24.
After completing the installation process from main package,
1.) Modify your Podfile to have platform :ios, '10.0'
and execute pod install
2.) In Xcode, under Build setting set Enable Bitcode to No
If your app already includes react-native-locale-detector
or react-native-vector-icons
, you must exclude them from the react-native-avc
project implementation with the following code (even if you're app uses autolinking with RN > 0.60):
implementation(project(':react-native-avc')) {
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'
}
- All Options: https://github.com/jitsi/jitsi-meet-release-notes
- SDK Releases Log: https://jitsi.github.io/handbook/docs/dev-guide/mobile-feature-flags