创建本地音视频流

编辑文档更新于 2024-11-11 06:14:32

本文详细介绍如何使用百家云 WebSDK 创建本地的音视频流对象。

在介绍具体的 API 之前，你需要了解本地音视频流对象的一些设计细节。百家云 Web SDK 使用了面向对象的设计模式，使用 Stream 这一个基础的抽象类来描述所有的流对象，它定义了流对象的公共方法和行为，所有的本地流和远程流对象都继承于 Stream 。

publish 方法只要求发布的对象是 Stream ，所以无论通过什么方式创建的本地和远端流对象，都满足 publish 方法的参数要求。

基于 Stream，SDK 定义了 LocalStream 和 RemoteStream，分别代表本地音和远端音视频对象。这两个类分别针本地远端不同的特性增加了不同的方法，比如 LocalStream 增加了编码参数、音视频轨道控制、输入源切换的方法，RemoteStream 增加了音视频播放、播放音量控制的方法。

创建本地音视频流对象

调用 BRTC.createStream 即可创建 LocalStream 对象。在创建 LocalStream 对象时，需要确定是否开启音视频，使用 StreamDeviceOption 结构体作为参数。在该结构体中可以使用三类参数组合来选择不同的音视频输入源。

从摄像头（或者屏幕）和麦克风采集视频和音频数据，此时只需要指定 video(screen) ， audio 的值即可，true为采集，false为不采集数据。此时使用 sdk 的默认采集逻辑，从可用音视频设备中读取数据。当只有一套音视频设备，并且不需要对输入的音频、视频数据做额外处理时，可以采用此参数组合。

let publishScreenStream = BRTC.createStream({
  screen: true,
  audio: true
})

从指定的 audioSource 和 videoSource 中采集音视频数据，source 为 MediaStreamTrack 结构。需要对采集出的音视频做额外的处理时采用此参数组合。

const localStream = BRTC.createStream({
  audioSource: publishStream.getAudioTrack(),
  videoSource: this.renderProcess.getOutputTrack()
})

从指定的 cameraId ， microphoneId 音视频设备中采集数据，这两个字段为从系统中读取的摄像头和麦克风标识，string 类型。有多套音视频设备，需要在不同的业务场景下需要选择不同的设备时，可以使用此参数组合。

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: '屏幕共享失败'
      })
    }
  }
)