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

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

1 个答案: