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

@tencentcloud/livekit-web-vue3

v1.0.0

Published

<h1 align="center">TUILiveKit</h1>

Downloads

42

Readme

TUILiveKit 是腾讯云推出的在线直播 UI 组件。本文将指导您如何快速地将 TUILiveKit 组件集成到项目中,从而为您的应用程序提供直播功能。

💻 环境准备

  • Node.js 版本: Node.js ≥ 16.19.1(推荐使用官方 LTS 版本,npm 版本请与 node 版本匹配)。
  • 现代浏览器,支持 WebRTC APIs

🔗 接口文档

详细的 API 列表请参考文档: 客户端 API(TUILiveKit)

👋 使用

步骤一:安装依赖

npm install @tencentcloud/livekit-web-vue3 pinia --save

步骤二:项目工程配置

注册 pinia: TUILive 使用 Pinia 进行房间数据管理,您需要在项目入口文件中注册 Pinia。项目入口文件为 src/main.ts 文件。

// src/main.ts 文件
import { createPinia } from 'pinia';

const app = createApp(App);
// 注册 pinia
app.use(createPinia()); 
app.mount('#app')

步骤三:引入 TUILivekit 组件

<template>
   <pre-live-view></pre-live-view>
</template>

<script setup>
import { PreLiveView } from '@tencentcloud/livekit-web-vue3';
</script>

步骤四:登陆 TUILiveKit 组件

开启直播前需要调用 login 接口进行登陆。获取 sdkAppId、userId、userSig 可参见 开通服务

import { liveRoom } from '@tencentcloud/livekit-web-vue3';

liveRoom.login({        
    // 获取 sdkAppId 可参考文档开通服务部分,https://cloud.tencent.com/document/product/647/104842    
    sdkAppId: 0,    // 用户在您业务中的唯一标示 Id    
    userId: '',    // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系    
    userSig: '', 
});

步骤五:开启直播

主播可以通过调用 start 接口来开启直播,观众可以调用 join 接口加入直播间。

import { liveRoom } from '@tencentcloud/livekit-web-vue3';

const startLive = async () => {
    await liveRoom.login({    
        sdkAppId: 0,
        userId: '',
        userSig: '', 
    });
    await liveRoom.start('123456', {
      roomName: 'TestRoom',
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
}
startLive()

步骤六:进入直播间

观众可以通过调用 join 接口,填写对应的 roomId 参数来加入主播在 步骤五 中创建的直播间。

import { liveRoom } from '@tencentcloud/livekit-web-vue3';

const joinLive = async () => {
    await liveRoom.login({    
        sdkAppId: 0,
        userId: '',
        userSig: '', 
    });
    await liveRoom.join('123456', {
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
}
joinLive()

🏃 开发环境运行

  1. 执行开发环境命令。(此处以 vue3 + vite 默认项目为例,不同项目 dev 指令可能不同,请根据您自己的项目进行调整)
    npm run dev
  2. 根据控制台提示,在浏览器中打开页面 ,如:http://localhost:5173/
  3. 验 TUILiveKit 组件功能。

📦 生产环境部署

  1. 打包 dist 文件.
      npm run build
  2. 部署 dist 文件到服务器上。

📖 附录