基于腾讯云 TRTC SDK 开发的 Vue 3 通话组件,支持一对一音视频通话、网络质量监测、动态视频质量调整等功能。 (内部使用、userSig不安全) ## 安装
npm install bl-trtc-callkit-vue基于腾讯云 TRTC SDK 开发的 Vue 3 通话组件,支持一对一音视频通话、网络质量监测、动态视频质量调整等功能。
(内部使用、userSig不安全)
``bash`
npm install bl-trtc-callkit-vue
`vue
当前 userId:{{ localUserId }}
远端用户列表
:style="{ color: user.status === 'online' ? 'green' : 'gray' }" @click="handleRemoteUserClick(user)">
{{ user.userId }} ({{ user.status === 'online' ? '在线' : '离线' }})
]">
{{ toast.text }}
`
| 方法名 | 参数 | 说明 |
|-------|------|------|
| init | { userId: string, sdkAppId: number, sdkSecretKey: string, profile?: string } | 初始化组件,传入用户 ID、SDK App ID、SDK 密钥和可选的视频分辨率(默认1440p,支持360p、720p、1080p、1440p) |handleCall
| | targetId: string | 发起呼叫,传入目标用户 ID |show
| | 无 | 显示通话组件 |hide
| | 无 | 隐藏通话组件 |hangup
| | 无 | 挂断通话 |setVideoProfile
| | profile: string | 设置视频分辨率(支持360p、720p、1080p、1440p) |
| 事件名 | 回调参数 | 说明 |
|-------|----------|------|
| 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` 方法关闭所有媒体流