背景

用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)
        })
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