Integrating Zoom SDK in a React Native App

Video conferencing has become an essential part of modern applications, and Zoom is one of the most widely used platforms. In this guide, we'll walk through how to integrate Zoom SDK into a React Native app, allowing users to join meetings seamlessly.

📌 Prerequisites

• Before we start, ensure you have the following:
• Node.js installed on your system
• A React Native project set up
• A Zoom Developer Account (Sign up here)

🔑 Obtain Zoom SDK Credentials

To integrate Zoom SDK, you'll need an SDK Key and SDK Secret. You can obtain these from your Zoom App Marketplace:

const SDK_KEY = '';
const SDK_SECRET = '';

⚠️ Note: Never expose your SDK credentials in public repositories or hardcode them directly in your app. Use environment variables for security.

🛠 Installing Dependencies

Install the react-native-zoom-us package to integrate Zoom SDK:

npm install react-native-zoom-us

Also, install jsrsasign to generate JWT tokens:

npm install jsrsasign

🔄 Implementing Zoom Meeting Functionality

Now, let's create a function to initialize the Zoom SDK and join a meeting.

1️⃣ Generate a JWT Token

Zoom requires a JWT token for authentication. We will generate this token using jsrsasign:

import {KJUR} from 'jsrsasign';

const generateJwtToken = (key, secret, meetingNumber, role) => {
  const iat = Math.floor(Date.now() / 1000) - 30;
  const exp = iat + 60 * 60 * 2;

  const oHeader = {alg: 'HS256', typ: 'JWT'};
  const oPayload = {
    sdkKey: key,
    appKey: key,
    mn: meetingNumber,
    role: role,
    iat: iat,
    exp: exp,
    tokenExp: exp,
  };

  return KJUR.jws.JWS.sign('HS256', JSON.stringify(oHeader), JSON.stringify(oPayload), secret);
};

2️⃣ Initialize and Join a Zoom Meeting

import ZoomUs from 'react-native-zoom-us';

const joinMeeting = async (userName, meetingId, password) => {
  await ZoomUs.joinMeeting({
    userName,
    meetingNumber: meetingId,
    password,
  });
};

export const joinZoomMeeting = async (userName, meetingId, password) => {
  try {
    const token = generateJwtToken(SDK_KEY, SDK_SECRET, meetingId, 0);
    const initializeResult = await ZoomUs.initialize({ jwtToken: token });
    if (initializeResult === 'Initialize Zoom SDK successfully.') {
      joinMeeting(userName, meetingId, password);
    }
  } catch (err) {
    console.error('Error joining meeting:', err);
  }
};

3️⃣ Create a UI Component to Join a Meeting

import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import React from 'react';
import {joinZoomMeeting} from './zoomSDK';

const ZoomScreen = () => {
  const onPress = () => {
    joinZoomMeeting('Amit', 85865523125, '5SdD7M');
  };

  return (
    <View style={styles.container}>
      <View style={styles.topView}>
        <Image source={require('../../assets/images/zoom.png')} resizeMode="contain" style={styles.image} />
      </View>
      <View style={styles.bottomView}>
        <Text style={styles.title}>Welcome to Zoom</Text>
        <TouchableOpacity onPress={onPress} style={styles.buttonContainer}>
          <Text style={styles.buttonText}>Join a Meeting</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: '#eee'},
  topView: {flex: 1, marginTop: 100, backgroundColor: '#eee'},
  bottomView: {flex: 0.3, backgroundColor: '#fff', borderTopRightRadius: 20, borderTopLeftRadius: 20},
  title: {color: '#000', fontSize: 25, fontWeight: 'bold', textAlign: 'center', marginTop: 30},
  image: {width: '100%', height: 500},
  buttonContainer: {backgroundColor: '#013CBE', marginHorizontal: 20, paddingVertical: 20, borderRadius: 50, marginTop: 20},
  buttonText: {color: '#fff', fontSize: 16, fontWeight: '500', textAlign: 'center'},
});

export default ZoomScreen;

📱 Update Permissions

Android (AndroidManifest.xml)

Add the following permissions:

<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

Modify the tag:

<application
    tools:replace="android:usesCleartextTraffic"
    android:usesCleartextTraffic="true">

iOS (Info.plist)

Add the following permissions:

<key>NSBluetoothPeripheralUsageDescription</key>
<string>We will use your Bluetooth to access your Bluetooth headphones.</string>

<key>NSCameraUsageDescription</key>
<string>For people to see you during meetings, we need access to your camera.</string>

<key>NSMicrophoneUsageDescription</key>
<string>For people to hear you during meetings, we need access to your microphone.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>For people to share, we need access to your photos.</string>

🎉 Conclusion

By following this guide, you have successfully integrated Zoom SDK into your React Native app. Now, users can easily join Zoom meetings directly from the app. 🚀 Happy coding!