Talk to us
Talk to us
menu

How to Build a React Native Video Call App

How to Build a React Native Video Call App

Looking to build a video chat app using React Native? With its cross-platform capabilities, React Native is an excellent choice for creating high-quality video chat apps that work seamlessly across different devices. In this guide, we’ll walk you through the process of building a React Native video chat app from start to finish. Get ready to learn how to create a top-notch video chat app!

Why ZEGOCLOUD SDK for React Native Video Chat App

Video chat is an integral part of modern communication, and building a video chat app has become easier with the advent of React Native. However, to create a seamless video chat experience, you need to integrate a reliable and feature-rich video call SDK into your app. One such SDK is the ZEGOCLOUD SDK for React Native Video Chat App.

ZEGOCLOUD’s Video Call SDK is a robust and highly scalable solution that provides real-time audio and video communication between users.

It offers a wide range of features that enable developers to create customized video chat experiences for their users.

1. Low Latency and High-Quality Video

The SDK delivers high-quality video with low latency, ensuring that users can enjoy clear and uninterrupted video calls.

2. Cross-Platform Support

The ZEGOCLOUD Video Call SDK supports cross-platform communication between different devices, including Android, iOS, and Web platforms.

3. Customizable UI Components

Another key advantage of the ZEGOCLOUD SDK for React Native Video Chat App is the flexibility it provides to developers. The SDK includes a variety of customizable UI components that can be tailored to fit the unique requirements of your video chat app.

4. Secure Communication

The SDK offers end-to-end encryption for all video and audio communication, ensuring that users’ conversations are secure and private.

Preparation

  • A ZEGOCLOUD developer account – Sign up
  • Computer with multimedia support
  • Android or iOS device or emulator
  • Have NodeJS and React Native installed

How to Add Video Calling to a React Native App

It’s effortless to incorporate video call capabilities into your React Native app using ZEGOCLOUD. Follow these simple steps:

1. Create a new project

Once you’ve set up your development environment, you can initiate your React Native project by running the command below.

react-native init [YourProject]

2. Import the SDK

Follow the steps below to import ZEGOCLOUD’s React Native SDK into your project.

a. To add the ZEGO SDK to your React Native project, navigate to the root directory, open package.json, and add “zego-express-engine-reactnative“: “^x.y.z” to the dependencies. You can get the latest version number by running an npm command.

b. To install the ZEGO SDK in your React Native project, simply run the command below:

npm install zego-express-engine-reactnative --save

or

yarn add zego-express-engine-reactnative

c. To install the dependencies in the iOS root directory, use the command:

pod install

3. Add needed permissions

To access system resources, permissions are required in React Native apps for both Android and iOS. Here’s how to add permissions for both platforms:

Android

To add the required permission in Android, open the app/src/main/AndroidManifest.xml file and insert the following:

<!-- Permissions required by the SDK -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- Permissions required by the App -->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-feature
    android:glEsVersion="0x00020000"
    android:required="true" />

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

For important permissions, Android 6.0 necessitates dynamic permissions. After obtaining static permissions via the AndroidManifest.xml file, you must apply for dynamic permissions using the code below.

import {PermissionsAndroid} from 'react-native';

const granted = PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.CAMERA,
                                        PermissionsAndroid.RECORD_AUDIO);
granted.then((data)=>{

        if(!data) {
            const permissions = [PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, PermissionsAndroid.PERMISSIONS.CAMERA];
            PermissionsAndroid.requestMultiple(permissions);
        }
    }).catch((err)=>{
    console.log(err.toString());
    })
}

iOS

To access Custom iOS Target Properties in Xcode, select the target project and navigate to Info.

To add microphone and camera permissions in Xcode, click the “+” button and include the following:

Privacy - Camera Usage Description
Privacy - Microphone Usage Description

4. Create the UI

Design your React Native UI with a local preview view, a remote video view, and a stop button. The appearance of your app is entirely up to you, but here’s an example of a basic video call UI:

5. Create a ZegoExpressEngine instance

To create an engine with a specific profile, use the createEngineWithProfile method and set the appID and appSign parameters to your AppID and AppSign, respectively.

// Import
import ZegoExpressEngine from 'zego-express-engine-reactnative';

// Use the general scenario.
const profile = {
appID : xxx,
// If you require more secure authentication than what AppSign can provide, you can use a Token instead. 

//Enter your appSign from admin console

appSign: '39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
scenario : 0
};

ZegoExpressEngine.createEngineWithProfile(profile)

6. Log in to a room

Log in

Call the loginRoom method to log in to a room. If the room doesn’t exist, this method will create it before logging you in.

let roomConfig = new ZegoRoomConfig();
// If you use the AppSign for authentication, you do not need to set the `token` parameter. If you want to use the Token for authentication, which is securer, see [Guide for upgrading the authentication mode from using the AppSign to Token](https://docs.zegocloud.com/faq/token_upgrade).
// roomConfig.token = "xxxx";
// The `onRoomUserUpdate` callback can be received only when `ZegoRoomConfig` in which the `isUserStatusNotify` parameter is set to `true` is passed.
roomConfig.isUserStatusNotify = true;
// Room login.
// Log in to a room.
ZegoExpressEngine.instance().loginRoom('room1', {'userID': 'id1', 'userName': 'user1'}, roomConfig);

Listen for callback events once you’ve logged into the room.

Listen for event notifications such as room connection, user, and stream status updates after logging in to a room, depending on your service requirements.

  • roomStateUpdate: Notifies the room connection status. This callback is triggered by the SDK when the room connection status changes (e.g., the room is disconnected or login authentication fails).
  • roomUserUpdate: Notifies user status updates. This callback is triggered by the SDK when another user joins or leaves the room after a user logs in to a room.
  • Note: The roomUserUpdate callback can only be received if ZegoRoomConfig is passed in the loginRoom method with the isUserStatusNotify parameter set to true.
  • roomStreamUpdate: Notifies stream status updates. This callback is triggered by the SDK when another user in the room publishes or deletes an audio or video stream after a user logs in to a room.
// Common room-related callbacks

ZegoExpressEngine.instance().on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
  // Callback for room connection status changes triggered by SDK after user login.

}); ;


ZegoExpressEngine.instance().on('roomUserUpdate', (roomID, updateType, userList) => {
  // User status update callback for room login. Triggers when another user joins or leaves the room, sending a notification via the SDK.

});

ZegoExpressEngine.instance().on('roomStreamUpdate', (roomID, updateType, streamList) => {
  // Callback for stream status updates. When a user logs into a room, the SDK will trigger this callback to send a notification when another user in the room publishes or deletes an audio or video stream.
});

7. Publish streams

Start to publish streams

To share your audio and video stream with others, use ZEGOCLOUD’s startPublishingStream method and specify the streamID.

/** Start to publish streams.*/
ZegoExpressEngine.instance().startPublishingStream("streamID");

Start the local preview

Call the startPreview method to set the preview view and view local videos.

import { findNodeHandle } from 'react-native';

// Obtain `ref` of `zego_play_view`.
let localViewRef = findNodeHandle(this.refs.zego_preview_view);

// Start the local preview.
ZegoExpressEngine.instance().startPreview({
    'reactTag': localViewRef,
    'viewMode': 0,
    'backgroundColor': 0
});

// react render
render() {
    return (
        <View>
            <ZegoTextureView ref='zego_preview_view'/>
        </view>
    )
}

Listen for stream publishing callbacks

Listen for stream publishing status updates, such as publisherStateUpdate callback triggered by SDK in case of status change or exception during stream publishing due to network issues.

ZegoExpressEngine.instance().on("publisherStateUpdate", (streamID, state, errorCode, extendedData) => {
    // Stream publishing status updates are sent if there is a change, such as a network interruption, and the SDK retries publishing the stream.
    //....
});

8. Play streams

Start to play streams

To play a remote user’s audio and video stream, call the startPlayingStream method with the globally unique streamID obtained from the roomStreamUpdate callback.

import { findNodeHandle } from 'react-native';

// Obtain `ref` of `zego_play_view`.
let remoteViewRef = findNodeHandle(this.refs.zego_play_view);

// Start to play streams.
ZegoExpressEngine.instance().startPlayingStream("streamID", {
    'reactTag': remoteViewRef,
    'viewMode': 0,
    'backgroundColor': 0
});

// react render
render() {
    return (
        <View>
            <ZegoTextureView ref='zego_play_view'/>
        </view>
    )
}

Listen for playback callbacks.

playerStateUpdate: Callback for stream playing status updates. Notifies of any changes in playback status, such as exceptions caused by network interruptions, and triggers automatic retries.

ZegoExpressEngine.instance().on("playerStateUpdate", (streamID, state, errorCode, extendedData) => {

});

9. Stop stream publishing or playback

Stop the stream publishing and preview

To end a call and stop publishing local audio or video streams, use the stopPublishingStream method.

/** Stop publishing streams. */
ZegoExpressEngine.instance().stopPublishingStream();

To stop the local preview after stopping stream publishing, call the stopPreview method as per your service requirements.

// Stop the local preview.
ZegoExpressEngine.instance().stopPreview();

Stop playing streams

To stop playing remote users’ audio and video streams, use the stopPlayingStream method.

// Stop playing streams.
ZegoExpressEngine.instance().stopPlayingStream("streamID");

10. Log out of a room

To log out of a room and stop all stream publishing, stream playing, and local preview, use the logoutRoom method. You’ll receive a roomStateUpdate callback locally, indicating the result of calling logoutRoom.

// Log out of a room.
ZegoExpressEngine.instance().logoutRoom('room1');

11. Destroy a ZegoExpressEngine instance

To release the resources used by the SDK, use the destroyEngine method to destroy a ZegoExpressEngine instance.

ZegoExpressEngine.destroyEngine();

Run a Demo

Check out ZEGOCLOUD’s Video Call SDK features with the Web sample demo.

Conclusion

Building a React Native video chat app can seem daunting at first, but with the right resources and tools, it can be an exciting and rewarding project. By following the steps outlined in this guide and keeping up-to-date with the latest trends and technologies, you can create a seamless video chat experience for your users. Whether you’re building a chat app for business or personal use, React Native provides a solid foundation for creating dynamic and user-friendly apps.

Talk to Expert

Learn more about our solutions and get your question answered.

Talk to us

Take your apps to the next level with our voice, video and chat APIs

Free Trial
  • 10,000 minutes for free
  • 4,000+ corporate clients
  • 3 Billion daily call minutes

Stay updated with us by signing up for our newsletter!

Don't miss out on important news and updates from ZEGOCLOUD!

* You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information.