bl-trtc-callkit-vue 1.0.1

package/README.md

@@ -0,0 +1,117 @@
+# bl-trtc-callkit-vue
+
+基于腾讯云 TRTC SDK 开发的 Vue 3 通话组件，支持音视频通话、网络质量监测、动态视频质量调整等功能。
+
+## 安装
+
+```bash
+npm install bl-trtc-callkit-vue
+```
+
+## 使用示例
+
+### 基本用法
+
+```vue
+<template>
+  <CallKit ref="callKitRef" @notify="handleNotify" @remote-user-status-change="handleRemoteUserStatusChange" />
+  <button @click="initCallKit">初始化</button>
+  <button @click="startCall">发起呼叫</button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CallKit from 'bl-trtc-callkit-vue';
+
+const callKitRef = ref<any>(null);
+
+// 初始化 CallKit
+async function initCallKit() {
+  await callKitRef.value.init({
+    userId: 'your-user-id',
+    sdkAppId: 'your-sdk-app-id',
+    sdkSecretKey: 'your-sdk-secret-key'
+  });
+}
+
+// 发起呼叫
+function startCall() {
+  callKitRef.value.handleCall('target-user-id');
+}
+
+// 处理通知
+function handleNotify(data: { type: string; text: string }) {
+  console.log('CallKit 通知:', data);
+}
+
+// 处理远程用户状态变化
+function handleRemoteUserStatusChange(data: { userId: string; action: string; userList: string[] }) {
+  console.log('远程用户状态变化:', data);
+}
+</script>
+```
+
+## API 说明
+
+### 组件方法
+
+| 方法名 | 参数 | 说明 |
+|-------|------|------|
+| `init` | `{ userId: string, sdkAppId: number, sdkSecretKey: string }` | 初始化组件，传入用户 ID、SDK App ID 和 SDK 密钥 |
+| `handleCall` | `targetId: string` | 发起呼叫，传入目标用户 ID |
+| `show` | 无 | 显示通话组件 |
+| `hide` | 无 | 隐藏通话组件 |
+| `hangup` | 无 | 挂断通话 |
+
+### 组件事件
+
+| 事件名 | 回调参数 | 说明 |
+|-------|----------|------|
+| `notify` | `{ type: string, text: string }` | 通知事件，包含通知类型和内容 |
+| `remote-user-status-change` | `{ userId: string, action: string, userList: string[] }` | 远程用户状态变化事件，action 为 'enter' 或 'exit' |
+
+### 组件属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|-------|------|--------|------|
+| `visible` | `boolean` | `false` | 控制组件显示隐藏 |
+| `inCall` | `boolean` | `false` | 是否已接通通话 |
+
+## 功能特性
+
+1. **音视频通话**：支持一对一和多人音视频通话
+2. **网络质量监测**：实时监测网络质量，动态调整视频质量
+3. **设备控制**：支持开启/关闭麦克风、摄像头
+4. **扬声器控制**：支持切换扬声器/听筒
+5. **动态视频质量调整**：根据网络状况自动调整视频分辨率
+
+## 注意事项
+
+1. 使用前需获取腾讯云 TRTC 服务的 SDK App ID 和 SDK 密钥
+2. 确保在 HTTPS 环境下使用，否则可能无法正常访问摄像头和麦克风
+3. 首次使用时需要用户授权摄像头和麦克风权限
+4. 建议在组件销毁前调用 `hangup` 方法关闭所有媒体流
+
+## 开发
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 启动开发服务器
+
+```bash
+npm run dev
+```
+
+### 构建生产版本
+
+```bash
+npm run build
+```
+
+## 许可证
+
+MIT

package/dist/bl-trtc-callkit-vue.css

@@ -0,0 +1 @@
+@charset "UTF-8";.callkit-wrapper[data-v-989115b9]{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999;background-color:#000c}.callkit-wrapper .bottom-controls[data-v-989115b9]{position:fixed;left:0;right:0;bottom:78px;display:flex;justify-content:space-evenly}.callkit-wrapper .operation-btn[data-v-989115b9]{display:flex;flex-direction:column;align-items:center;color:#fff;font-size:1rem;cursor:pointer}.callkit-wrapper .operation-btn img[data-v-989115b9]{width:64px;height:64px;margin-bottom:12px}.callkit-wrapper .equipment-btn img[data-v-989115b9]{border-radius:50%;padding:12px;box-sizing:border-box}.callkit-wrapper .equipment-btn--open img[data-v-989115b9]{background:#fff}.callkit-wrapper .equipment-btn--close img[data-v-989115b9]{background:#000c}.local-video[data-v-989115b9]{position:absolute;top:16px;right:16px;width:120px;height:160px;border-radius:8px;overflow:hidden;background:#000;z-index:1001;box-shadow:0 6px 18px #00000073;transition:transform .18s ease,opacity .18s ease}@media(max-width:600px){.local-video[data-v-989115b9]{width:90px;height:120px;top:12px;right:12px}}.player-container[data-v-989115b9]{display:grid;width:100%;min-height:100px;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));justify-items:center;max-height:100vh;box-sizing:border-box;padding:10px}.player-container .remote[data-v-989115b9]{width:auto;max-width:100%;max-height:100%;background:#000;position:relative;border-radius:6px;overflow:hidden;object-fit:contain}.player-container.single[data-v-989115b9]{display:flex;align-items:center;justify-content:center;height:100vh;padding:0}.player-container.single .remote[data-v-989115b9]{width:auto;max-width:100%;max-height:100%;margin:0}@media(max-width:600px){.player-container[data-v-989115b9]{grid-template-columns:repeat(2,1fr)}}.callkit-enter-from[data-v-989115b9]{opacity:0;transform:translateY(-20px) scale(.98)}.callkit-enter-active[data-v-989115b9]{transition:all .24s ease}.callkit-leave-to[data-v-989115b9]{opacity:0;transform:translateY(-20px) scale(.98)}.callkit-leave-active[data-v-989115b9]{transition:all .2s ease}.call-label[data-v-989115b9]{position:absolute;top:14%;left:0;right:0;text-align:center;color:#fff;font-size:24px;font-weight:600}