webRTC第三章:实现视频通话时麦克风与摄像头的开关以及桌面共享

362 阅读1分钟

上一章节记录了如何进行视频通话, 这一章节就来记录一下视频通话时如何开启与关闭摄像头与麦克风,以及如何实现屏幕共享

麦克风的开启与关闭

我们可以通过设置本地视频流的 getAudioTracks()[0].enabled 的true或false来开关麦克风,为true时为开启,为false时为关闭

// localStream为本地视频流
localStream.getAudioTracks()[0].enabled = true

摄像头的开启与关闭

我们可以通过设置本地视频流的 getVideoTracks()[0].enabled 的true或false来开关摄像头,为true时为开启,为false时为关闭

// localStream为本地视频流
localStream.getVideoTracks()[0].enabled = true

屏幕共享

let screenSharingStream;
if(
    //开启屏幕共享的条件
){
    try {
        // 获取共享视频流
        screenSharingStream = await navigator.mediaDevices.getDisplayMedia({video: true})
        // 从RTCpeerConnection中获取所有的senders(发送器)
        const senders = peerConnection.getSenders()
        // 遍历每个sender,找到类型为video的sender
        const sender = senders.find(sender=> sender.track.kind===screenSharingStream.getVideoTracks()[0].kind )
        // 替换远端视频
        sender.replaceTrack(screenSharingStream.getVideoTracks()[0])
    } catch (error) {
        console.log("尝试获取屏幕共享流时出错", error);
    }
}else{
    const localStream = store.getState().localStream
    // 从RTCpeerConnection中获取所有的senders(发送器)
    const senders = peerConnection.getSenders()
    // 遍历每个sender,找到类型为video的sender
    const sender = senders.find(sender=> sender.track.kind===localStream.getVideoTracks()[0].kind )
    // 替换远端视频
    sender.replaceTrack(localStream.getVideoTracks()[0])
    // 停止并清空轨道
    screenSharingStream.getTracks().forEach(track => track.stop());
}