At Video SDK, we’re building tools to help companies create world-class collaborative products with capabilities of live audio/videos, compose cloud recordings/rtmp/hls and interaction APIs
📲 Download the sample iOS app here: https://testflight.apple.com/join/C1UOYbxh
📱 Download the sample Android app here: https://appdistribution.firebase.dev/i/80c2c6cc9fcb89b0
- Real-time video and audio conferencing
- Enable/disable camera
- Mute/unmute mic
- Switch between front and back camera
- Change audio device
- Screen share
- Chat
- Recording
-
Sign up on VideoSDK and visit API Keys section to get your API key and Secret key.
-
Get familiarized with API key and Secret key
-
Get familiarized with Token
- If your target platform is iOS, your development environment must meet the following requirements:
- Flutter 2.0 or later
- Dart 2.12.0 or later
- macOS
- Xcode (Latest version recommended)
- If your target platform is Android, your development environment must meet the following requirements:
- Flutter 2.0 or later
- Dart 2.12.0 or later
- macOS or Windows
- Android Studio (Latest version recommended)
- If your target platform is iOS, you need a real iOS device.
- If your target platform is Android, you need an Android simulator or a real Android device.
- Valid Video SDK Account
Clone the repository to your local environment.
$ git clone https://github.com/videosdk-live/videosdk-rtc-flutter-sdk-example.gitOpen your favorite code editor and copy .env.example to .env file.
$ cp .env.example .envGenerate temporary token from Video SDK Account.
AUTH_TOKEN = "TEMPORARY-TOKEN";Install all the dependecies to run the project.
flutter pub getBingo, it's time to push the launch button.
flutter run-
Meeting- A Meeting represents Real time audio and video communication.Note : Don't confuse with Room and Meeting keyword, both are same thing 😃 -
Sessions- A particular duration you spend in a given meeting is a referred as session, you can have multiple session of a particular meetingId. -
Participant- Participant represents someone who is attending the meeting's session,local partcipantrepresents self (You), for this self, other participants areremote participants. -
Stream- Stream means video or audio media content that is either published bylocal participantorremote participants.
Add all the following permissions to AndroidManifest.xml file.
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
<!-- Needed to communicate with already-paired Bluetooth devices. (Legacy up to Android 11) -->
<uses-permission
android:name="android.permission.BLUETOOTH"
android:maxSdkVersion="30" />
<uses-permission
android:name="android.permission.BLUETOOTH_ADMIN"
android:maxSdkVersion="30" />
<!-- Needed to communicate with already-paired Bluetooth devices. (Android 12 upwards)-->
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
Add the following entry to your Info.plist file, located at <project root>/ios/Runner/Info.plist:
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) Camera Usage!</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>
Please refer to this documentation guide to setup screenshare for iOS
Token is used to create and validate a meeting using API and also initialise a meeting.
🛠️ Development Environment:
- For development, you can use temporary token. Visit VideoSDK dashboard to generate temporary token.
🌐 Production Environment:
- For production, you have to set up an authentication server to authorize users. Follow our official example repositories to setup authentication server, videosdk-rtc-api-server-examples
Note :
The expiry of development environment token lasts 7 days only.
create meeting- Please refer this documentation to create meeting.validate meeting- Please refer this documentation to validate the meetingId.
- You can initialize the meeting using
createRoom()method.createRoom()will generate a newRoomobject and the initiated meeting will be returned.
Room room = VideoSDK.createRoom(
roomId: "abcd-efgh-ijkl",
token: "YOUR TOKEN",
displayName: "GUEST",
micEnabled: true,
camEnabled: true,
maxResolution: 'hd',
defaultCameraIndex: kIsWeb ? 0 : 1,
notification: const NotificationInfo(
title: "Video SDK",
message: "Video SDK is sharing screen in the meeting",
icon: "notification_share", // drawable icon name
),
);// unmute mic
room.unmuteMic();
// mute mic
room.muteMic();- The
meeting.getAudioOutputDevices()function allows a participant to list all of the attached audio devices (e.g., Bluetooth and Earphone).
// get connected audio devices
List<MediaDeviceInfo> outputDevice = room.getAudioOutputDevices()- Local participant can change the audio device using
switchAudioOutput(MediaDeviceInfo device)method ofRoomclass.
// change mic
room.switchAudioOutput(mediaDeviceInfo);- Please consult our documentation Change Audio Device for more infromation.
// enable webcam
room.enableCam();
// disable webcam
room.disableCam();// switch webcam
room.changeCam(deviceId);- The chat feature allows participants to send and receive messages about specific topics to which they have subscribed.
// publish
room.pubSub.publish(String topic,String message, PubSubPublishOptions pubSubPublishoptions);
// pubSubPublishoptions is an object of PubSubPublishOptions, which provides an option, such as persist, which persists message history for upcoming participants.
//subscribe
PubSubMessages pubSubMessageList = room.pubSub.subscribe(String topic, Function(PubSubMessage) messageHandler)
//unsubscribe
room.pubSub.unsubscribe(topic, Function(PubSubMessage) messageHandler);
// Message Handler
void messageHandler(msg){
// Do something
print("New message received: $msg");
}// Only one participant will leave/exit the meeting; the rest of the participants will remain.
room.leave();
// The meeting will come to an end for each and every participant. So, use this function in accordance with your requirements.
room.end();By registering callback handlers, VideoSDK sends callbacks to the client app whenever there is a change or update in the meeting after a user joins.
room.on(
Events.roomJoined,
() {
// This event will be emitted when a localParticipant(you) successfully joined the meeting.
},
);
room.on(Events.roomLeft, (String? errorMsg) {
// This event will be emitted when a localParticipant(you) left the meeting.
// [errorMsg]: It will have the message if meeting was left due to some error like Network problem
});
room.on(Events.recordingStarted, () {
// This event will be emitted when recording of the meeting is started.
});
room.on(Events.recordingStopped, () {
// This event will be emitted when recording of the meeting is stopped.
});
room.on(Events.presenterChanged, (_activePresenterId) {
// This event will be emitted when any participant starts or stops screen sharing.
// [participantId]: Id of participant who shares the screen.
});
room.on(Events.speakerChanged, (_activeSpeakerId) {
// This event will be emitted when a active speaker changed.
// [participantId] : Id of active speaker
});
room.on(Events.participantJoined, (Participant participant) {
// This event will be emitted when a new participant joined the meeting.
// [participant]: new participant who joined the meeting
});
room.on(Events.participantLeft, (participantId) => {
// This event will be emitted when a joined participant left the meeting.
// [participantId]: id of participant who left the meeting
});By registering callback handlers, VideoSDK sends callbacks to the client app whenever a participant's video, audio, or screen share stream is enabled or disabled.
participant.on(Events.streamEnabled, (Stream _stream) {
// This event will be triggered whenever a participant's video, audio or screen share stream is enabled.
});
participant.on(Events.stereamDisabled, (Stream _stream) {
// This event will be triggered whenever a participant's video, audio or screen share stream is disabled.
});If you want to learn more about the SDK, read the Complete Documentation of Flutter VideoSDK
Note :
- master branch: Better UI with One-to-One call experience.
- v1-code-sample branch: Simple UI with Group call experience.
-
One-to-One meeting - The One-to-One meeting allows 2 participants to join a meeting in the app.
-
Group Meeting - The Group meeting allows any number of participants to join a meeting in the app with maximum 6 participants on screen.
- We have seprated screens and widget in following folder structure:
one-to-one- It includes all files related to OneToOne meeting.common- It inclues all the files that are used in both meeting type (OneToOne and Group calls).conference-call- It includes all files related to the conference call.
1. Create or join Meeting
-
join_screen.dart: It shows the user with the option to create or join a meeting and to initiate webcam and mic status.-
api.dart: It incldes all the API calls for create and validate meeting. -
joining_details.dart: This widget allows user to enter the meetingId and name for the meeting. -
If
Join Meetingis clicked, it will show following:Dropdown for Meeting Type- These dropdown is to select the meeting mode: Group Call or One To One call.EditText for ParticipantName- This edit text will contain name of the participant.EditText for MeetingId- This edit text will contain the meeting Id that you want to join.Join Meeting Button- This button will call api for join meeting with meetingId that you entered.
-
If
Create Meetingis clicked, it will show following:Dropdown for Meeting Type- These dropdown is to select the meeting mode: Group Call or One To One call.EditText for ParticipantName- This edit text will contain name of the participant.Join Meeting Button- This button will call api for join meeting with a new meetingId
-
2. PartcipantList
participant_list.dartandparticipant_list_item.dartfiles are used to show Participant list.
3. Meeting Actions
-
Meeting actions are present in the
meeting_action_bar.dart- MoreOptions:
- AudioDeviceList:
- LeaveOrEndDialog:
- MoreOptions:
4. Meeting Top Bar
meeting_appbar.dart: It contains the meeting timer, switch camera option and recording indicatior.
5. Chat
-
chat_screen.dart: It contains the chat screen made using PubSub.
-
one_to_one_meeting_screen.dart: It contains the complete layout for one to one meeting. -
one_to_one_meeting_container.dart: It contains the logic to render the participants in the miniview and large view. -
participant_view.dart: It is used to display the individual stream of the participant.
-
conference_participant_grid.dart: It contains the management of participant grid. -
participant_grid_tile.dart: It contains the widget for a single participant which is displayed int he grid. -
conference_screenshare_view.dart: It contains the widget which will dislpay the screenshare in the meeting.
- videosdk-rtc-prebuilt-examples
- videosdk-rtc-javascript-sdk-example
- videosdk-rtc-react-sdk-examplee
- videosdk-rtc-react-native-sdk-example
- videosdk-rtc-flutter-sdk-example
- videosdk-rtc-android-java-sdk-example
- videosdk-rtc-android-kotlin-sdk-example
- videosdk-rtc-ios-sdk-example
- videosdk-hls-react-sdk-example
- videosdk-hls-react-native-sdk-example
- videosdk-hls-flutter-sdk-example
- videosdk-hls-android-java-example
- videosdk-hls-android-kotlin-example
Read the documentation to start using Video SDK.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent