本章节为您介绍 Web 推流 SDK 的接入方法。

引入依赖

在本地的项目工程内新建 index.html 文件，并在页面内引入脚本文件。

<script src="https://unpkg.byted-static.com/volcengine/vepusher/1.1.0/dist/vepusher.umd.js"></script>

生成推流 SDK 实例

通过全局对象 VePusher 生成 SDK 实例，之后的操作都需要通过该实例完成。

const livePusher = new VePusher({mode: 'rtm'})

获取设备列表

获取音视频设备信息。其中 videoInputs 以及 audioInputs 为可用设备信息列表，每个设备包含设备名称 deviceName 和设备 ID deviceId 等。

const videoInputs = await livePusher.device.getCameras()
const audioInputs = await livePusher.device.getMicrophones()

添加预览容器

在页面添加预览容器，例如在 index.html 中加入如下代码。

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

初始化预览容器

将所添加的容器设置为预览容器，函数的参数为容器的 id 属性值。

livePusher.capture.setRenderView('preview')

设置监听事件

通过向 livePusher.observer 对象添加事件回调函数，可以对推流器的内部状态进行监听。常见的监听事件包括 onCameraChanged、onCaptureFirstVideoFrame、onCaptureFirstAudioFrame、onMicrophoneChanged、onPushStatusUpdate、onWarning 以及 onError。

//对错误信息进行监听
livePusher.observer.onError = (code, msg) => {
    console.log('error', `[${code}] ${msg}`)
}
//监听摄像头切换事件
livePusher.observer.onCameraChanged = (device) => {
    console.log(
        'camera changed',
        `${device.deviceState} ${device.deviceName}`
    )
}

选择数据采集设备

选择需要推流的音视频数据采集设备。从视频设备列表 videoInputs 和音频设备列表 audioInputs 中，选取设备 ID deviceId，设置推流器音视频采集设备。

//设置摄像头设备ID
livePusher.capture.startCamera(deviceId)

//设置音频采集设备ID
livePusher.capture.startMicrophone(deviceId)

设置预览数据流

捕获设备数据流，并对其进行预览。

//捕获摄像头流并进行预览
await livePusher.capture.startCamera(deviceId)
await livePusher.capture.startPreview(TRACK_TYPES.CAMERA)

//捕获音频流并进行预览
await livePusher.capture.startMicrophone(deviceId)
await livePusher.capture.startPreview(TRACK_TYPES.AUDIO)

//其中TRACK_TYPES为枚举类型，表示音视频流数据来源类型，如下所示：
export enum TRACK_TYPES {
    CAMERA = 1,
    AUDIO = 2,
    SCREEN = 3,
    FILE_VIDEO = 4,
    FILE_AUDIO = 5,
}

（可选）更换数据采集设备

如果您需要在推流过程中更换数据采集设备，例如，从摄像头切换到屏幕采集。实现该过程的步骤和示例代码如下所示。

1. 通过 startScreenCapture() 切换到屏幕采集。
2. 调用 startPreview(TRACK_TYPES.SCREEN) 将屏幕内容显示在预览中。
3. 根据推流状态，选择是否停止摄像头采集或更新推流内容为屏幕采集。
   • 如果正在推流，调用 updatePush(TRACK_TYPES.SCREEN) 更新推流内容为屏幕采集，并调用 stopCamera() 方法停止摄像头采集。
   • 如果未推流，调用 stopCamera() 停止摄像头采集，推流启动时会自动使用屏幕采集内容。

// 更换为屏幕采集
await livePusher.capture.startScreenCapture()
// 更新预览内容为屏幕采集
await livePusher.capture.startPreview(TRACK_TYPES.SCREEN)
if (livePusher.pusher.isPushing()) {
    // 推流中更新推流内容为屏幕采集
    await livePusher.pusher.updatePush(TRACK_TYPES.SCREEN)
    await livePusher.capture.stopCamera()
} else {
    // 未推流时停止采集摄像头，开启推流后自动使用屏幕采集内容
    await livePusher.capture.stopCamera()
}

获取推流地址

在开始推流之前，需要使用地址生成器根据提示信息生成推/拉流地址。

开始推流

预览状态正常的情况下，可以进行推流，推流地址为地址生成器所生成的推流地址。

const rtmUrl = 'rtmUrl'
livePusher.pusher.startPush(rtmUrl)

停止推流

在停止推流之前，需要进行推流状态的检测，在推流器正在进行推流状态的情况下，可以停止推流。

if (livePusher.pusher.isPushing()) {
    livePusher.pusher.stopPush()
}

相关接口

Web 推流 SDK 的详细接口说明请参见接口说明。您也可以登录视频直播控制台，在推流 SDK 页面中体验推流能力。