You need to enable JavaScript to run this app.
导航
接入指引
最近更新时间:2024.06.18 10:27:55首次发布时间:2022.08.26 12:54:29

本章节为您介绍 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'})

说明

  • VePusher 从 v1.1.0 版本开始支持 WebTransport 推流。
    • modertmp 时,表示 WebTransport 推流;
    • modertm 时,表示 RTM 推流,默认为 rtm
  • 浏览器是否支持 WebTransport 可参考 WebTransport 支持
  • WebTransport 基于 Quic 稳定传输,在推流音画质量上有一定提升。

获取设备列表

获取音视频设备信息。其中 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 对象添加事件回调函数,可以对推流器的内部状态进行监听。常见的监听事件包括 onCameraChangedonCaptureFirstVideoFrameonCaptureFirstAudioFrameonMicrophoneChangedonPushStatusUpdateonWarning 以及 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,
}

获取推流地址

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

开始推流

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

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

停止推流

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

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

相关接口

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