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

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 轨道发送音频和视频？

How to get both audio and video sent over WebRTC tracks?

javascript

node.js

webrtc

getusermedia

mediastream