Web&H5 (Vue2/Vue3)

npm install @trtc/calls-uikit-vue2

npm install @trtc/calls-uikit-vue2.6 @vue/composition-api 

npm i -D unplugin-vue2-script-setup

<script lang="ts">
import Vue from 'vue';
import { TUICallKit, TUICallKitAPI, CallMediaType } from '@trtc/calls-uikit-vue2';
import * as GenerateTestUserSig from './debug/GenerateTestUserSig-es';

export default {
  name: 'App',
  components: { TUICallKit },
  data() {
    return {
      // ① 替换成你的应用信息（仅本地调试；生产环境请由服务端签发 UserSig）
      SDKAppID: 0, // number 类型
      SecretKey: '', // string 类型
      myUserID: 'Bob',
      peerUserID: 'Alice',
      initialized: false,
      inCall: false,
      minimized: false,
      pos: { x: 24, y: 24 },
      drag: { dx: 0, dy: 0, w: 640, h: 480 },
    };
  },
  // 页面加载时，用查询参数预填两个 UserID（只用于填表，不改变页面文案）
  mounted() {
    const params = new URLSearchParams(window.location.search);
    this.myUserID = params.get('me') || 'Bob';
    this.peerUserID = params.get('peer') || 'Alice';
  },
  methods: {
    // ② 登录（登录前先重置）
    async init() {
      await TUICallKitAPI.hangup(); // 通话中时先挂断，空闲时直接返回
      await TUICallKitAPI.destroyed(); // 重置上一次登录
      const { userSig } = GenerateTestUserSig.genTestUserSig({
        userID: this.myUserID,
        SDKAppID: this.SDKAppID,
        SecretKey: this.SecretKey,
      });
      await TUICallKitAPI.init({ userID: this.myUserID, userSig, SDKAppID: this.SDKAppID });
      // 开启小窗特性
      TUICallKitAPI.enableFloatWindow(true);
      this.initialized = true;
    },
    // ③ 打开新标签页，自动填好对方的 UserID
    openPeerTab() {
      const url = new URL(window.location.href);
      url.search = '';
      url.searchParams.set('me', this.peerUserID || 'Alice');
      url.searchParams.set('peer', this.myUserID || 'Bob');
      window.open(url.toString(), '_blank');
    },
    // ④ 发起通话
    async call() {
      await TUICallKitAPI.calls({
        userIDList: [this.peerUserID],
        type: CallMediaType.VIDEO,
      });
    },
    // 监听通话状态与最小化状态，用来控制外层容器的显示
    onStatusChanged({ newStatus }: { oldStatus: string; newStatus: string }) {
      this.inCall = newStatus !== 'idle';
    },
    onMinimizedChanged(_old: boolean, current: boolean) {
      this.minimized = current;
    },
    // ⑤ 通话窗口支持拖拽（Vue 2 没有 Teleport；此容器 position:fixed 且父级无 transform，效果等同）
    startDrag(e: PointerEvent) {
      const box = (e.currentTarget as HTMLElement).parentElement!;
      this.drag = {
        dx: e.clientX - this.pos.x,
        dy: e.clientY - this.pos.y,
        w: box.offsetWidth,
        h: box.offsetHeight,
      };
      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
    },
    onDrag(e: PointerEvent) {
      if (!e.buttons) return;
      this.pos.x = Math.min(Math.max(e.clientX - this.drag.dx, 0), window.innerWidth - this.drag.w);
      this.pos.y = Math.min(Math.max(e.clientY - this.drag.dy, 0), window.innerHeight - this.drag.h);
    },
  },
};
</script>

<template>
  <div id="app">
    <main class="page">
      <section class="step">
        <h2>第一步. 登录 {{ initialized ? '✅' : '' }}</h2>
        <p :class="initialized ? 'ok' : 'muted'">
          {{ initialized ? `已登录：${myUserID}` : '当前未登录' }}
        </p>
        <label class="row">
          <span>我的 UserID</span>
          <input v-model="myUserID" />
        </label>
        <button class="primary" @click="init">
          {{ initialized ? '重新登录' : '登录' }}
        </button>
      </section>

      <section class="step">
        <h2>第二步. 打开新的标签页 登录被叫用户</h2>
        <p class="muted">会自动填好对方的 UserID，登录后即可互相拨打。</p>
        <button class="ghost" @click="openPeerTab">打开新的标签页 登录被叫用户</button>
      </section>

      <section class="step">
        <h2>第三步. 发起通话</h2>
        <label class="row">
          <span>被叫 UserID</span>
          <input v-model="peerUserID" />
        </label>
        <button class="primary" :disabled="!initialized || !peerUserID" @click="call">
          发起通话
        </button>
      </section>
    </main>

    <!-- ⑥ Vue 2 无 Teleport：靠 position:fixed 挂在视口上（父级不能有 transform/filter） -->
    <section v-show="inCall && !minimized" class="call-window" :style="{ left: `${pos.x}px`, top: `${pos.y}px` }">
      <header @pointerdown="startDrag" @pointermove="onDrag">通话窗口（按住拖动）</header>
      <TUICallKit
        style="width: 640px; height: 480px"
        :status-changed="onStatusChanged"
        :on-minimized="onMinimizedChanged"
      />
    </section>
  </div>
</template>

<style scoped>
.page { max-width: 520px; margin: 48px auto; padding: 0 20px; font-family: system-ui, -apple-system, sans-serif; } .step { margin-bottom: 20px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; } .step h2 { margin: 0 0 10px; font-size: 16px; } .row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #475569; font-size: 14px; } .row input { flex: 1; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; } button { padding: 8px 14px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 600; } button:disabled { opacity: 0.5; cursor: not-allowed; } .primary { background: #2563eb; color: #fff; } .ghost { background: #f1f5f9; color: #334155; } .muted { color: #94a3b8; font-size: 13px; } .ok { color: #10b981; font-size: 13px; } .call-window { position: fixed; z-index: 9999; overflow: hidden; border-radius: 12px; background: #0f172a; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .call-window header { padding: 10px 12px; color: #e2e8f0; font-size: 13px; cursor: move; user-select: none; background: #111827; }
</style>