Looking to add real-time video calling functionality to your React Native app? WebRTC is a powerful and popular choice, but implementing it can be tricky. In this guide, we’ll break down the steps to help you build a successful React Native WebRTC video calling feature for your app. Let’s get started!
What Is React Native?
React Native is a mobile app development framework that utilizes JavaScript as its programming language, which makes it accessible to developers with varying levels of expertise. Developed by Facebook, the framework’s architecture is modeled on React, a well-known web development framework.
React Native allows developers to create cross-platform apps for both iOS and Android using the same codebase. One of the advantages of using React Native is its ability to reuse code across multiple platforms, saving time and effort. It also has a hot reload feature that lets developers see changes to the code instantly, resulting in a faster development cycle. Additionally, React Native provides built-in components and APIs to add native features such as camera access and push notifications.
You may also like: Top 5 Things about React Native Developer
What Is WebRTC?
WebRTC, or Web Real-Time Communication, is an open-source project that enables real-time communication capabilities in web browsers and mobile applications. It was developed by Google and released in 2011 as an open-source project to allow developers to create applications that could be accessed and used directly within a browser without the need for any additional plugins or downloads.
WebRTC supports video and audio communication, as well as data transfer between browsers or devices. This technology is based on a set of standards, protocols, and APIs that work together to provide a seamless and secure communication experience. WebRTC is used in a variety of applications, including video conferencing, online gaming, file sharing, and more.
Overall, WebRTC is an innovative technology that has opened up new possibilities for real-time communication over the web. Its ability to provide secure and efficient communication directly within a browser has made it a popular choice for a variety of applications, and its use is only expected to grow in the future.
Must-Have Features of a Good Video Call App
As virtual communication becomes increasingly common, video call apps have become a critical tool for businesses and individuals alike. However, not all video call apps are created equal. To ensure that you have the best experience possible, here are the must-have features of a good video call app.
1. Excellent Video and Audio Quality
One of the most important features of a good video call app is excellent video and audio quality. The video should be clear, and the audio should be free of interference or lag. Users should be able to hear each other clearly and without interruption.
2. Screen Sharing
Another essential feature of a good video call app is the ability to screen share. Screen sharing allows users to share their computer screen with others, making it easier to collaborate and share information.
3. Chat Functionality
In addition to video and audio communication, a good video call app should also have chat functionality. This allows users to send messages, links, and other information to each other during the call, without interrupting the flow of conversation.
4. Recording and Playback
Some video call apps also offer the ability to record and playback calls. This can be incredibly helpful for team meetings or presentations, as users can revisit the information discussed during the call at a later time.
5. Security
Finally, a good video call app should prioritize security. We can achieve this using encryption to protect users’ data and privacy, as well as implement measures to prevent hacking or other security breaches.
How to Make Your React Native WebRTC App
If you’re looking to develop a real-time communication app using React Native, you’ve come to the right place! With the robust capabilities of WebRTC, you can effortlessly integrate flawless audio and video streaming into your application. In the following section, we will provide step-by-step instructions on how to leverage WebRTC in React Native with ZEGOCLOUD to craft a top-tier video call app that will captivate and delight your users.
Preparation
- A ZEGOCLOUD developer account – Sign up
- A computer with WebRTC support
- iOS or Android device/emulator
- Basic understanding of app development
Steps on How to Make Your React Native WebRTC App
To create your very own React Native WebRTC application, simply follow the step-by-step guide below:
1. Create a new project
To start your project, execute the “react-native init YourProject” command after setting up the development environment.
2. Import the SDK
To use the zego-express-engine-reactnative SDK in your project, add “^x.y.z” to your package.json dependencies and run “npm install zego-express-engine-reactnative” or “yarn add zego-express-engine-reactnative” in your root directory.
Then, run “pod install” in your iOS root directory. Now you can use the SDK in either JavaScript or TypeScript.
3. Add permissions
Grant your Android and iOS applications access to system resources by following these steps:
Android
To add the code, navigate to app/src/main/AndroidManifest.xml file and include 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" />To obtain necessary permissions in Android 6.0, you must apply for dynamic permissions using the provided code after obtaining static permissions from the AndroidMainfest.xml file.
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
Access Custom iOS Target Properties in Xcode by selecting the target project under the Info tab.
To add microphone and camera permissions, click the + button and enter the following:
- Privacy – Camera Usage Description
- Privacy – Microphone Usage Description
Once added, the permissions will appear as shown below.
4. Create app UI
Prior to creating a ZegoExpressEngine instance, it is advisable to include these basic real-time audio and video elements in your UI:
- Local preview view
- Remote video view
- Stop button
5. Instantiate a ZegoExpressEngine
To register callbacks for a ZegoExpressEngine instance:
Invoke the createEngineWithProfile method and pass in the AppID and AppSign.
Implement the necessary methods in ZegoEventListener and call the on method after creating the engine to set the callbacks.
// Import
import ZegoExpressEngine from 'zego-express-engine-reactnative';
// Use the general scenario.
const profile = {
appID : xxx,
appSign: '39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
scenario : 0
};
ZegoExpressEngine.createEngineWithProfile(profile)6. Log in to a room
To log in to a room, simply invoke the loginRoom method. In case the room doesn’t exist, the method will create it for you and log you in automatically.
let roomConfig = new ZegoRoomConfig();
roomConfig.isUserStatusNotify = true;
// Room login.
// Log in to a room.
ZegoExpressEngine.instance().loginRoom('room1', {'userID': 'id1', 'userName': 'user1'}, roomConfig);7. Publish streams
Start to publish streams
// Start to publish streams.
ZegoExpressEngine.instance().startPublishingStream("streamID");Start the local preview
Initiate the local preview by calling the startPreview method and setting the preview view.
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>
)
}8. Play streams
Begin playback of a remote user’s audio and video stream by calling the startPlayingStream method and specifying the streamID parameter.
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>
)
}9. Cease stream publishing or playback
Stop the stream publishing and preview
End the call and halt local stream publishing by invoking the stopPublishingStream method.
//Stop publishing streams.
ZegoExpressEngine.instance().stopPublishingStream();Terminate the local preview if necessary by invoking the stopPreview method once stream publishing has ended.
// Stop the local preview.
ZegoExpressEngine.instance().stopPreview();Stop playing streams
Halt playback of remote users’ audio and video streams by invoking the stopPlayingStream method.
// Stop playing streams.
ZegoExpressEngine.instance().stopPlayingStream("streamID");10. Log out of a room
Invoke the logoutRoom method to log out of the current room. Upon successful logout, stream publishing, stream playback, and the local preview will be halted, and a roomStateUpdate callback will be received locally to reflect the result.
// Log out of a room.
ZegoExpressEngine.instance().logoutRoom('room1');11. Destroy a ZegoExpressEngine instance
Release the resources used by the SDK by invoking the destroyEngine method to destroy the ZegoExpressEngine instance.
ZegoExpressEngine.destroyEngine();Run a Demo
To try the real-time audio and video features, head over to ZEGO Express Web Demo and enter the AppID, Server, and RoomID to join the room.
Conclusion
Developing React Native WebRTC video calling requires a strong grasp of WebRTC, React Native, and related technologies. Fortunately, ZEGOCLOUD streamlines the process, allowing for the creation of intuitive, seamless video calling experiences. Follow the guide and leverage available resources to start building today. Sign up now and receive 10,000 free minutes to get started with your WebRTC app development.
Let’s Build APP Together
Start building with real-time video, voice & chat SDK for apps today!
