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

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,
    ...
)

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);
        }
    }

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});

call

start single calling

 Future<void> call(String userId,CallingScenes type,)

groupCall

start calling for multi-person

 Future<void> call(List<String> userIdList, CallingScenes type, String? groupId)

destroy

 void destroy()

enableCustomViewRoute

enable/disable custom view route

 void enableCustomViewRoute(bool isEnable)

enableFloatingWindow

enable/disable floating window

 void enableFloatingWindow(bool isEnable)

setCallingListener

 void setCallingListener(TUICallingListener listener);

removeCallingListener

 void removeCallingListener(TUICallingListener listener);

sharedInstance

    Future<TRTCCalling> sharedInstance();

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

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: t.me/+1doS9AUBmndhNGNl
WhatsApp Group: chat.whatsapp.com/Gfbxk7rQBqc8Rz4pzzP27A
QQ Group: 788910197, chat in Chinese

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

Voice Call and Video Call

Tencent Cloud Voice Call and Video Call

Experience DEMO

API Preview

Basic functions

Widgets

Get started

What needs to be done before we start

Step 1: Add `navigatorKey`

Step 2: Initialize Calling Service

Basic function define

init

call

groupCall

destroy

enableCustomViewRoute

enableFloatingWindow

setCallingListener

removeCallingListener

sharedInstance

TUICallingListener

QA

1: How to customize the call interface?。

Contact Us

Libraries

tim_ui_kit_calling_plugin package

Voice Call and Video Call

Tencent Cloud Voice Call and Video Call

Experience DEMO

API Preview

Basic functions

Widgets

Get started

What needs to be done before we start

Step 1: Add navigatorKey

Step 2: Initialize Calling Service

Basic function define

init

call

groupCall

destroy

enableCustomViewRoute

enableFloatingWindow

setCallingListener

removeCallingListener

sharedInstance

TUICallingListener

QA

1: How to customize the call interface?。

Contact Us

Libraries

tim_ui_kit_calling_plugin package

Step 1: Add `navigatorKey`