Question

我正在建立一个WebRTC网站，并正在进行一对多视频连接。发现不推荐使用addStream()之后，我切换到addTrack()。但是，无论我使用哪一个，都只会发送音频，而不发送视频。最初我以为是因为我在没有https的本地主机上，但是即使在节点服务器上运行它时，也会发生相同的情况。一个解决方案将不胜感激。

托管代码（ host.js ）

    document.addEventListener("DOMContentLoaded", () => {
    uuid = createUUID();

    localVideo = document.getElementById('localVideo');

    serverConnection = new WebSocket('wss://' + window.location.hostname + ':443');

    console.log("Opened WS on :443")

    serverConnection.onmessage = gotMessageFromServer;

    var constraints = {
        video: true,
        audio: true,
    };

    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
    } else {
        alert('Your browser does not support getUserMedia API');
    }

    document.getElementById("start").addEventListener("click", (e) => {
        start(uuid)
    });
});

function getUserMediaSuccess(stream) {
    localStream = stream;
    localVideo.srcObject = stream;
}

function start(uid) {
    peerConnections[uid] = new RTCPeerConnection(peerConnectionConfig);
    peerConnections[uid].onicecandidate = gotIceCandidate;

    for (const track of localStream.getTracks()) {
        peerConnections[uid].addTrack(track, localStream);
      }
}

查看器代码（ client.js ）

function pageReady() {
    uuid = createUUID();

    remoteVideo = document.getElementById('remoteVideo');
    remoteVideo.srcObject = remoteStream;
    remoteVideo.play();

    serverConnection = new WebSocket('wss://' + window.location.hostname + ':443');
    serverConnection.onmessage = gotMessageFromServer;

    var constraints = {
        video: false,
        audio: true,
    };

    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia(constraints).then(getUserMediaSuccess).catch(errorHandler);
    } else {
        alert('Your browser does not support getUserMedia API');
    }

}

function getUserMediaSuccess(stream) {
    localStream = stream;

}

function start(isCaller) {
    console.log("pressed Start")
    peerConnection = new RTCPeerConnection(peerConnectionConfig);
    console.log("new RTCconnection")
    peerConnection.onicecandidate = gotIceCandidate;
    peerConnection.ontrack = gotRemoteStream;
    peerConnection.addTrack(localStream.getTracks()[0]);
    peerConnection.createOffer().then((desc) => {
        createdDescription(desc);
    }).catch(errorHandler);
}

function gotRemoteStream(e) {
    console.log('got remote stream');
    if (e.streams && e.streams[0]) {
        remoteVideo.srcObject = e.streams[0];
      } else {
        if (!inboundStream) {
          inboundStream = new MediaStream();
          remoteVideo.srcObject = inboundStream;
        }
        inboundStream.addTrack(e.track);
      }
}

P.S。我只是从查看器端发送音频，因为它是单向呼叫，但是查看器必须发起呼叫。我的问题是将音频和视频都从主机端移到查看者端。

P.P.S。您可能需要更多代码，以便自己运行，因此存储库为here。在/ host上打开一个客户端，在/ class上打开另一个客户端。确保您转到https://localhost，否则将无法使用。

Answer 1

在client.js文件中添加此行 peerConnection.addTransceiver（“ video”）;在addtrack调用之后。

function start(isCaller) {
    console.log("pressed Start")
    peerConnection = new RTCPeerConnection(peerConnectionConfig);
    console.log("new RTCconnection")
    peerConnection.onicecandidate = gotIceCandidate;
    peerConnection.ontrack = gotRemoteStream;
    peerConnection.addTrack(localStream.getTracks()[0]);
    peerConnection.addTransceiver("video"); // The line to be added
    peerConnection.createOffer().then((desc) => {
        createdDescription(desc);
    }).catch(errorHandler);
}

如何获取通过WebRTC轨道发送的音频和视频？

1 个答案: