1、安装

npm install pj-trtc-web

2、在main.js中引入

import PjTrtc from 'pj-trtc-web'

import 'pj-trtc-web/dist/style.css'

app.use(PjTrtc)

完整示例如下：

import { createApp } from 'vue'

import PjTrtc from 'pj-trtc-web'*//trtc组件库*

import App from './App.vue'

import 'pj-trtc-web/dist/style.css'

const app = createApp(App)

app.use(PjTrtc)

app.mount('#app')

3.在vue文件中使用

<template>
<PjTrtcWeb
ref="trtcRef"
@roomEvent="handleRoomEvent"
@error="handleError"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import  { RoomEvents,PjTrtcWebInstance } from 'pj-trtc-web'
const trtcRef = ref<PjTrtcWebInstance>()
// TRTC 参数配置
const trtcParams = {
sdkAppId: 'your-sdkAppId', // 腾讯云 SDKAppId
roomId: 'room-id', // 房间号
userId: 'user-id', // 用户ID
userSig: 'user-sig', // 用户签名
privateMapKey: '', // 权限密钥（可选）
cameraId:'',//摄像头ID(可选)
microphoneId:'',//麦克风ID(可选)
speakerId:''//扬声器ID(可选)
}
// 处理房间事件
const handleRoomEvent = (event: RoomEvents, ...args: any[]) => {
switch(event) {
case RoomEvents.EnterRoom:
console.log('进入房间成功')
break
case RoomEvents.ExitRoom:
console.log('退出房间成功')
break
// ... 处理其他事件
}
}
// 处理错误
const handleError = (error: Error) => {
console.error('TRTC错误:', error)
}
// 手动进入房间
const enterRoom = () => {
trtcRef.value.start(trtcParams)
}
// 手动退出房间
const exitRoom = () => {
trtcRef.value.exit()
}
</script>

TodoList

• [x] 测试摄像头
• [x] 测试麦克风
• [ ] 测试扬声器

Props

| 属性名 | 类型 | 必填 | 默认值 | 说明 | | ----------------- | ------- | ---- | ------ | -------------------------------------------------- | | params | Object | 否 | null | TRTC 参数配置对象 | | autoEnterRoom | Boolean | 否 | false | 是否自动进入房间 | | splitScreenMode | string | 否 | Normal | 屏幕切割模式;Normal-普通模式；SubPriority-辅流优先 | | disableControlBar | Boolean | 否 | false | 隐藏底部控制栏 |

params 对象属性

| 属性名 | 类型 | 必填 | 说明 | | ------------- | ------------- | --- | ------------ | | sdkAppId | string/number | 是 | 腾讯云 SDKAppId | | roomId | string/number | 是 | 房间号 | | userId | string | 是 | 用户ID | | userSig | string | 是 | 用户签名 | | privateMapKey | string | 否 | 权限密钥 | | videoProfile | string | 否 | 视频采集分辨率 | | cameraId | string | 否 | 摄像头ID | | microphoneId | string | 否 | 麦克风ID | | speakerId | string | 否 | 音响ID |

事件

| 事件名 | 参数 | 说明 | | --------- | -------------------------- | ------ | | roomEvent | event: RoomEvents, ...args | 房间相关事件 | | error | error: Error | 错误事件 |

RoomEvents 事件类型

• EnterRoom: 进入房间成功
• ExitRoom: 退出房间成功
• KickedOut: 被踢出房间
• RemoteUserEnter: 远端用户进入房间
• RemoteUserExit: 远端用户退出房间
• RemoteVideoAvailable: 远端视频可用
• RemoteVideoUnavailable: 远端视频不可用
• RemoteAudioAvailable: 远端音频可用
• RemoteAudioUnavailable: 远端音频不可用
• ScreenShareStopped: 屏幕分享停止
• CustomMessage:房间内消息
• NetworkQuality:网络质量
• ConnectionStateChanged:trtc连接状态
• AudioPlayStateChanged:音频状态
• VideoPlayStateChanged:视频状态

PjTrtcWeb方法

