Giter VIP home page Giter VIP logo

ycl-dev / zego_uikit_prebuilt_video_conference_example_flutter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from zegocloud/zego_uikit_prebuilt_video_conference_example_flutter

0.0 0.0 0.0 8.43 MB

Video Conference Kit is a prebuilt feature-rich component, which enables you to build video conferences into your app in minutes.

Home Page: https://www.zegocloud.com

Ruby 25.06% Objective-C 0.55% Kotlin 2.14% Dart 66.46% Swift 5.80%

zego_uikit_prebuilt_video_conference_example_flutter's Introduction


Overview


If you have any questions regarding bugs and feature requests, visit the ZEGOCLOUD community .

Video Conference Kit is a prebuilt feature-rich component, which enables you to build video conferences into your app in minutes.

And it includes the business logic with the UI, you can add or remove features accordingly by customizing UI components.

First comer's view Later comer's view
user1.gif user2.gif

When do you need the Video Conference Kit

  • Build apps faster and easier

    • Want to prototype video conferences ASAP
    • Consider speed or efficiency as the top priority
    • Video Conference Kit allows you to integrate in minutes
  • Customize UI and features as needed

    • Want to customize features based on actual business needs
    • Less time wasted developing basic features
    • Video Conference Kit includes the business logic along with the UI, allows you to customize features accordingly

Embedded features

  • Multi-user audio/video conferences
  • Adaptive video layouts
  • Real-time sound waves display
  • Customizable UI styles
  • Device management
  • Extendable top/bottom menu bar
  • Customizable conference title
  • Member list
  • Live text chat
  • Conference join/leave notifications

Recommended resources


Quick start


Integrate the SDK

Add ZegoUIKitPrebuiltVideoConference as dependencies

Run the following code in your project root directory:

flutter pub add zego_uikit_prebuilt_video_conference

Import the SDK

Now in your Dart code, import the prebuilt Video Conference Kit SDK.

import 'package:zego_uikit_prebuilt_video_conference/zego_uikit_prebuilt_video_conference';

Using the ZegoUIKitPrebuiltVideoConference in your project

  • Go to ZEGOCLOUD Admin Console, get the appID and appSign of your project.
  • Specify the userID and userName for connecting the Video Conference Kit service.
  • Create a conferenceID that represents the video conference you want to start.
  • userID and conferenceID can only contain numbers, letters, and underlines (_).
  • Using the same conferenceID will enter the same video conference.
class VideoConferencePage extends StatelessWidget {
  final String conferenceID;

  const VideoConferencePage({
    Key? key,
    required this.conferenceID,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(

      child: ZegoUIKitPrebuiltVideoConference(
        appID: YourAppID, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
        appSign: YourAppSign, // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
        userID: 'user_id',
        userName: 'user_name',
        conferenceID: conferenceID,
        config: ZegoUIKitPrebuiltVideoConferenceConfig(),
      ),

    );
  }
}

Now, you can start a video conference by navigating to this VideoConferencePage .

Configure your project

  • Android:
  1. If your project is created with Flutter 2.x.x, you will need to open the your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33.

compileSdkVersion.png

  1. Add app permissions. Open the file your_project/app/src/main/AndroidManifest.xml, and add the following code:
    <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" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />

permission_android.png

  1. Prevent code obfuscation.

To prevent obfuscation of the SDK public class names, do the following:

a. In your project's your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below:

-keep class **.zego.** { *; }

b. Add the following config code to the release part of the your_project/android/app/build.gradle file.

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

android_class_confusion.png

  • iOS:

To add permissions, open your_project/ios/Runner/Info.plist, and add the following code to the dict part:

<key>NSCameraUsageDescription</key>
<string>Access permission to camera is required.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Access permission to microphone is required.</string>

permission_ios.png

Run & Test

Now you have finished all the steps!

You can simply click the Run or Debug to run and test your App on your device.

run_flutter_project.jpg

Related guide

Custom prebuilt UI

zego_uikit_prebuilt_video_conference_example_flutter's People

Contributors

yerannnnnn avatar yoer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.