react-native-avc

React native wrapper for Jitsi Meet SDK

Installation:

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

Example

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: '[email protected]', 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

Jitsi SDK version used for this package:

• Android (3.10.2)
• IOS (3.10.4)

Events

You can add listeners for the following events:

• onConferenceJoined
• onConferenceTerminated
• onConferenceWillJoin

Feature Flags

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

Android Configuration

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.

IOS Configuration

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

Side-note

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'
    }

Useful Links

• All Options: https://github.com/jitsi/jitsi-meet-release-notes
• SDK Releases Log: https://jitsi.github.io/handbook/docs/dev-guide/mobile-feature-flags