音视频轨道切换

在浏览器中，媒体流是由音轨和视轨组合而成，本地存在两条及以上媒体流时，通过百家云 Web SDK 可自由组合媒体流包含的音视轨道。

例如主播需要播放视频，主播端通过摄像头和麦克风采集到了媒体流 A，同时通过 video 标签也加载了一个 mp4 媒体流 B，用媒体流 B 的音轨和视频轨道替换媒体流 A 中的音频和视频轨道后，拉媒体流 A 的观众就可以看到播放视频，听不到主播的说话声和摄像头的视频。

推本地麦克风和摄像头数据

调用 createStream 接口打开音视频属性，创建摄像头麦克风采集源数据。 在调用init完成初始化后， publish 接口将本地流推送到云端服务器。

let publishStream;
publishStream = BLive.createStream({video:true, audio:true});
publishStream.init().then(() => {
  this.client.publish(this.publishStream);
})

加载本地视频

通过 video 标签加载主播指定的视频内容

<!--加载mp4文件-->
<video id="customVideo" crossOrigin="anonymous" loop preload playsinline controls src="../../../video/test.mp4"></video>

替换麦克风摄像头数据为本地播放的视频

调用 replaceTrack 接口替换替换麦克风和摄像头数据流为本地播放的音视频。

// 播放用户指定视频
$('#customVideo')[0].play()
let canvas = document.createElement('canvas')
//获取指定视频的音轨和视频轨道
let myMediaStream = $('#customVideo')[0].captureStream()
let myAudioTrack = myMediaStream.getAudioTracks()[0]
let myVideoTrack = myMediaStream.getVideoTracks()[0]
//替换正在推流的麦克风音频轨道
this.publishStream.replaceTrack(myAudioTrack).then((res)=>{
  console.log(res,"替换音轨成功");
}).catch((err)=>{
  console.log(err);
})
//替换正在推流的摄像头视频轨道
this.publishStream.replaceTrack(myVideoTrack).then((res)=>{
  console.log(res,"替换视频轨道成功");
}).catch((err)=>{
  console.log(err);
})