bl-trtc-callkit-vue 1.0.4 → 1.1.1

package/README.md

@@ -1,7 +1,7 @@
 # bl-trtc-callkit-vue
 
-基于腾讯云 TRTC SDK 开发的 Vue 3 通话组件，支持音视频通话、网络质量监测、动态视频质量调整等功能。
-
+基于腾讯云 TRTC SDK 开发的 Vue 3 通话组件，支持一对一音视频通话、网络质量监测、动态视频质量调整等功能。
+（内部使用、userSig不安全）
 ## 安装
 
 ```bash
@@ -13,42 +13,244 @@ npm install bl-trtc-callkit-vue
 ### 基本用法
 
 ```vue
+<script setup>
+import { ref, onMounted } from 'vue'
+import BlTRTCCallKit from 'bl-trtc-callkit-vue';
+
+const callKitRef = ref(null)
+
+const targetId = ref('')
+const localUserId = ref(String(Math.floor(Math.random() * 900 + 100)))
+
+const remoteUsers = ref([])
+
+function onNotify({ type, text }) {
+  showToast(text, type)
+}
+
+// 处理远端用户状态变化
+function onRemoteUserStatusChange({ userId, action, userList }) {
+  console.log('远端用户状态变化:', { userId, action, userList })
+
+  if (action === 'enter') {
+    // 检查用户是否已在列表中
+    const existingIndex = remoteUsers.value.findIndex(u => u.userId === userId)
+    if (existingIndex === -1) {
+      remoteUsers.value.push({
+        userId,
+        status: 'online',
+      })
+    } else {
+      // 更新现有用户状态
+      remoteUsers.value[existingIndex].status = 'online'
+    }
+  } else if (action === 'exit') {
+    const existingIndex = remoteUsers.value.findIndex(u => u.userId === userId)
+    if (existingIndex !== -1) {
+      remoteUsers.value[existingIndex].status = 'offline'
+    }
+  }
+}
+
+onMounted(() => {
+  // 初始化：传入 userId、sdkAppId、sdkSecretKey
+  callKitRef.value.init({
+    userId: localUserId.value,
+    sdkAppId: "YOUR_SDK_APP_ID",
+    sdkSecretKey: "YOUR_SDK_SECRET_KEY"
+  })
+})
+
+// 主动呼叫某用户
+function callSomeone() {
+  callKitRef.value.handleCall(targetId.value)
+}
+
+function handleRemoteUserClick(user) {
+  if (user.status === 'online') {
+    callKitRef.value.handleCall(user.userId)
+  } else {
+    alert('对方已离线')
+  }
+}
+
+const toastList = ref([]);
+// 生成唯一ID
+function generateId() {
+  return Date.now() + Math.random()
+}
+
+// 显示 Toast
+function showToast(text, type = 'info') {
+  const id = generateId()
+  const toast = {
+    id,
+    text,
+    type
+  }
+
+  toastList.value.push(toast)
+
+  // 3秒后自动移除
+  setTimeout(() => {
+    const index = toastList.value.findIndex(item => item.id === id)
+    if (index !== -1) {
+      toastList.value.splice(index, 1)
+    }
+  }, 3000)
+}
+
+// 获取图标
+function getIcon(type) {
+  switch (type) {
+    case 'error':
+      return '❌'
+    case 'info':
+    default:
+      return 'ℹ️'
+  }
+}
+</script>
+
 <template>
-  <CallKit ref="callKitRef" @notify="handleNotify" @remote-user-status-change="handleRemoteUserStatusChange" />
-  <button @click="initCallKit">初始化</button>
-  <button @click="startCall">发起呼叫</button>
+  <div class="wrapper">
+    <div style="font-size: 1rem;">当前 userId：<strong>{{ localUserId }}</strong></div>
+
+    <div class="remote-user-call">
+      <input v-model="targetId" placeholder="输入要呼叫的用户ID" style="height: 36px;" />
+      <button @click="callSomeone" style="height: 36px;padding: 0 8px;">呼叫 {{ targetId || '目标用户' }}</button>
+    </div>
+
+    <div style="margin-top:12px; border:1px solid #ccc; padding:10px; border-radius:4px;">
+      <h4>远端用户列表</h4>
+      <ul>
+        <li v-for="user in remoteUsers" :key="user.userId"
+          :style="{ color: user.status === 'online' ? 'green' : 'gray' }" @click="handleRemoteUserClick(user)">
+          {{ user.userId }} ({{ user.status === 'online' ? '在线' : '离线' }})
+        </li>
+      </ul>
+    </div>
+
+    <BlTrtcCallkit ref="callKitRef" @notify="onNotify" @remote-user-status-change="onRemoteUserStatusChange" />
+
+    <!-- Toast 通知组件 -->
+    <div class="toast-container">
+      <transition-group name="toast">
+        <div v-for="toast in toastList" :key="toast.id" :class="['toast-item', `toast-${toast.type}`]">
+          <span class="toast-icon">{{ getIcon(toast.type) }}</span>
+          <span class="toast-text">{{ toast.text }}</span>
+        </div>
+      </transition-group>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue';
-import CallKit from 'bl-trtc-callkit-vue';
+<style scoped>
+.wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+}
+
+.wrapper .remote-user-call {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
 
-const callKitRef = ref<any>(null);
+.wrapper ul {
+  margin-top: 12px;
+}
 
-// 初始化 CallKit
-async function initCallKit() {
-  await callKitRef.value.init({
-    userId: 'your-user-id',
-    sdkAppId: 'your-sdk-app-id',
-    sdkSecretKey: 'your-sdk-secret-key'
-  });
+.wrapper li {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  background: #eee;
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin-bottom: 12px;
+  cursor: pointer;
 }
 
-// 发起呼叫
-function startCall() {
-  callKitRef.value.handleCall('target-user-id');
+.toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 300px;
 }
 
-// 处理通知
-function handleNotify(data: { type: string; text: string }) {
-  console.log('CallKit 通知:', data);
+.toast-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: slideInRight 0.3s ease;
+  min-width: 250px;
+  max-width: 100%;
 }
 
-// 处理远程用户状态变化
-function handleRemoteUserStatusChange(data: { userId: string; action: string; userList: string[] }) {
-  console.log('远程用户状态变化:', data);
+.toast-info {
+  background-color: #e3f2fd;
+  color: #1976d2;
+  border-left: 4px solid #2196f3;
 }
-</script>
+
+.toast-error {
+  background-color: #ffebee;
+  color: #d32f2f;
+  border-left: 4px solid #f44336;
+}
+
+.toast-icon {
+  margin-right: 10px;
+  font-size: 18px;
+}
+
+.toast-text {
+  flex: 1;
+  word-break: break-word;
+}
+
+/* 动画效果 */
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+  position: absolute;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+</style>
 ```
 
 ## API 说明
@@ -79,7 +281,7 @@ function handleRemoteUserStatusChange(data: { userId: string; action: string; us
 
 ## 功能特性
 
-1. **音视频通话**：支持一对一和多人音视频通话
+1. **音视频通话**：仅支持一对一音视频通话
 2. **网络质量监测**：实时监测网络质量，动态调整视频质量
 3. **设备控制**：支持开启/关闭麦克风、摄像头
 4. **扬声器控制**：支持切换扬声器/听筒
@@ -91,27 +293,3 @@ function handleRemoteUserStatusChange(data: { userId: string; action: string; us
 2. 确保在 HTTPS 环境下使用，否则可能无法正常访问摄像头和麦克风
 3. 首次使用时需要用户授权摄像头和麦克风权限
 4. 建议在组件销毁前调用 `hangup` 方法关闭所有媒体流
-
-## 开发
-
-### 安装依赖
-
-```bash
-npm install
-```
-
-### 启动开发服务器
-
-```bash
-npm run dev
-```
-
-### 构建生产版本
-
-```bash
-npm run build
-```
-
-## 许可证
-
-MIT

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bl-trtc-callkit-vue",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.1.1",
   "type": "module",
   "main": "./dist/bl-trtc-callkit-vue.umd.cjs",
   "module": "./dist/bl-trtc-callkit-vue.js",