本章节为您介绍 Web 推流 SDK 的接入方法。
在本地的项目工程内新建 index.html 文件,并在页面内引入脚本文件。
<script src="https://unpkg.byted-static.com/volcengine/vepusher/1.1.0/dist/vepusher.umd.js"></script>
通过全局对象 VePusher 生成 SDK 实例,之后的操作都需要通过该实例完成。
const livePusher = new VePusher({mode: 'rtm'})
说明
mode
为 rtmp
时,表示 WebTransport 推流;mode
为 rtm
时,表示 RTM 推流,默认为 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, }
在开始推流之前,需要使用地址生成器根据提示信息生成推/拉流地址。
预览状态正常的情况下,可以进行推流,推流地址为地址生成器所生成的推流地址。
const rtmUrl = 'rtmUrl' livePusher.pusher.startPush(rtmUrl)
在停止推流之前,需要进行推流状态的检测,在推流器正在进行推流状态的情况下,可以停止推流。
if (livePusher.pusher.isPushing()) { livePusher.pusher.stopPush() }