沉浸式搭建微信同款音视频通话之全流程（基操细节） ｜ 技术创作特训营第二期

<template>
  <div>
    <button @click="init"> 1、初始化 </button>
    <button @click="call"> 2、发起视频通话 </button>
    <div style="width: 50rem; height: 40rem; border: 1px solid salmon;">
      <TUICallKit /> <!-- 3、组件默认显示空内容，进入通话后自动显示 -->
    </div>
  </div>
</template>

<script>
import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue2";

export default {
  name: 'App',
  data() {
    return {
      SDKAppID: 0, //应用 SDKAppID，int类型
      userID: 'xxx', //用户 ID
      userSig: 'xxx', //用户签名
      callUserID: 'xxx', //想要呼叫的 userID
    };
  },
  components: {
    TUICallKit
  },
  methods: {
    // 1、初始化
    async init() {
      try {
        await TUICallKitServer.init({
          SDKAppID: this.SDKAppID,
          userID: this.userID,
          userSig: this.userSig
        });
        alert("初始化成功");
      } catch (error) {
        alert(`初始化失败，失败原因：${error}`);
      }
    },
    // 2、发起视频通话
    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>

<script>
import { TUICallKit } from "@tencentcloud/call-uikit-vue";
<script>

<template>
  <TUICallKit />
</template>

<script>
import { TUICallKitServer } from "@tencentcloud/call-uikit-vue";

async function init() {
  try {
    await TUICallKitServer.init({ SDKAppID, userID, userSig }); 
    alert("初始化完成");
  } catch (error) {
    alert(`初始化失败，失败原因：${error}`);
  }
}
<script>

<template>
    <button @click="init()"> 1、初始化 </button>
</template>

// 该接口需要确保在收到来电邀请后调用（status === STATUS.BE_INVITED）
try {
  await TUICallKitServer.accept();
  alert(`自动接听`);
} catch (error) {
  alert(`自动接听失败，失败原因：${error}`);
}

// 和上面的 accept() 相同，有一样的调用时机限制
try {
  await TUICallKitServer.reject();
  alert(`自动拒绝`);
} catch (error) {
  alert(`自动拒绝失败，失败原因：${error}`);
}

// 该接口需要确保已经在呼叫状态或接通状态（status !== STATUS.BE_INVITED && status !== STATUS.IDLE）
try {
  await TUICallKitServer.hangup();
  alert(`自动挂断`);
} catch (error) {
  alert(`自动挂断失败，失败原因：${error}`);
}

<template>
  <div>
    <button @click="init"> 1、初始化 </button>
    <button @click="call"> 2、发起视频通话 </button>
    <details>
      <summary>3、自动接听等特性</summary>
      <button @click="accept"> accept </button>
      <button @click="reject"> reject </button>
      <button @click="hangup"> hangup </button>
    </details>
    <div style="width: 50rem; height: 40rem; 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>
import { TUICallKit, TUICallKitServer, TUICallType, VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue2";

export default {
  name: 'App',
  data() {
    return {
      SDKAppID: 0, //应用 SDKAppID，int类型
      userID: 'xxx', //用户 ID
      userSig: 'xxx', //用户签名
      callUserID: 'xxx', //想要呼叫的 userID
      VideoDisplayMode, //画面显示模式
      VideoResolution  //通话分辨率
    };
  },
  components: {
    TUICallKit
  },
  methods: {
    async init() {
      try {
        await TUICallKitServer.init({
          SDKAppID: this.SDKAppID,
          userID: this.userID,
          userSig: this.userSig
        });
        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}`);
      }
    },
    beforeCalling(type, error) {
      console.log("通话即将开始", type, error);
    },
    afterCalling() {
      console.log("通话已结束");
    },
    onMinimized(oldStatus, newStatus) {
      console.log("最小化状态变更: ", oldStatus,newStatus);
    },
    handleKickedOut() {
      console.error("111");
    },
    handleStatusChanged(args) {
      const { oldStatus, newStatus } = args;
      console.log("通话状态变更: ", oldStatus, newStatus);
    },
    async accept() {
      try {
        await TUICallKitServer.accept();
        alert("自动接听");
      } catch (error) {
        alert(`自动接听失败原因：${error}`);
      }
    },
    async reject() {
      try {
        await TUICallKitServer.reject();
        alert("自动拒绝");
      } catch (error) {
        alert(`自动拒绝失败原因：${error}`);
      }
    },
    async hangup() {
      try {
        await TUICallKitServer.hangup();
        alert("自动挂断");
      } catch (error) {
        alert(`自动挂断失败原因：${error}`);
      }
    }
  },
}
</script>

import { genTestUserSig } from "@tencentcloud/call-uikit-vue/debug/GenerateTestUserSig-es.js";

const { userSig } = genTestUserSig({ userID: "Alice", SDKAppID: 0, SecretKey: "YOUT_SECRETKEY" });