### 1、安装

```bash
npm install pj-trtc-web
```

### 2、在 main.js 中引入

```javascript
import PjTrtc from 'pj-trtc-web'
import 'pj-trtc-web/dist/style.css'

app.use(PjTrtc)
```

完整示例如下：
```javascript
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 文件中使用

```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<boolean>      | 切换摄像头开关                                       |
| toggleAudio         | -                                   | Promise<boolean>      | 切换麦克风开关                                       |
| toggleScreenShare   | -                                   | Promise<boolean>      | 切换屏幕分享                                         |

## 功能特性

- 支持本地视频预览
- 支持远程用户视频显示
- 支持音视频开关控制
- 支持单击视频全屏显示
- 支持宫格模式和辅流优先模式
- 单用户全屏布局（本地小窗口）
- 视频状态指示器
- 音频状态指示器
- 支持屏幕共享

## 注意事项

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

## 版本
### 26.1.1
- add 支持进入房间时不必须开启摄像头和麦克风
- fix 退出房间时停止插件
- fix 开启屏幕分享时优先显示整个屏幕的选项

### 25.11.2

- 支持基础美颜设置

### 25.11.1

- 增加音量回调

### 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

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

### 测试提交