TUICallKit
is an audio/video call component that includes UI elements. You can use its APIs to quickly implement an audio/video call application similar to WeChat. For directions on integration, see Integrating TUICallKit.<TUICallKit/>
: The call component.<TUICallKitMini/>
: The floating call window. If <TUICallKit/>allowedMinimized
is true
, <TUICallKitMini/>
is required.TUICallKitServer
: The call instance, which has the following APIs:TUICallKit
. TUICallKit
.<TUICallKit/>
API detailsParameter | Description | Type | Required | Default Value |
allowedMinimized | Whether to allow window minimization. If this is true , TUICallKitMini is required. If this is false , the minimize button will be hidden. | boolean | No | false |
allowedFullScreen | Whether to allow full screen. If this is false , the full screen button will be hidden. | boolean | No | true |
videoDisplayMode | Screen display mode | VideoDisplayMode | No | VideoDisplayMode.COVER |
videoResolution | Call resolution | VideoResolution | No | VideoResolution.RESOLUTION_480P |
beforeCalling | This is executed when the user makes or receives a call. | function(type, error) | No | - |
afterCalling | This is executed after a call ends. | function() | No | - |
onMinimized | This is executed when the component is minimized. | function(oldStatus, newStatus) | No | - |
@kicked-out | The event thrown by the component will be triggered when the currently logged in user is kicked out of the login, and the call will be automatically ended | @kicked-out="handleKickedOut" | No | - |
@status-changed | The event thrown by the component will be triggered when the call status changes, see note below for details of the call status | @status-changed="handleStatusChanged" | No | - |
videoDisplayMode
has three values:VideoDisplayMode.CONTAIN
、VideoDisplayMode.COVER
、VideoDisplayMode.FILL
,default is VideoDisplayMode.COVER
.VideoDisplayMode.CONTAIN
Prioritize to ensure that the video content is displayed in its entirety. Scale the video size isometrically until one side of the video window is aligned with the viewport border. If the video size does not match the size of the display window, the video will be scaled to fill the window while maintaining the aspect ratio, and the scaled video will have a black border around it.VideoDisplayMode.COVER
Prioritize to ensure that the viewport is filled. The video is scaled equally in size until the entire viewport is filled with video. If the video is different in length and width from the display window, the video stream will fill the window with a peripheral crop or image stretch in the same proportion as the display window.VideoDisplayMode.FILL
Ensures that the viewport is filled and the video content is displayed in its entirety, but does not guarantee that the video size remains proportional. The width and height of the video will be stretched to match the size of the viewport.videoResolution
has three values:VideoResolution.RESOLUTION_480P
、VideoResolution.RESOLUTION_720P
、RESOLUTION_1080P.FILL
,default is VideoResolution.RESOLUTION_480P
.video Profile | resolution(width × height) | Frame Rate(fps) | Code Rate(kbps) |
480p | 640 × 480 | 15 | 900 |
720p | 1280 × 720 | 15 | 1500 |
1080p | 1920 × 1080 | 15 | 2000 |
@status-changed
The state inside the call component can be thrown, handleStatusChanged({ oldStatus, newStatus })
receive the new state and the old state, the use of reference to the following sample code, where the state has the following kinds of:import { STATUS } from "@tencentcloud/call-uikit-vue";
Constants | Physical meaning |
STATUS.IDLE | Idle status |
STATUS.BE_INVITED | Receive a call invitation |
STATUS.DIALING_C2C | Calling one-to-one |
STATUS.DIALING_GROUP | Group call in progress |
STATUS.CALLING_C2C_AUDIO | Ongoing one-to-one audio calls |
STATUS.CALLING_C2C_VIDEO | Ongoing one-to-one video calls |
STATUS.CALLING_GROUP_AUDIO | Group audio call in progress |
STATUS.CALLING_GROUP_VIDEO | Group video call in progress |
<TUICallKit:allowedMinimized="true":allowedFullScreen="true":videoDisplayMode="VideoDisplayMode.CONTAIN":videoResolution="VideoResolution.RESOLUTION_1080P":beforeCalling="beforeCalling":afterCalling="afterCalling":onMinimized="onMinimized"@kicked-out="handleKickedOut"@status-changed="handleStatusChanged"/><TUICallKitMini />``````javascriptimport { TUICallKit, TUICallKitMini, TUICallKitServer, VideoDisplayMode, VideoResolution, STATUS } from "@tencentcloud/call-uikit-vue"; // vue2 要换成 '@tencentcloud/call-uikit-vue2'/*** beforeCalling* @param { string } type value is: "invited" | "call" | "groupCall",* @param { number } error.code* @param { string } error.type* @param { string } error.code*/function beforeCalling(type, error) {console.log(type, error);}function afterCalling() {console.log("--");}/*** onMinimized* @param { boolean } oldStatus* @param { boolean } newStatus*/function onMinimized(oldStatus, newStatus) {if (newStatus === true) {console.log("TUICallKit enter minimized state");} else {console.log("TUICallKit exit minimized state");}}function handleKickedOut() {console.error("The user has been kicked out");}function handleStatusChanged(args: { oldStatus: string; newStatus: string; }) {const { oldStatus, newStatus } = args;if (newStatus === STATUS.CALLING_C2C_VIDEO) {console.log(`[Call Demo] state change: ${oldStatus} -> ${newStatus}`);}}
TUICallKitServer
import { TUICallKitServer } from "@tencentcloud/call-uikit-vue";
TUICallKit
. It must be called before call
and groupCall
.try {await TUICallKitServer.init({ SDKAppID, userID, userSig });// await TUICallKitServer.init({ tim, SDKAppID, userID, userSig});alert("init finished");} catch (error: any) {alert(`init failed, reason is:${error}`);}
Parameter | Type | Required | Description |
SDKAppID | Number | Yes | The SDKAppID of the IM application. |
userID | String | Yes | The ID of the current user, which is a string that can contain only letters (a-z and A-Z), numbers (0-9), hyphens (-), and underscores (_). |
userSig | String | Yes | |
TIM instance | Any | No | If you already have TIM instances, you can use this parameter to guarantee the uniqueness of a TIM instance. |
import { TUICallKitServer } from "./components/TUICallKit/Web";TUICallKitServer.call({userID: 'jack',type: 1,});
Parameter | Type | Required | Description |
userID | String | Yes | The ID of the user to call. |
type | Number | Yes | The call type. 1: Audio call; 2: Video call. |
timeout | Number | No | The timeout period (seconds). 0 indicates the call will not time out. The default value is 30 . |
offlinePushInfo | Object | No | The custom offline push message. This is valid only if your tsignaling version is 0.8.0 or later. |
Parameter | Type | Required | Description |
offlinePushInfo.title | String | No | The message title. |
offlinePushInfo.description | String | No | The message content. |
offlinePushInfo.androidOPPOChannelID | String | No | The channel ID for the offline push message on OPPO phones in v8.0 or later. |
offlinePushInfo.extension | String | No | The pass-through content. This is valid only if your tsignaling version is 0.9.0 or later. |
import { TUICallKitServer } from "./components/TUICallKit/Web";TUICallKitServer.groupCall({userIDList: ['jack', 'tom'],groupID: 'xxx',type: 1,});
Parameter | Type | Required | Description |
userIDList | Array | Yes | The IDs of the users to call. |
type | Number | Yes | The call type. 1: Audio call; 2: Video call. |
groupID | String | Yes | The group ID. |
timeout | Number | No | The timeout period (seconds). 0 indicates the call will not time out. The default value is 30 . |
offlinePushInfo | Object | No | The custom offline push message. This is valid only if your tsignaling version is 0.8.0 or later. |
offlinePushInfo
, see above.TUICallKitServer.setLanguage("zh-cn"); // "en" | "zh-cn"
Parameter | Type | Required | Description |
lang | String | Yes | language: en 或 zh-cn |
TUICallKit
.import { TUICallKitServer } from "./components/TUICallKit/Web";TUICallKitServer.destroyed();
Was this page helpful?