通过集成指南，您可以轻松实现 Web 推流功能。文档提供从 SDK 安装到直播推流的完整步骤，包括摄像头和麦克风采集配置、流媒体推流示例代码，以及常见问题解答。只需几分钟，即可完成集成并启动音视频推流。

集成前准备

在开始集成 Web 推流 SDK 之前，请确保满足以下条件：

• 浏览器支持：如果使用 WebTransport 协议，建议使用支持 WebTransport 协议的现代浏览器，如 Chrome 97 及以上版本或 Edge 98 及以上版本。更多浏览器支持情况可参见浏览器支持。
• 资源获取：
  • 版本号：请通过发布历史获取 SDK 版本号，推荐使用最新版本。
  • 推流地址：登录视频直播控制台，通过地址生成器，获取 RTM 或 WebTransport 地址。
• 硬件准备：
  • 确保设备（如摄像头、麦克风）已正确连接。
  • 授予浏览器访问摄像头、麦克风和屏幕共享的权限。
• 依赖工具：如果通过 NPM 使用 SDK，请确保已安装 Node.js 和包管理工具。

操作步骤

1. 引入依赖

SDK 提供了通过 CDN 和 通过 NPM 两种引入方式。您可以根据需求选择。

方法一：通过 CDN 引入

适用于快速测试或原型开发，无需复杂的构建工具，直接在 HTML 中引入 SDK。

1. 创建 index.html 文件。
2. 在文件中通过 <script> 标签引入 SDK 脚本文件。引入后，SDK 会自动将 LivePusher 类挂载到全局对象上。代码示例如下所示。

<script src="https://lf-unpkg.volccdn.com/obj/vcloudfe/sdk/@volcengine/vepusher/{version}/index.umd.js"></script>
<!-- 请将 {version} 替换为集成前准备阶段获取的具体版本号，例如 "2.0.1" -->

方法二：通过 NPM 引入

适合现代化开发流程，尤其是使用 Webpack、Vite 等构建工具时，能够更好地管理依赖和维护项目。

1. 在项目中安装 SDK。

npm install @volcengine/vepusher --save

2. 通过 import 引用 SDK。

import LivePusher from '@volcengine/vepusher';

2. 开启直播推流

1. 初始化推流 SDK 实例。

const livePusher = new LivePusher();

2. 在 HTML 中插入一个 div 元素作为推流画面的本地预览容器。

<div id="preview"></div>

3. 调用以下方法绑定本地预览容器。

livePusher.setRenderView('preview')
livePusher.startPreview()

4. 在采集音视频之前，建议根据您的实际需求，设置采集质量。
   • 视频默认值：720p-1
   • 音频默认值：STANDARD

livePusher.setVideoQuality('720p-1')
livePusher.setAudioQuality('STANDARD')

5. 开始采集音视频。目前支持采集摄像头、麦克风、屏幕分享、本地音视频文件、图片文件和自定义流。音视频采集成功后预览内容会自动更新成最新采集到的输入源。

// 采集摄像头
livePusher.startCamera()
// 采集麦克风
livePusher.startMicrophone()

6. 调用 startPush 方法并传入通过控制台生成的推流地址，启动推流。

livePusher.startPush('https://{{domain}}/{{appName}}/{{streamName}}.sdp')

3. 结束推流

1. 推流完成后，调用 stopPush 方法停止推流。

livePusher.stopPush()

2. 停止摄像头和麦克风采集，释放音视频设备。

livePusher.stopCamera()
livePusher.stopMicrophone()

完整 API 文档

如果需要更详细的方法和参数说明，请参见 API 文档。