В современном мире видеозвонки являются неотъемлемой частью общения, и с появлением мобильных устройств разработчикам приложений стало необходимо включать функции видеозвонков в свои приложения. В этой статье мы рассмотрим, как создать приложение для видеозвонков во Flutter, используя ZEGOCLOUD UIKITS, которым является zego_uikit_prebuilt_video_conference.
Flutter — популярный фреймворк для создания высокопроизводительных кроссплатформенных мобильных приложений. Он известен своей гибкостью, простотой использования и обширной библиотекой готовых виджетов. Zego_uikit_prebuilt_video_conference — это готовый набор пользовательского интерфейса ZEGOCLOUD, который упрощает процесс интеграции видеоконференций в ваше приложение Flutter.
Прежде чем мы начнем, убедитесь, что в вашей системе установлен Flutter. Вы можете следовать официальной документации по установке Flutter и настройке среды разработки.
Шаг 1. Создайте новый проект Flutter
Чтобы создать новый проект Flutter, откройте терминал или командную строку и введите следующую команду:
flutter create my_video_call_app
Это создаст новый проект Flutter с именем my_video_call_app.
Шаг 2. Добавьте необходимые зависимости
В файле pubspec.yaml добавьте следующие зависимости:
dependencies: zego_uikit_prebuilt_video_conference: ^1.0.1
Это добавит пакет zego_uikit_prebuilt_video_conference в ваш проект.
Шаг 3. Настройте разрешения
Чтобы использовать функцию видеозвонков, вам необходимо установить необходимые разрешения в ваших файлах AndroidManifest.xml и Info.plist.
Для Android добавьте следующие разрешения к файлу AndroidManifest.xml:
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-feature android:name="android.hardware.camera" /> <uses-feature android:name="android.hardware.camera.autofocus" />
Для iOS добавьте следующие разрешения к файлу Info.plist:
<key>NSCameraUsageDescription</key> <string>Allow camera access for video calling</string> <key>NSMicrophoneUsageDescription</key> <string>Allow microphone access for video calling</string>
Шаг 4. Настройте приложение
В файле main.dart добавьте следующий код для настройки набора пользовательского интерфейса для видеоконференций Zegocloud:
import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_video_conference/zego_uikit_prebuilt_video_conference.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
ZegoUikitPrebuiltVideoConference.initSDK(appId: "your_app_id", appSign: "your_app_sign");
return MaterialApp(
title: 'My Video Call App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: VideoCallPage(),
);
}
}
В приведенном выше коде мы инициализировали комплект пользовательского интерфейса для видеоконференций Zegocloud с нашим идентификатором приложения и знаком приложения. Вам нужно будет заменить your_app_id и your_app_sign собственными значениями, которые вы можете получить в консоли разработчика Zego.
Шаг 5. Добавьте функцию видеозвонков
Наконец, мы добавим код для включения функции видеозвонков в нашем приложении.
import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_video_conference/zego_uikit_prebuilt_video_conference.dart';
class VideoCallPage extends StatefulWidget {
@override
_VideoCallPageState createState() => _VideoCallPageState();
}
class _VideoCallPageState extends State<VideoCallPage> {
@overrride
void initState() {
super.initState();
ZegoUikitPrebuiltVideoConference.enableCamera(true); // enable camera
ZegoUikitPrebuiltVideoConference.enableMic(true); // enable microphone
ZegoUikitPrebuiltVideoConference.startPreview(); // start local preview
ZegoUikitPrebuiltVideoConference.joinRoom(
"room_id"); // join video call room
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Video Call"),
),
body: ZegoUikitPrebuiltVideoConference.createView(),
);
}
@override
void dispose() {
super.dispose();
ZegoUikitPrebuiltVideoConference.leaveRoom(); // leave video call room
}
}
В приведенном выше коде мы добавили новый виджет `VideoCallPage`, который расширяет `StatefulWidget`. В методе `initState` мы включили камеру и микрофон, запустили локальный предварительный просмотр и присоединились к комнате видеовстреч. Замените room_id на идентификатор комнаты, к которой вы хотите присоединиться.
В методе `build` мы создали новый шаблон с панелью приложения и телом, которое содержит представление комплекта пользовательского интерфейса для видеоконференций.
Наконец, в методе `dispose` мы оставили комнату видеовызова для очистки ресурсов при удалении виджета.
Шаг 6. Запустите приложение
Поздравляем, вы успешно создали приложение для видеозвонков во Flutter, используя zego_uikit_prebuilt_video_conference. Чтобы запустить приложение, подключите мобильное устройство или эмулятор и введите в терминале следующую команду:
flutter run
Это создаст и запустит ваше приложение на вашем устройстве или эмуляторе. Вы должны увидеть представление набора пользовательского интерфейса для видеоконференций с вашим локальным предварительным просмотром.
Заключение
В этой статье мы рассмотрели, как создать приложение для видеозвонков во Flutter, используя zego_uikit_prebuilt_video_conference. Мы показали, как настроить приложение, настроить разрешения и включить функции видеозвонков с помощью простого и понятного кода. Обладая этими знаниями, теперь вы можете создать собственное приложение для видеозвонков и общаться с людьми по всему миру.
