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 --saveor
yarn add zego-express-engine-reactnativec. To install the dependencies in the iOS root directory, use the command:
pod install3. 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 DescriptionPrivacy - 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.
