webrtc音频流的融合
背景用webrtc做了个录屏功能,但是领导要求,录屏要有声音,不仅包含本地麦克风还要能录制会议中其他人的声音。音频流融合,核心代码说明:我是在peerconnection的时候,监听ontrack事件,在事件的回调函数中获取远端的音频track,然后放入一个map对象,key为用户id,value为音频的track对象。第一行navigator.mediaDevices.getUserMedia(
·
背景
用webrtc做了个录屏功能,但是领导要求,录屏要有声音,不仅包含本地麦克风还要能录制会议中其他人的声音。
音频流融合,核心代码
说明:我是在peerconnection的时候,监听ontrack事件,在事件的回调函数中获取远端的音频track,然后放入一个map对象,key为用户id,value为音频的track对象。
第一行navigator.mediaDevices.getUserMedia({audio: true})是为了获取本地音频流,当然你可以也把他加入到map对象,统一到foreach循环中处理
screenstream是我事先获取到的桌面流,经过处理后的流在mixedOutput.stream中,其实这个流中只有一个audioTrack,也是融合之后的track,把这个track加入screenstream,这个screenstream中就包含了桌面视频以及所有人的声音。录屏代码略~~~~
navigator.mediaDevices.getUserMedia({audio: true}).then(localMicStream => {
let audioContext = new AudioContext();//创建音频上下文
let localMicrophoneStreamNode = audioContext.createMediaStreamSource(localMicStream);//创建节点
let mixedOutput = audioContext.createMediaStreamDestination();//创建一个输出媒体流节点
localMicrophoneStreamNode.connect(mixedOutput);//把麦克风节点和系统音节点添加到输出媒体流
audioTrackMap.forEach((audioTrack, userId) => {
let audioStream = new MediaStream();//创建一个媒体流
if (audioTrack) {
audioStream.addTrack(audioTrack)
}
let audioStreamNode = audioContext.createMediaStreamSource(audioStream);//创建系统音频节点
audioStreamNode.connect(mixedOutput);//把麦克风节点和系统音节点添加到输出媒体流
})
screenStream.addTrack(mixedOutput.stream.getTracks()[0])
handleStream(screenStream)
})
}).catch(e => {
console.error(e)
})
更多推荐
已为社区贡献4条内容
所有评论(0)