Description:

tim ui kit calling plugin

Voice Call and Video Call

Tencent Voice Call and Video Call plug-in, working with Tencent Cloud Chat.


More languages:
简体中文


Tencent Cloud Voice Call and Video Call #
Tencent Cloud Voice Call and Video Call plug-in, supports both one-to-one and group calling.
This plug-in integrate Tencent Real-Time communication(TRTC) and Tencent Cloud Chat.

TRTC SDK: Used as the calling module for voice/video calling.
Chat SDK: Used for sending chat messages and signal messages.

Experience DEMO #
You can experience our Chat and Voice/Video Call modules via the following demos.
Those following versions of demo has been build by the same Flutter project with our SDKs and extensions.


Mobile APP
WEB - H5


[Recommend] iOS/Android APP
Scan for the Web DEMO


API Preview #
Basic functions

init: init this plug-in
sharedInstance: Singleton of this plug-in instance
call: start calling for one-to-one
groupCall: start calling for multi-person
destroy: destroy this plug-in
setCallingListener: set calling listener
removeCallingListener: remove calling listencer
enableCustomViewRoute: enable/disable custom view route
enableFloatingWindow: enable/disable floating window

Widgets

CallMessageItem Custom message for calling.
isCallingData check if is calling data.

Get started #
What needs to be done before we start

Create a Flutter application.
Signed up for a Tencent Cloud account and completed identity verification.
Created a chat application as instructed in Creating and Upgrading an Application and recorded the SDKAppID.
Enable the [Tencent Real-Time Communication] on the right bottom of Tencent Cloud IM console.

[Optional] Integrate one of our Chat SDK to your APP, non-UI Pure SDK or UIKit.
Add tim_ui_kit_calling_plugin to dependencies in pubspec.yaml file. Or by executing following commands.

/// step 1:
flutter pub add tim_ui_kit_calling_plugin

/// step 2:
flutter pub get
copied to clipboard
Step 1: Add navigatorKey
Add navigatorKey to MateriaApp. Aimed of navigate to calling page when receiving calling invitation.
import 'package:tim_ui_kit_calling_plugin/tim_ui_kit_calling_plugin.dart';


MaterialApp(
navigatorKey: TUICalling.navigatorKey,
...
)
copied to clipboard
Step 2: Initialize Calling Service
We recommend you to do this step after login, if you tend to add calling function to current Flutter Chat application.
Use init(sdkAppID: sdkAppId, userID: userID, userSig: userSig) to initialize plug-in, it will deal with receiving calling invitation automatically, and help you to intialize and login IM, to send invitation.
class HomePageState extends State<HomePage> {
final TUICalling _calling = TUICalling();

@override
initState() {
super.initState();
final userID = '1234756';
final userSig = '';
final sdkAppId = 0; /// sdkAppID from Tencent Cloud IM control
_calling.init(sdkAppID: sdkAppId, userID: userID, userSig: userSig);
}
}
copied to clipboard


The correct way to issue UserSig is to integrate the calculation code of UserSig into your server, and provide an App-oriented interface. When UserSig is needed, your App initiates a request to the business server to obtain the dynamic UserSig `. For more details, please refer to Server Generates UserSig.


Basic function define #
init
initialize plug-in
Future<void> init({required int sdkAppID, required String userID,required String userSig});
copied to clipboard
call
start single calling
Future<void> call(String userId,CallingScenes type,)
copied to clipboard
groupCall
start calling for multi-person
Future<void> call(List<String> userIdList, CallingScenes type, String? groupId)
copied to clipboard
destroy
void destroy()
copied to clipboard
enableCustomViewRoute
enable/disable custom view route
void enableCustomViewRoute(bool isEnable)
copied to clipboard
enableFloatingWindow
enable/disable floating window
void enableFloatingWindow(bool isEnable)
copied to clipboard
setCallingListener
void setCallingListener(TUICallingListener listener);
copied to clipboard
removeCallingListener
void removeCallingListener(TUICallingListener listener);
copied to clipboard
sharedInstance
Future<TRTCCalling> sharedInstance();
copied to clipboard
TUICallingListener
/// Error callback, indicating an unrecoverable error from the SDK. Need to monitor and give the user appropriate interface prompts according to the situation.
///
/// Parameter:
///
/// errCode error code
///
/// errMsg error message
///
/// extraInfo error extended information fields, some error codes may bring additional information to help locate the problem
onError,

/// Warning message callback, used to inform you of some non-serious problems, such as freezing or recoverable decoding failure.
///
/// Parameter:
///
/// errCode error code
///
/// errMsg error message
///
/// extraInfo error extended information fields, some error codes may bring additional information to help locate the problem
onWarning,

/// Callback when entering room on local
///
/// If the join is successful, `result` will be a positive number (`result` > 0), represents the time of joining the room, in milliseconds (ms).
///
/// If the join fails, `result` will be a negative number (`result` < 0), representing the error code of the room entry failure.
///
/// Parameter:
///
/// When `result` > 0, it is the time taken to enter the room (ms), and when `result` < 0, it is the error code of entering the room
onEnterRoom,

/// Callback when other users entering the room
///
/// Parameter:
///
/// userId
onUserEnter,

/// Callback when other users leaving the room
///
/// Parameter:
///
/// userId
///
/// reason The reason for leaving, 0 means the user exits the room actively, 1 means the user exits after timeout, 2 means being kicked out of the room.
onUserLeave,

/*
* During an multi-person calling, if other participants invite others, they will receive this callback
* For example, A-B-C is in the multi-person calling, A invites [D, E] into the call, B and C will receive the callback of [D, E]
* If A invites F to enter the group chat at this time, then B and C will receive the callback of [D, E, F]
* @Parameter userIdList invite group
*/
onGroupCallInviteeListUpdate,

/*
* Invite to a calling callback
* @param sponsor inviter
* @param userIdList who is also invited
* @param isFromGroup whether multi-person calling
* @param callType Invitation type: 1-Voice call, 2-Video call
*/
onInvited,

/*
* 1. In a single calling, only the initiator will receive a rejection callback
* For example, A invites B and C to enter the call, and B rejects it, A can receive the callback, but C cannot
*
* 2. In an multi-person callilng, all invitees can receive this callback
* For example, A invites B and C to enter the call, and B rejects it, both A and C can receive the callback
* @param userId the user who rejected the call
*/
onReject,

/*
* 1. In a single calling, only the initiator will receive an unanswered callback
* For example, A invites B and C to enter the call, and B does not answer, A can receive the callback, but C cannot
*
* 2. In an multi-person callilng, all invitees can receive this callback
* For example, A invites B and C to enter the call, but B does not answer, both A and C can receive the callback
* @param userId
*/
onNoResp,

/*
* The invitor is busy
* @param userId busy user
*/
onLineBusy,

/*
* As the invitee, it will be received. Receiving this callback means that the call has been cancelled.
*/
onCallingCancel,

/*
* As the invitee, it will be received. Receiving this callback means that the call has been timeouted.
*/
onCallingTimeout,

/*
* Receiving this callback indicates that the call is over
*/
onCallEnd,

/// Whether the remote user has a playable main road image (usually used for the camera)
///
/// When you receive the `onUserVideoAvailable`(userId, true) notification, it means that there are available video data frames for this picture. At this point, you need to call the `startRemoteView`(userid) interface to load the user's remote screen. You will then receive a first frame rendering callback called `onFirstVideoFrame`(userid) .
///
/// When you receive the `onUserVideoAvailable`(userId, false) notification, it means that the remote video has been closed, probably because the user called `muteLocalVideo`() or `stopLocalPreview`().
///
/// Parameter:
///
/// userId User ID
///
/// Whether the available screen is open
onUserVideoAvailable,

/// Whether the remote user has a playable main road image (usually used for the camera)
///
/// When you receive the `onUserVideoAvailable`(userId, true) notification, it means that there are available video data frames for this picture. At this point, you need to call the `startRemoteView`(userid) interface to load the user's remote screen. You will then receive a first frame rendering callback called `onFirstVideoFrame`(userid) .
///
/// When you receive the `onUserVideoAvailable`(userId, false) notification, it means that the remote video has been closed, probably because the user called `muteLocalVideo`() or `stopLocalPreview`().
///
/// Parameter param:
///
/// userId User ID
///
/// Whether the available screen is open
onUserAudioAvailable,

/// The callback used to indicates the volume level, including the volume of each userId and the total volume of the remote end.
///
/// You can switch this callback or set its firing interval by calling the `enableAudioVolumeEvaluation` interface in TRTCCloud. It should be noted that after calling `enableAudioVolumeEvaluation` to turn on the volume callback, this callback will be called at the set time interval regardless of whether someone is speaking in the channel; if no one is speaking, `userVolumes` will be empty and `totalVolume` will be 0.
///
/// Note: When userId is the local user ID, it means its own volume, and userVolumes only contains the volume information of the user who is talking (the volume is not 0).
///
/// Parameter param:
///
/// userVolumes The volume of all talking room members, ranging from 0 - 100.
///
/// totalVolume The total volume of all remote members, ranging from 0 to 100.
onUserVoiceVolume,

//Other users log in to the same account and are kicked off the line
onKickedOffline
copied to clipboard
QA #
1: How to customize the call interface?。
This plug-in provides single and multi-person calls by default. If you need to customize the call interface, please use the enableCustomViewRoute method to open the custom view. After enabling, after receiving the audio and video call invitation, the audio and video call pages will not be automatically opened. You can use the setCallingListener method to set message monitoring and monitoring of user entry and other information to achieve invitation sending and receiving and audio and video calling services. Also use sharedInstance to get a TRTCCalling instance. This instance provides TRTC related capabilities, such as switch camera, switch microphone, hang up, answer, etc.
Contact Us #
Please do not hesitate to contact us in the following place, if you have any further questions or tend to learn more about the use cases.

Telegram Group: https://t.me/+1doS9AUBmndhNGNl
WhatsApp Group: https://chat.whatsapp.com/Gfbxk7rQBqc8Rz4pzzP27A
QQ Group: 788910197, chat in Chinese

Our Website: https://www.tencentcloud.com/products/im?from=pub

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter