Read_me_npm_test NPM

React Native Zoom Voice Call

Package for receive voice calls on React Native using Zoom Video SDK .

Installation

Install rn-zoom-voice-call:

npm install rn-zoom-voice-call

Go to your ios folder and run:

pod install

Zoom Integration

Download Zoom Video SDK

1- Create a Zoom Account.

2- Login to Zoom Developer Platform and then click Build App.

3- Click "View Here" on the page that opens and enter the company name in the information tab.

4- Download Android and iOS SDK packages in the download tab. These will be used for Android and iOS when integrating the SDK into app.

Zoom SDK Integration

In your React Native project, install the React Native Video SDK.

npm install @zoom/react-native-videosdk

Go to your ios folder and run:

pod install

After package installation, the app will give an error. Since the React Native package is a wrapper, you must then add the iOS and/or Android Video SDK to your project so the wrapper can access it.

Android

1- Copy the mobilertc folder in the Sample&Libs/mobilertc-android/ directory of the downloaded library to the android folder in your project.

2- Open settings.gradle and include mobilertc in the project.

3- In android/app/build.gradle add mobilertc as a dependency for the project.

dependencies {
    ...
    implementation 'androidx.security:security-crypto:1.1.0-alpha02'
    implementation 'com.google.crypto.tink:tink-android:1.5.0'
    implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.github.chrisbanes:PhotoView:2.3.0'
    implementation project(':mobilertc')
    ...
}

4- Add the following to the android section of android/app/build.gradle.

android {
    ...
    packagingOptions {
         pickFirst '**/*.so'
     }
    ...
}

5- Add Required Permissions to the AndroidManifest.xml.

<uses-permission android:name="android.permission.RECORD_AUDIO" />

Android Troubleshooting

1- The error log: `zoom_react-native-videosdk:compileDebugJavaWithJavac`

Add the following to the node_modules/@zoom/react-native-videosdk/android/src/main/java/com/reactnativezoomvideosdk/RNZoomVideoSdkModule.java

...
import us.zoom.sdk.ZoomVideoSDKPhoneFailedReason;
import us.zoom.sdk.ZoomVideoSDKPhoneStatus;
..

public class RNZoomVideoSdkModule extends ReactContextBaseJavaModule implements ZoomVideoSDKDelegate, LifecycleEventListener {
...
...
  @Override
  public void onInviteByPhoneStatus(ZoomVideoSDKPhoneStatus zoomVideoSDKPhoneStatus, ZoomVideoSDKPhoneFailedReason zoomVideoSDKPhoneFailedReason) { 
  }
...
}

2- The error log: `java.lang.OutOfMemoryError`

Add the following to the gradle.properties.

org.gradle.jvmargs=-Xmx4096m -XX:MaxPermSize=4096m -XX:+HeapDumpOnOutOfMemoryError
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.configureondemand=true

iOS

1- Open your project in Xcode and select the current target. Set iOS deployment target to iOS 8.0 or later.

2- Copy the ZoomVideoSDK.xcframework in the Sample&Libs/libs directory of the downloaded library into your Xcode project folder.

3- Include Video SDK in the project under Embedded Binaries.

4- Add Required Permissions to the Info.plist

<key>NSMicrophoneUsageDescription</key>
<string></string>

5- Set "Enable Bitcode" in Build Settings > Build Options to No

Usage

Note: Don't forget to ask for microphone permission at runtime before call starts. You can use react-native-permissions package for this.

1- For Zoom SDK wrap your application with ZoomVideoSdkProvider and set the required configuration properties.

App.js

2- Import the ZoomCall and navigationRef from the package to the main navigation. Add ZoomCall as a component to the navigator and add navigationRef as a ref to the NavigationContainer.

3- Now you can receive Zoom call from any screen. Specify a screen and import the navigate from the package and get necessary parameters for Zoom with a notification on that screen. Send the parameters to the ZoomCall component with the params key.

Send the following parameters for Zoom to your application with a notification and your voice call will begin.

callerName: The name that will appear on the screen when the call starts.

token: Token generated by the initiator of the Zoom.

channel: Zoom session name determined by the initiator who started the meeting.

mainScreen: Any screen name in navigation to return to after completing the call.

4 years ago

4 years ago

4 years ago