视频通话 | 语音通话 |
| |
npm install -g @vue/cli
vue create call-demo
cd call-demo
npm install @tencentcloud/call-uikit-vue
npm install @tencentcloud/call-uikit-vue2
<template><div><button @click="init()"> init </button><button @click="call()"> 发起视频通话 </button><details><summary>自动接听等特性</summary><button @click="accept()"> accept </button><button @click="reject()"> reject </button><button @click="hangup()"> hangup </button></details><div style="width: 50rem; height: 35rem; border: 1px solid salmon;"><TUICallKit:beforeCalling="beforeCalling":afterCalling="afterCalling":onMinimized="onMinimized":allowedMinimized="true":allowedFullScreen="true":videoDisplayMode="VideoDisplayMode.CONTAIN":videoResolution="VideoResolution.RESOLUTION_1080P"@kicked-out="handleKickedOut"@status-changed="handleStatusChanged" /></div></div></template><script lang="ts" setup>import { TUICallKit, TUICallKitServer, TUICallType, VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue";// 以下 4 个变量需要在运行前修改const SDKAppID = 0;const userID = "";const userSig = "";const callUserID = "";async function init() {try {await TUICallKitServer.init({ SDKAppID, userID, userSig });// await TUICallKitServer.init({ tim, SDKAppID, userID, userSig}); // 如果工程中已有 tim 实例,需在此处传入alert("初始化完成");} catch (error: any) {alert(`初始化失败,原因:${error}`);}}async function call() {try {await TUICallKitServer.call({ userID: callUserID, type: TUICallType.VIDEO_CALL }); // 1v1 通话// TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // 群组通话} catch (error: any) {alert(`拨打失败,原因:${error}`);}}function beforeCalling(type: string, error: any) {console.log("通话即将开始", type, error);}function afterCalling() {console.log("通话已结束");}function onMinimized(oldStatus: string, newStatus: string) {console.log("最小化状态变更: " + oldStatus + " -> " + newStatus);}function handleKickedOut() {console.error("The user has been kicked out");}function handleStatusChanged(args: { oldStatus: string; newStatus: string; }) {const { oldStatus, newStatus } = args;console.log("通话状态变更: " + oldStatus + " -> " + newStatus);}async function accept() {try {await TUICallKitServer.accept();alert("已自动接听");} catch (error) {alert(`自动接听失败,原因:${error}`);}}async function reject() {try {await TUICallKitServer.reject();alert("已自动拒绝");} catch (error) {alert(`自动拒绝失败,原因:${error}`);}}async function hangup() {try {await TUICallKitServer.hangup();alert("已自动挂断");} catch (error) {alert(`自动挂断失败,原因:${error}`);}}</script>
<template><div><button @click="init()"> 步骤 1: 初始化 </button><button @click="call()"> 步骤 2: 发起视频通话 </button><div style="width: 50rem; height: 35rem; border: 1px solid salmon;"><TUICallKit /> <!-- 组件默认显示空内容,进入通话后自动显示 --></div></div></template><script>import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue2";export default {name: 'App',data() {return {SDKAppID: 0,userID: '',userSig: '',callUserID: '',};},components: {TUICallKit},methods: {async init() {try {await TUICallKitServer.init({SDKAppID: this.SDKAppID,userID: this.userID,userSig: this.userSig// tim: this.tim // 如果工程中已有 tim 实例,需在此处传入});alert("初始化完成");} catch (error) {alert(`初始化失败,原因:${error}`);}},async call() {try {// 1v1 通话await TUICallKitServer.call({userID: this.callUserID,type: TUICallType.VIDEO_CALL});// 群组通话// TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: TUICallType.VIDEO_CALL });} catch (error) {alert(`拨打失败,原因:${error}`);}}},}</script>
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";await TUICallServer.call({userID: 'mike',type: TUICallType.VIDEO_CALL});
参数 | 类型 | 含义 |
userID | String | 目标用户的 userID: "mike" |
type | Number | 通话的媒体类型,语音通话(type = 1)、视频通话(type = 2) |
import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";await TUICallServer.groupCall({groupID: "xxx",userIDList: ['jack', 'tom'],type: TUICallType.VIDEO_CALL});
参数 | 类型 | 含义 |
groupID | String | 群组 Id,示例: "12345678" |
userIDList | Array<string> | 目标用户的 UserID 列表,示例: ["jane", "mike", "tommy"] |
type | Number | 通话的媒体类型,语音通话(type = 1)、视频通话(type = 2) |
TUICallKitServer
组件的接口,可以灵活的控制 <TUICallKit/>
组件的状态,实现业务侧的更多需求。accept()
: 接听来电reject()
: 拒绝来电hangup()
: 挂断已接通的电话// 此接口需确保在收到来电邀请后调用(status === STATUS.BE_INVITED),通话状态可以参考 `@status-changed` 的抛出。try {await TUICallKitServer.accept();alert(`已自动接听`);} catch (error: any) {alert(`自动接听失败,原因:${error}`);}
// 与 accept() 相同,具有一样的调用时机限制。try {await TUICallKitServer.reject();alert(`已自动拒绝`);} catch (error: any) {alert(`自动拒绝失败,原因:${error}`);}
// 调用此接口需确保已经在呼叫状态或接通状态(status !== STATUS.BE_INVITED && status !== STATUS.IDLE)。通话状态可以参考 `@status-changed` 的抛出。try {await TUICallKitServer.hangup();alert(`已自动挂断`);} catch (error: any) {alert(`自动挂断失败,原因:${error}`);}
本页内容是否解决了您的问题?