| 方法名 | 参数 | 返回值 | 说明 | | ------------------- | ----------------------------------- | --------------------- |:--------------------------------- | | start | params?: TRTCParams | void | 进入房间。可选参数，如果不传则使用 props 中的 params | | exit | - | void | 退出房间 | | setVideoDisplayName | userId: string, displayName: string | void | 设置远端用户视频显示名称 | | getCameraList | - | Promise<DeviceInfo[]> | 获取摄像头列表 | | getMicrophoneList | - | Promise<DeviceInfo[]> | 获取麦克风列表 | | switchCamera | deviceId: string | void | 切换摄像头 | | switchMicrophone | deviceId: string | void | 切换麦克风 | | setSpeaker | devideId:string | void | 设置音响 | | setVideoProfile | profile:string | void | 设置推流视频分辨率 | | sendCustomMessage | cmdId:number,message:string | void | 发送房间内消息 | | switchFrontCamera | - | void | 切换前后摄像头（仅移动端） | | toggleVideo | - | Promise | 切换摄像头开关 | | toggleAudio | - | Promise | 切换麦克风开关 | | toggleScreenShare | - | Promise | 切换屏幕分享 |

功能特性

• 支持本地视频预览
• 支持远程用户视频显示
• 支持音视频开关控制
• 支持单击视频全屏显示
• 多用户网格布局（2x2、3x3）
• 单用户全屏布局（本地小窗口）
• 视频状态指示器
• 音频状态指示器
• 支持屏幕共享

注意事项

1. 使用前需要先在腾讯云申请 SDKAppId 和 UserSig
2. 确保有可用的摄像头和麦克风设备
3. 建议在 HTTPS 环境下使用
4. 需要浏览器支持 WebRTC 相关特性

版本

25.10.1

• 支持测试摄像头、麦克风（DeviceUtil）

1.0.19

• 支持外部设置不显示控制栏

• 增加切换视频、音频、屏幕分享状态接口

1.0.18

• 底部control-bar 默认调整为0.2透明度，鼠标悬浮时显示

1.0.17

• 九宫格布局高度调整

1.0.16

• 已知问题修复

1.0.15

• --main-background-color:green;设置主页面背景颜色
• --control-bar-bottom:100px;设置控制按钮底部间隔

1.0.14

• 调整宫格布局边距

1.0.13

• 1、远端用户超过三人时，9宫格布局

1.0.12

• 1、控制栏支持通过如style="--margin-bottom:200px"的方式调整底部margin

1.0.11

• 1、视频画面点击事件通知到父组件

1.0.10

• 1、增加房间内连接状态、视频状态、音频状态、网络质量回调

1.0.9

• 1、替换屏幕共享图标
• 2、去掉辅流优先时非辅流视频显示的边框

1.0.8

• 1、视频显示窗口的高度改为自适应铺满

1.0.7

• 1、支持设置视频排列模式为通用或辅流优先

1.0.6

• 1、RoomEvent增加用户自定义消息对外通知
• 2、增加发送房间内消息的接口
• 3、进入房间支持设置视频小流编码参数、麦克风Id、摄像头Id、扬声器Id

1.0.5

• 1、png图片改为base64(解决iOS设备不能访问图片的问题)

1.0.4

• 1、svg图替换为PNG(解决iOS设备不能访问图片的问题)

1.0.3

• 1、增加屏幕共享功能(只有在电脑端运行时才显示此功能)
• 2、修改获取摄像头、麦克风列表api为异步返回

1.0.2

• 1、修复当全屏时远端视频不可用时，全屏层不消失的问题

1.0.1

• 1、增加获取摄像头、麦克风列表api
• 2、增加切换摄像头、麦克风api

1.0.0

• 1、优化代码提示
• 2、优化打包方式

0.1.7

• 增加代码提示

0.1.6

• 删除多余代码

0.1.4

• 1、支持设置远端用户视频显示名称
• 2、修改发布本地视频显示模式

0.1.3

• 增加移动端视频通话时支持切换前后摄像头

0.1.2

• 支持根据房间人员数量自适应布局
• 支持单击视频画面全屏显示
• 支持显示远端用户音视频状态