В этой статье рассказывается, как встроить видеовызов на ваш веб-сайт с помощью готового SDK с помощью двух строк кода.
Функция видеозвонка: как реализовать?
Передача информации эволюционировала от текста к изображениям, а теперь и к видео.
Видеозвонки становятся все более необходимой функцией для приложений.
От обмена мгновенными сообщениями, знакомств и встреч до потокового вещания и обучения, приложения во всех сферах жизни будут интегрировать функцию видеозвонка.
Чтобы реализовать эту функцию, если вы не используете готовый SDK, необходимо выполнить несколько сложных задач. Например:
- Разработка интерактивного интерфейса — несмотря на то, что у видеозвонка всего одна страница, есть различные интерактивные кнопки; каждая кнопка имеет несколько состояний, которые можно переключать по-разному, что затрудняет работу с интерактивным интерфейсом.
- Управление звуком и видео. Управление звуком и видео требует большого количества тестов и проверок для обеспечения стабильности вызовов, таких как различные платформы, устройства, версии системы и сетевые среды, на которые необходимо ориентироваться. Это трудоемкая работа.
- Разрешения пользователя, статус звонка и другое, связанное с бизнесом – включает разрешения на переключение камеры и микрофона, разрешения на вызовы, продолжительность звонка, отбой, ожидание и статус звонка. Эти состояния кажутся простыми, но поскольку каждое из них имеет несколько путей модификации, логика, лежащая в основе правильного состояния, сложна. Например, если вызов «завис», это может быть «активное завершение», «пассивное завершение», «зависание из-за сетевой ошибки», «недостаточная квота» и т. д.
Не каждая команда может инвестировать много рабочей силы в решение этой тяжелой работы по исследованиям и разработкам, но видеозвонок является важной функцией продукта. Решение состоит в том, чтобы использовать готовый SDK для быстрой реализации функции видеозвонка.
Что такое готовый SDK?
Предустановленный SDK для видеовызовов упорядочивает персонализированный интерфейс и взаимодействие в видеовызовах по следующим параметрам:
- абстрагирование стандартных функций и логики в Video Call
- инкапсуляция этих стандартизированных функций и логики в готовый пакет SDK.
- интеграция персонализированных интерфейсов и взаимодействий в элементы конфигурации.
Пользователям нужно всего две строки кода для реализации функции видеозвонка; персонализированный интерфейс и взаимодействие могут быть достигнуты посредством конфигурации элемента.
ZEGOCLOUD Готовый веб-SDK
ZEGOCLOUD Prebuilt SDK — это набор стандартных решений, отобранных в процессе интеграции тысяч клиентов в клиенты видеозвонков.
Основанное на высокой степени инкапсуляции функции видеовызова, это решение предоставляет краткий файл конфигурации, который удобно создавать и гибко быстро настраивать пользователями.
Использование готового SDK ZEGOCLOUD позволяет:
- Готовый интерфейс видеочата
- Встроенное управление пропускной способностью
- Кроссбраузерная совместимость
- Текстовый чат
- Список участников
- Мониторинг качества сети
- Запись
- Приглашение позвонить
- Настраиваемый логотип бренда
Пошаговое руководство: встраивание ZEGOCLOUD Prebuilt
Зарегистрировать аккаунт
Создайте учетную запись в ZEGOCLOUD Official.
Создайте проект в ZEGOCLOUD Admin Console.
Две строки кода завершают доступ
Готовому SDK ZEGOCLOUD требуется всего две строки кода для полного доступа к SDK.
- Вызовите интерфейс
init, чтобы завершить инициализацию SDK. - Вызовите интерфейс
joinRoom, чтобы присоединиться к аудио- и видеовызову.
<html>
<style>
#root {
width: 100vw;
height: 100vh;
}
</style>
<body>
</body>
<script crossorigin src="https://zegocloud.github.io/zegocloud_prebuilt_webrtc/ZegoPrebuilt/index.umd.js"></script>
<script>
const TOKEN = ''; // need to generate TOKEN first
const prebuilt = ZegoPrebuilt.init(TOKEN);
prebuilt.joinRoom({
container: document.querySelector("#root"),
});
</script>
</html>Пользовательский готовый пользовательский интерфейс
Предварительно созданный SDK ZEGOCLOUD предоставляет краткий файл конфигурации, который удобен для быстрой гибкой сборки и настройки.
prebuilt.joinRoom({
container: document.querySelector("#root"), // Mount the container, which fills the entire screen by default
joinScreen: {
visible: true; // Whether to display the device detection page, default display
title:"Join Room"; // Device detection page title, default Join Room
inviteURL:"https://zegocloud.github.io/zegocloud_prebuilt_webrtc/build/index.html?RoomID=test"; // Invite link, not displayed by default
};
micEnabled: true; // Whether to enable your own microphone, it is enabled by default
cameraEnabled: true; // Whether to open your own camera, open by default
userCanToggleSelfCamera: true; // Whether you can control your own microphone, enabled by default
userCanToggleSelfMic: true; // Whether you can control the body's own camera, enabled by default
deviceSettings: true; // Whether to display audio settings, default display
chatEnabled: true; // Whether to enable chat, enabled by default
userListEnabled: true; //Whether to display the member list, the default display
notification: { // message notification in the lower left corner of the video
userOnlineOfflineTips: true; //Whether to display member in and out, default display
unreadMessageTips: true; // Whether to display unread messages, default display
};
leaveRoomCallback: () => void; // leave the room callback
branding: {
logoURL: "https://www.zegocloud.com/_nuxt/img/zegocloud_logo_white.ddbab9f.png", // Brand logo in the upper left corner, not displayed by default
};
leftScreen: true; // leave the room page, default is
});Запустить демо
Попробуйте живую демонстрацию: Посмотрите живую демонстрацию
Подробнее о Предустановленном SDK ZEGOCLOUD.
Зарегистрируйтесь в ZEGOCLOUD и получайте 10 000 минут бесплатно каждый месяц.
Вы знали? 👏
You can give up to 50 Claps for an article? Tap and hold the clap button for a few seconds. Follow me to learn more technical knowledge. Thank you for reading :)
Узнать больше
Это одна из живых технических статей. Добро пожаловать в другие статьи:
