文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊房（含 UI）>视频直播>推流助手>推流助手（Web 桌面浏览器）

推流助手（Web 桌面浏览器）

最近更新时间：2025-09-08 22:59:42

我的收藏

本页目录：

功能介绍

LivePusherView 是腾讯云为 Web 开发者精心打造的一款直播推流组件。它集成了丰富的功能和流畅的交互，能帮助你快速构建一个功能完善、体验卓越的主播端应用。

LivePusherView 提供了一整套开箱即用的直播推流界面和功能，包括：
视频源控制：支持摄像头、屏幕共享、图片等多种元素合流。同时，组件内置了强大的画布编辑能力，支持对元素进行旋转、移动、缩放、镜像、层级调整等操作，让你的直播画面更具创意和专业性。
连麦功能：支持主播与观众实时音视频互动，并提供了九宫格、1v6、浮窗等多种连麦布局，轻松应对各类互动场景。
观众互动：集成实时弹幕、礼物、点赞等功能，增强主播与观众的粘性。
横竖屏开播：满足不同场景的直播需求。
观众管理：便捷的观众列表与禁言管理。

技术架构

本组件基于以下现代化技术构建，确保稳定、高效的开发体验：
Vue 3 + Composition API：利用 Vue 3 的最新特性，构建高性能、可维护的应用。
TypeScript：通过静态类型检查，提升代码质量和开发效率。
SCSS Module：实现模块化样式管理，有效避免样式冲突。

开发环境

Node.js: ≥ 16.19.1 (推荐使用官方 LTS 版本)
Vue: ≥ 3.4.21
现代浏览器: 支持 WebRTC APIs

接入步骤

步骤1：开通服务

在使用 LivePusherView 前，你需要开通腾讯云服务。请参见 开通服务（TUILiveKit），领取体验版或者开通付费版。

步骤2: 安装依赖

您可以选择以下任一方式进行安装：
使用 npm 安装：
npm install @tencentcloud/livekit-web-vue3 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
使用 yarn 安装：
yarn add @tencentcloud/livekit-web-vue3 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
使用 pnpm 安装：
pnpm add @tencentcloud/livekit-web-vue3 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3

步骤3：接入使用

在你的 Vue 项目中引入并使用 LivePusherView。以下是一个基础示例：
<template>
  <UIKitProvider theme="dark" language="zh-CN">
    <div class="app">
      <LivePusherView />
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { LivePusherView } from '@tencentcloud/livekit-web-vue3';
</script>

步骤4：用户登录

在调用 LivePusherView 之前，必须先完成用户登录，以获取正确的鉴权信息。
import { useLoginState } from 'tuikit-atomicx-vue3';
const { login, logout } = useLoginState();

try {
  await login({
    sdkAppId: 您的_SDKAPPID,
    userId: '用户ID',
    userSig: '用户签名'
  })
  console.log('登录成功')
} catch (error) {
  console.error('登录失败:', error)
}
关键参数说明
sdkAppId：在 开通服务 中的最后一步中获取。
userId：当前用户的 ID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。
userSig：通过对在 开通服务 中获取的 SDKSecretKey 对 SDKAppID、UserID 等信息进行加密，就可以得到 UserSig，它是一个鉴权用的票据，用于腾讯云识别当前用户是否能够使用 TRTC 的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的UserSig。
更多信息请参见 如何计算及使用 UserSig。
注意：
这个步骤也是目前我们收到的开发者反馈最多的步骤，常见问题如下：
sdkAppId 设置错误，国内站的 SDKAppID 一般是以140开头的10位整数。
UserSig 被错配成了加密密钥（SecretKey），UserSig 是用 SecretKey 把 SDKAppID、UserID 以及过期时间等信息加密得来的，而不是直接把 SecretKey 配置成 UserSig。
userId 被设置成“1”、“123”、“111”等简单字符串，由于 TRTC 不支持同一个 UserID 多端登录，所以在多人协作开发时，形如 “1”、“123”、“111” 这样的 UserID 很容易被您的同事占用，导致登录失败，因此我们建议您在调试的时候设置一些辨识度高的 UserID。
GitHub 中的示例代码使用了 genTestUserSig 函数在本地计算 UserSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在代码当中，这并不利于您后续升级和保护您的 SecretKey，所以我们强烈建议您将 UserSig 的计算逻辑放在服务端进行，并在每次使用 TUILiveKit 组件时向您的服务器请求实时计算出的 UserSig。

步骤5：开启直播

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

步骤6: 生产环境部署

1. 打包 dist 文件。
  npm run build
2. 部署 dist 文件到服务器上。
注意：
生产环境要求使用 HTTPS 域名。由于浏览器安全策略的限制，使用 WebRTC 能力对页面的访问协议有严格的要求，请参照以下表格进行开发和部署应用。
应用场景
协议
接收（播放）
发送（上麦）
屏幕分享
备注
生产环境
HTTPS 协议
支持
支持
支持
推荐
生产环境
HTTP 协议
支持
不支持
不支持
-
本地开发环境
http://localhost
支持
支持
支持
推荐
本地开发环境
http://127.0.0.1
支持
支持
支持
-
本地开发环境
http://[本机IP]
支持
不支持
不支持
-
本地开发环境
file:///
支持
支持
支持
-

常见问题

Q: 提示"请先登录"？
A: 请确保在使用 LivePusherView 之前调用 login() 方法完成登录，详见 步骤4：用户登录。
Q: 无法开启摄像头或麦克风？
A: 请检查浏览器权限设置，确保允许网站访问摄像头和麦克风。
Q: 直播无法开始？
A: 请检查 SDKAppID 和 UserSig 是否正确，网络连接是否正常。

更多资源

腾讯云实时音视频控制台


中国站
目录