在javascript中进行音频呼叫时使用webRTC进行屏幕共享

Question

我将使用 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 出错了还有其他屏幕共享方式吗？

Answer 1

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

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

connection.addTrack(screenVideoTrack);

检查此以供参考：

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