Вы когда-нибудь хотели, чтобы создание приложения для видеозвонков работало как Messenger на Facebook? Подберите друзей, позвоните им, и они получат уведомление. Они примут приглашение на звонок, и вы сможете поговорить друг с другом.
Во-первых, я думаю, что создать такое приложение непросто, потому что для этого нужно настроить множество вещей. Но однажды я понял, что мне не нужно делать всю тяжелую работу. Я нашел платформу ZegoCloud, которая предоставляет нам услуги по созданию приложения для видео, звонков или чата с помощью простых шагов. Мне нужно немного времени, чтобы сделать свое первое приложение для видеозвонков. И я покажу вам, как в этой статье, шаг за шагом.
Давайте сделаем это со следующим шагом.
1. Создайте проект ReactJS с приглашением на видеозвонок
Использование приложения create-react-app (Если вы не знакомы с приложением create-react-app, вы можете узнать больше здесь Создать приложение React)
npx create-react-app video-call-invitation
Теперь у вас есть проект React со следующей структурой:
2. Установите плагин call kit в свой проект.
Вам нужно перейти в корневую папку и установить пакет плагина
npm i @zegocloud/zego-uikit-prebuilt zego-zim-web --save
Измените файл App.js на это. Я импортирую экземпляры из zego-zim-web и @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. Создайте учетную запись ZegoCloud и настройте проект для получения appID и ServerSecret:
- Вы можете подписаться на 10 000 бесплатных минут в месяц здесь: https://bit.ly/3yXsodf
- Зарегистрируйтесь, выполнив простой шаг
- После регистрации и входа в систему доступ к консоли администратора ZegoCloud здесь: https://console.zegocloud.com/dashboard
Изображение 0. Нажмите, чтобы создать проект
Изображение 1. Выберите «Голосовой и видеозвонок»
Изображение 2. Прокрутите вниз и нажмите «Далее»
Изображение 3. Заполните имя проекта и нажмите «Начать с UIKits».
Изображение 4: ZegoCloud создаст для вас новый проект и перенаправит вас на эту страницу. Вы можете нажать «Для Интернета», чтобы получить руководство по настройке Интернета.
Изображение 5: Это некоторая конфигурация, вы можете изменить конфигурацию с помощью переключателя, затем нажмите Сохранить и начать интеграцию
Изображение 6: Вы можете попробовать это с этой демонстрацией
Изображение 7: Нажмите на обзор на боковой панели, чтобы получить список вашего проекта. Нажмите на свой проект.
Изображение 8. Теперь вы можете получить appId и ServerSecret для проекта кодирования. Это уникально для вашего проекта, так что не делитесь им ни с кем, ок =)).
4. Кодирование
Это весь код файла App.js
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>
);
}
Позвольте мне объяснить это:
- функция randomID(len) используется для генерации случайного идентификатора пользователя, поскольку пользователь добавляет в комнату уникальный идентификатор пользователя.
const [userInfo, setUserInfo] = useState({
userName: "",
userId: "",
});
const [calleeId, setCalleeId] = useState("");
const zeroCloudInstance = useRef(null);
- userInfo используется для хранения имени пользователя и идентификатора пользователя
- calleeId хранит calleeId, которому он будет отправлять приглашения.
- zeroCloudInstance, используемый для хранения переменной ZeroCloud, используемой для доступа к API из 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, используемая для инициализации переменной, вызывается из хука useEffect. Он инициализирует идентификатор пользователя, имя пользователя. Он использует функцию generateKitTokenForTest из ZegoUIKitPrebuilt для создания токена для доступа к серверу из Zegocloud. Он передает следующие параметры — имя показывает себя
(appID, serverSecret, null, userId, userName)
За исключением нулевого значения, это значение roomId. Поскольку это называется приглашением, мы оставляем null.
- ZIM — это плагин приглашения на звонок, поэтому нам нужно добавить его, чтобы мы могли использовать функцию приглашения на звонок.
zeroCloudInstance.current.addPlugins({ ZIM });
- Функция handleSend используется для отправки приглашений на вызов вызываемым пользователям. Он получает callType. Здесь мы используем два типа вызова: ZegoUIKitPrebuilt.InvitationTypeVideoCall (для видео) и ZegoUIKitPrebuilt.InvitationTypeVoiceCall (для голоса).
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);
});
}
- Не забудьте удалить режим React.Strict в файле index.js. Потому что если вы этого не сделаете, useEffect вызовет 2 раза, что приведет к ошибке.
Вот результат:
Репозитории Github: https://github.com/hqdung99/video-call-invitation
И это все.
Я думаю, что эта платформа очень полезна. Это помогает мне создать приложение для видеозвонков с очень небольшим количеством кода. Документация проста для понимания, доступны примеры и живое кодирование.
ZegoCloud имеет много других функций и поддерживает различные платформы, языки, библиотеки и фреймворки (Android, IOS, флаттер, ReactJS, Angular…)
Я думаю, что стартапы могут попробовать UI KIT для быстрого создания продуктов MVP, а с помощью SDK вы сможете глубоко погрузиться в его настройку.
Вы можете узнать больше на веб-сайте и в документации ZegoCloud: https://www.zegocloud.com/
- Подпишитесь на 10 000 бесплатных минут в месяц: https://bit.ly/3yXsodf
- Узнайте больше о ZEGOCLOUD: http://bit.ly/3LqKuLY
- Как сделать приложение для видеозвонков: https://bit.ly/3Ft8Lx5
ZEGOCLOUD позволяет легко создавать приложения для живого видеочата за считанные минуты.
