PC端音视频通话 基于VUE2的

基于VUE2的PC端的音视频通话

 

文档：https://cloud.tencent.com/document/product/647/78731

PC端音视频项目只能运行在https协议下，策略要求

步骤：粘贴了主要代码，相关次要代码比如token，请求人列表，userSing等根绝项目进行灵活变通

npm install @tencentcloud/call-uikit-vue2

 

 

<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>

 

基本操作完成（主要代码也完成）