基于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>
posted @ 2024-01-29 10:46  xuelin  阅读(131)  评论(0编辑  收藏  举报