pj-trtc-web

v26.1.2

Published

a month ago

品杰科技音视频通话组件

Downloads

0High
0Medium
0Low

hhui056

vue trtc web component

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 | 切换屏幕分享 |

功能特性

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

注意事项

使用前需要先在腾讯云申请 SDKAppId 和 UserSig
确保有可用的摄像头和麦克风设备
建议在 HTTPS 环境下使用
需要浏览器支持 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

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