Have you ever wanted to create a call video app work like Messenger on Facebook? Pick up some friends, call them, and they will receive a notification. They would accept the call invitation, and you can talk with each other.
In the first place, I think it isn't straightforward to create an app like this because it has many things to set up to do this app. But one day, I learned I don't need to do all the hard work. I found the ZegoCloud platform, which provides services for us to create a video, call, or chat application with simple steps. I need a little time to make my first video call application. And I will show you how in this article, step by step.
Let's do it with the following step.
1. Create video-call-invitation ReactJS project
Using create-react-app (If you do not familiar with create-react-app, you can learn more here Create React App)
npx create-react-app video-call-invitation
Now you have a React project with the following structure:
2. Install the call kit plug-in to your project
You need to cd to the root folder and install the plug-in package
npm i @zegocloud/zego-uikit-prebuilt zego-zim-web --save
Change App.js file to this. I import instances from zego-zim-web and @zegocloud/zego-uikit-prebuilt
// App.js
import React from 'react';
import { ZIM } from "zego-zim-web";
import { ZegoUIKitPrebuilt } from '@zegocloud/zego-uikit-prebuilt';
export default function App() {
return (
<div>App</div>
);
}
3. Create ZegoCloud account, and set up a project to get appID and ServerSecret:
- You can sign up for 10.000 free mins monthly here: https://bit.ly/3yXsodf
Sign up with some simple step
After sign up and login, access to console admin of ZegoCloud here: https://console.zegocloud.com/dashboard
Image 0: Click to create your project
Image 1: Select Voice & Video Call
Image 2: Scroll down to the bottom and click Next
Image 3: Fill Project name and click Start with UIKits
Image 4: ZegoCloud will create a new project for you and redirect you to this page. You can click on For web to get the guide for Web setting
Image 5: This is some config, you can change the config by toggle switch button, then click Save & start to integrate
Image 6: You can try it out with this demo
Image 7: Click on overview in the sidebar to get a list of your project. Click on your project.
Image 8: Now, you can get appId and ServerSecret for the coding project. This is unique to your project, so don't share it with anyone, ok =)).
4. Codinggggg
This is the entire code of App.js file
import React, { useEffect, useState, useRef } from "react";
import { ZIM } from "zego-zim-web";
import { ZegoUIKitPrebuilt } from "@zegocloud/zego-uikit-prebuilt";
function randomID(len) {
let result = "";
if (result) return result;
var chars = "12345qwertyuiopasdfgh67890jklmnbvcxzMNBVCZXASDQWERTYHGFUIOLKJP",
maxPos = chars.length,
i;
len = len || 5;
for (i = 0; i < len; i++) {
result += chars.charAt(Math.floor(Math.random() * maxPos));
}
return result;
}
export default function App() {
const [userInfo, setUserInfo] = useState({
userName: "",
userId: "",
});
const [calleeId, setCalleeId] = useState("");
const zeroCloudInstance = useRef(null);
async function init() {
const userId = randomID(5);
const userName = "user_" + userId;
setUserInfo({
userName,
userId,
});
const appID = 62xxxx016;
const serverSecret = "bead82axxxxxx470404736";
const KitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
appID,
serverSecret,
null,
userId,
userName
);
zeroCloudInstance.current = ZegoUIKitPrebuilt.create(KitToken);
// add plugin
zeroCloudInstance.current.addPlugins({ ZIM });
}
function handleSend(callType) {
const callee = calleeId;
if (!callee) {
alert("userID cannot be empty!!");
return;
}
// send call invitation
zeroCloudInstance.current
.sendCallInvitation({
callees: [{ userID: callee, userName: "user_" + callee }],
callType: callType,
timeout: 60,
})
.then((res) => {
console.warn(res);
if (res.errorInvitees.length) {
alert("The user dose not exist or is offline.");
}
})
.catch((err) => {
console.error(err);
});
}
useEffect(() => {
init();
}, []);
return (
<div>
<div>My username: <span>{userInfo.userName}</span></div>
<div>My userId: <span>{userInfo.userId}</span>
</div>
<input
type="text"
is="userId"
placeholder="callee's userID"
onChange={(event) => {
setCalleeId(event.target.value);
}}
/>
<button
onClick={() => {
handleSend(ZegoUIKitPrebuilt.InvitationTypeVideoCall);
}}
>
Video call
</button>
<button
onClick={() => {
handleSend(ZegoUIKitPrebuilt.InvitationTypeVoiceCall);
}}
>
Voice call
</button>
</div>
);
}
Let me explain it:
- function randomID(len) used to generate random userId, because it user adds to room need have unique userId
const [userInfo, setUserInfo] = useState({
userName: "",
userId: "",
});
const [calleeId, setCalleeId] = useState("");
const zeroCloudInstance = useRef(null);
- userInfo used to store userName and userId
- calleeId store calleeId, which it will send invitations to.
- zeroCloudInstance using to store ZeroCloud variable used to access API from ZegoUIKitPrebuilt
async function init() {
const userId = randomID(5);
const userName = "user_" + userId;
setUserInfo({
userName,
userId,
});
const appID = 62xxxx016;
const serverSecret = "bead82a3061xxxxxxx70404736";
const KitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
appID,
serverSecret,
null,
userId,
userName
);
zeroCloudInstance.current = ZegoUIKitPrebuilt.create(KitToken);
// add plugin
zeroCloudInstance.current.addPlugins({ ZIM });
}
useEffect(() => {
init();
}, []);
- init function used to init variable, it is called from useEffect hook. It inits userId, userName. It uses the generateKitTokenForTest function from ZegoUIKitPrebuilt to create a token to access the server from Zegocloud. It passes the following params - the name shows itself
(appID, serverSecret, null, userId, userName)
Except for null value, it is roomId value. Because this is called invitation, so we leave null.
- ZIM is a call invitation plugin, so we need to add it so we can use the function of call invitation
zeroCloudInstance.current.addPlugins({ ZIM });
- function handleSend use to send call invitations to callee users. It receives callType. We use two call types here: ZegoUIKitPrebuilt.InvitationTypeVideoCall (for Video) and ZegoUIKitPrebuilt.InvitationTypeVoiceCall (for voice).
function handleSend(callType) {
const callee = calleeId;
if (!callee) {
alert("userID cannot be empty!!");
return;
}
// send call invitation
zeroCloudInstance.current
.sendCallInvitation({
callees: [{ userID: callee, userName: "user_" + callee }],
callType: callType,
timeout: 60,
})
.then((res) => {
console.warn(res);
if (res.errorInvitees.length) {
alert("The user dose not exist or is offline.");
}
})
.catch((err) => {
console.error(err);
});
}
- Remember to delete React.Strict mode in index.js file. Because if you not, useEffect will call 2 times, leading to a bug.
Here is the result:
Github repositories: https://github.com/hqdung99/video-call-invitation
And that is it.
I think this platform is very useful. It helps me to build a video call application with a very little amount of code to write. Documentation is easy to understand, and examples and live coding are available.
ZegoCloud has many other features and it supports various platforms, languages, libraries, and frameworks (Android, IOS, flutter, ReactJS, Angular ...)
I think startups can try UI KIT to build MVP products quickly and with SDK you can deep dive to customize it.
You can learn more from ZegoCloud website and documentation: https://www.zegocloud.com/
- Sign up for 10,000 free mins monthly: https://bit.ly/3yXsodf
- Find out more about ZEGOCLOUD: http://bit.ly/3LqKuLY
- How to make video call app: https://bit.ly/3Ft8Lx5
ZEGOCLOUD allows you to easily build your live video chat apps within minutes.
Top comments (0)