npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pj-trtc-web

v1.0.5

Published

品杰科技音视频通话组件

Downloads

463

Readme

bash npm install pj-trtc-web

使用示例

<template>
<PjTrtcWeb
ref="trtcRef"
:params="trtcParams"
:autoEnterRoom="false"
@roomEvent="handleRoomEvent"
@error="handleError"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { PjTrtcWeb } from 'pj-trtc-web'
import type { RoomEvents } from 'pj-trtc-web'
const trtcRef = ref(null)
// TRTC 参数配置
const trtcParams = {
sdkAppId: 'your-sdkAppId', // 腾讯云 SDKAppId
roomId: 'room-id', // 房间号
userId: 'user-id', // 用户ID
userSig: 'user-sig', // 用户签名
privateMapKey: '' // 权限密钥(可选)
}
// 处理房间事件
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()
}
// 手动退出房间
const exitRoom = () => {
trtcRef.value.exit()
}
</script>

Props

| 属性名 | 类型 | 必填 | 默认值 | 说明 | |--------|------|------|--------|------| | params | Object | 否 | null | TRTC 参数配置对象 | | autoEnterRoom | Boolean | 否 | false | 是否自动进入房间 |

params 对象属性

| 属性名 | 类型 | 必填 | 说明 | |--------|------|------|------| | sdkAppId | string/number | 是 | 腾讯云 SDKAppId | | roomId | string/number | 是 | 房间号 | | userId | string | 是 | 用户ID | | userSig | string | 是 | 用户签名 | | privateMapKey | string | 否 | 权限密钥 |

事件

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

RoomEvents 事件类型

  • EnterRoom: 进入房间成功
  • ExitRoom: 退出房间成功
  • KickedOut: 被踢出房间
  • RemoteUserEnter: 远端用户进入房间
  • RemoteUserExit: 远端用户退出房间
  • RemoteVideoAvailable: 远端视频可用
  • RemoteVideoUnavailable: 远端视频不可用
  • RemoteAudioAvailable: 远端音频可用
  • RemoteAudioUnavailable: 远端音频不可用
  • ScreenShareStopped: 屏幕分享停止

方法

| 方法名 | 参数 | 返回值 | 说明 | |--------|------|--------|------| | 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 | 切换麦克风 |

功能特性

  • 支持本地视频预览
  • 支持远程用户视频显示
  • 支持音视频开关控制
  • 支持单击视频全屏显示
  • 多用户网格布局(两列布局)
  • 单用户全屏布局(本地小窗口)
  • 视频状态指示器
  • 音频状态指示器
  • 支持屏幕共享

注意事项

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

版本

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

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