本文详细介绍如何使用百家云 WebSDK 创建本地的音视频流对象。
在介绍具体的 API 之前,你需要了解本地音视频流对象的一些设计细节。百家云 Web SDK 使用了面向对象的设计模式,使用 Stream 这一个基础的抽象类来描述所有的流对象,它定义了流对象的公共方法和行为,所有的本地流和远程流对象都继承于 Stream 。
publish 方法只要求发布的对象是 Stream ,所以无论通过什么方式创建的本地和远端流对象,都满足 publish 方法的参数要求。
基于 Stream,SDK 定义了 LocalStream 和 RemoteStream,分别代表本地音和远端音视频对象。这两个类分别针本地远端不同的特性增加了不同的方法,比如 LocalStream 增加了编码参数、音视频轨道控制、输入源切换的方法,RemoteStream 增加了音视频播放、播放音量控制的方法。
调用 BRTC.createStream 即可创建 LocalStream 对象。在创建 LocalStream 对象时,需要确定是否开启音视频,使用 StreamDeviceOption 结构体作为参数。在该结构体中可以使用三类参数组合来选择不同的音视频输入源。
let publishScreenStream = BRTC.createStream({ screen: true, audio: true })
const localStream = BRTC.createStream({ audioSource: publishStream.getAudioTrack(), videoSource: this.renderProcess.getOutputTrack() })
let camera = refBottom.getCurrentCamera() let mic = refBottom.getCurrentMic() let options = { video: !!camera, audio: !!mic } if (camera) { options.cameraId = camera.deviceId } if (mic) { options.microphoneId = mic.deviceId } let publishStream; publishStream = BRTC.createStream(options);
创建 localStream 对象后,初始化前,可以调用其函数设定音视频的 profile 、宽高、帧率、码率等编码参数。
let publishScreenStream = BRTC.createStream({ screen: true, audio: true }) const audioProfile = 'high-stereo' publishScreenStream.setAudioProfile(audioProfile) publishScreenStream.setScreenProfile('1080p_2') publishScreenStream.setVideoEncoderConfiguration({ width: this.$store.state.codec.width, height: this.$store.state.codec.height, frameRate: this.$store.state.codec.fps, bitrate: this.$store.state.codec.bitrate }) publishScreenStream.init().then( () => { reslove() }, (error) => { reject(error) }, )
该方法为异步方法,使用时需要配合 Promise 或 async/await
初始化 localStream 对象,流初始化可能会失败,失败可能的原因:未发现设备、设备不可用、设备未授权、初始化的某些参数不支持等原因。
publishStream.init() .then(() => { //初始化成功后的处理逻辑 }) .catch((error) => { switch (error.name) { case 'NotFoundError': case 'DevicesNotFoundError': //初始化失败,未发现设备错误处理逻辑 break; case 'NotReadableError': case 'TrackStartError': //麦克风、摄像头设备无法使用,处理逻辑 break; case 'NotAllowedError': //设备未授权, 处理逻辑 break; case 'OverconstrainedError': //设备参数不支持, 处理逻辑 break; } })
两类开关音视频操作: 完全禁用视频轨道(即关闭摄像头)可以使用 removeTrack() 删除视频轨道,然后调用 MediaStreamTrack.stop() 关闭视频轨道(关闭摄像头); 使用 replaceTrack 更换、或者 addTrack 添加新的音视频轨道推流。 大部分情况下采用 mute/unmute 操作,打开和关闭音视频。 对于本地流,调用该方法会停止发送音视频,远端会触发 Client.on(‘mute-audio/video’) 事件,会默认编码黑屏帧(视频轨道)或者静音包(音频轨道); 对于远端流,调用该方法会停止播放音视频,但是仍然接收音视频数据。采用此类方法可以快速恢复远端音视频的播放。
此类方法为异步方法,使用时需要配合 Promise 或 async/await。
this.publishStream.muteVideo() this.publishStream.unmuteVideo() this.publishStream.muteAudio() this.publishStream.unmuteAudio()
在创建流对象并完成初始化后,根据业务场景,监听需要关注的流事件做相应的逻辑处理
// 处理推流中断 this.publishStream.on('connect-error', () => { console.log('推流中断') this.republishStreamTimer = setTimeout(() => { this.republishCameraStream() }, 2000) }) this.publishStream.on('video-track-mute', () => { //摄像头捕获中断 }) this.publishStream.on('audio-track-mute', () => { //麦克风捕获中断 }) this.publishStream.on('video-track-unmute', () => { //摄像头捕获恢复 }) this.publishStream.on('audio-track-unmute', () => { //麦克风捕获恢复', }) this.publishScreenStream.on('video-track-ended', () => { // 屏幕共享结束,停止推流 }) stream.on('player-state-changed', () => { // 流播放状态变化 })
在创建本地音视频对象的过程中,由于不同设备和浏览器之间的差异,SDK 可能在调用上述方法时抛出异常。 调用创建和初始化音视频流的方法时可能会遇到的错误,错误类型 NOT_SUPPORTED ,错误名称如下:
NotFoundError: 没有发现可用的音视频设备。 DevicesNotFoundError: 没有发现可用的音视频设备。 NotReadableError: 麦克风或者摄像头设备不可用,打开失败。 TrackStartError: 麦克风或者摄像头设备不可用,打开失败。 NotAllowedError: 摄像头或者麦克风设备未授权。 OverconstrainedError: 初始化麦克风或者摄像头设备的参数不支持。
Promise.all([ new Promise((reslove, reject) => { let publishScreenStream = BRTC.createStream({ screen: true, audio: true }) const audioProfile = `${this.$store.state.highAudio ? 'high' : 'standard'}${this.$store.state.doubleChannel ? '-stereo' : ''}` publishScreenStream.setAudioProfile(audioProfile) publishScreenStream.setScreenProfile('1080p_2') publishScreenStream.setVideoEncoderConfiguration({ width: this.$store.state.codec.width, height: this.$store.state.codec.height, frameRate: this.$store.state.codec.fps, bitrate: this.$store.state.codec.bitrate }) publishScreenStream.init().then( () => { this.publishScreenStream = publishScreenStream this.publishScreenStream.on('video-track-ended', () => { // 屏幕共享结束,停止推流 this.toggleScreenShare() }) reslove() }, (error) => { reject(error) }, ) }) ]).then( () => { //创建stream对象、并且初始化成功后的处理逻辑 }, (error) => { if (!error || error.message !== 'Permission denied') { this.$message({ type: 'error', message: '屏幕共享失败' }) } } )
进入后台
退出登录
创建本地音视频流
本文详细介绍如何使用百家云 WebSDK 创建本地的音视频流对象。
在介绍具体的 API 之前,你需要了解本地音视频流对象的一些设计细节。百家云 Web SDK 使用了面向对象的设计模式,使用 Stream 这一个基础的抽象类来描述所有的流对象,它定义了流对象的公共方法和行为,所有的本地流和远程流对象都继承于 Stream 。
publish 方法只要求发布的对象是 Stream ,所以无论通过什么方式创建的本地和远端流对象,都满足 publish 方法的参数要求。
基于 Stream,SDK 定义了 LocalStream 和 RemoteStream,分别代表本地音和远端音视频对象。这两个类分别针本地远端不同的特性增加了不同的方法,比如 LocalStream 增加了编码参数、音视频轨道控制、输入源切换的方法,RemoteStream 增加了音视频播放、播放音量控制的方法。
创建本地音视频流对象
调用 BRTC.createStream 即可创建 LocalStream 对象。在创建 LocalStream 对象时,需要确定是否开启音视频,使用 StreamDeviceOption 结构体作为参数。在该结构体中可以使用三类参数组合来选择不同的音视频输入源。
音视频参数设定
创建 localStream 对象后,初始化前,可以调用其函数设定音视频的 profile 、宽高、帧率、码率等编码参数。
初始化本地音视频流
该方法为异步方法,使用时需要配合 Promise 或 async/await
初始化 localStream 对象,流初始化可能会失败,失败可能的原因:未发现设备、设备不可用、设备未授权、初始化的某些参数不支持等原因。
启用和禁用音视频流
两类开关音视频操作: 完全禁用视频轨道(即关闭摄像头)可以使用 removeTrack() 删除视频轨道,然后调用 MediaStreamTrack.stop() 关闭视频轨道(关闭摄像头); 使用 replaceTrack 更换、或者 addTrack 添加新的音视频轨道推流。 大部分情况下采用 mute/unmute 操作,打开和关闭音视频。 对于本地流,调用该方法会停止发送音视频,远端会触发 Client.on(‘mute-audio/video’) 事件,会默认编码黑屏帧(视频轨道)或者静音包(音频轨道); 对于远端流,调用该方法会停止播放音视频,但是仍然接收音视频数据。采用此类方法可以快速恢复远端音视频的播放。
此类方法为异步方法,使用时需要配合 Promise 或 async/await。
音视频流事件
在创建流对象并完成初始化后,根据业务场景,监听需要关注的流事件做相应的逻辑处理
错误处理
在创建本地音视频对象的过程中,由于不同设备和浏览器之间的差异,SDK 可能在调用上述方法时抛出异常。 调用创建和初始化音视频流的方法时可能会遇到的错误,错误类型 NOT_SUPPORTED ,错误名称如下:
NotFoundError: 没有发现可用的音视频设备。 DevicesNotFoundError: 没有发现可用的音视频设备。 NotReadableError: 麦克风或者摄像头设备不可用,打开失败。 TrackStartError: 麦克风或者摄像头设备不可用,打开失败。 NotAllowedError: 摄像头或者麦克风设备未授权。 OverconstrainedError: 初始化麦克风或者摄像头设备的参数不支持。
完整代码