在javascript中进行音频通话时使用webRTC进行屏幕共享答案

【问题标题】：Screen sharing using webRTC when audio call in javascript在javascript中进行音频通话时使用webRTC进行屏幕共享
【发布时间】：2020-09-03 14:53:02
【问题描述】：

我将使用 webRTC 制作屏幕共享功能。视频通话时我的代码运行良好但在音频通话状态下，这是行不通的。这是我的代码。

这是用于创建对等连接并为音频呼叫添加流

const senders = [];
var mediaConstraints = {audio: true, video: false}
navigator.mediaDevices.getUserMedia(mediaConstraints)
    .then(function (localStream) {
        localLiveStream = localStream;
        document.getElementById("local_video").srcObject = localLiveStream;
        localLiveStream.getTracks().forEach(track => senders.push(myPeerConnection.addTrack(track, localLiveStream)));
            })
    .catch(handleGetUserMediaError);

当屏幕共享字段时

mediaConstraints.video = true;
let displayStream = await navigator.mediaDevices.getDisplayMedia(mediaConstraints)
if (displayStream) {
    document.getElementById("local_video").srcObject = displayStream;
    console.log("senders: ", senders);
    try {
        senders.find(sender => sender.track.kind === 'video').replaceTrack(displayStream.getTracks()[0]);
    } catch (e) {
        console.log("Error: ", e)
    }
}

在屏幕共享状态下，sender.track.kind 为“音频” 所以

senders.find(sender => sender.track.kind === 'video') = null.

因此，replaceTrack 出错还有其他的屏幕共享方式吗？

【问题讨论】：

标签： javascript jquery socket.io webrtc

【解决方案1】：

您需要添加视频轨道才能实现此目的。这将需要重新谈判。

因此将屏幕轨道（而不是替换）添加到连接中，然后再次创建报价！

connection.addTrack(screenVideoTrack);

检查此以供参考：

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onnegotiationneeded

【讨论】：

感谢您的回复。我已经应用了这个分辨率但是在连接屏幕视频轨道后创建新报价时，返回 setRemoteDescription 错误。