WebRTC peerConnection ontrack 侦听器不触发

Question

首先，这里的问题与我在"google"因为我使用Spring Boot作为信号服务器来连接两个不同的浏览器的选项卡，或者他们使用两个peerConnection在一个选项卡内发送流。

对等体似乎已连接，消息也正确发送。但是，当我运行sendStream with button时，第二个选项卡跟踪事件侦听器不会触发。

//connecting to our signaling server 
var conn = new WebSocket('ws://localhost:8080/socket');
conn.onopen = function() {
console.log("Connected to the signaling server");
initialize();
};
conn.onmessage = function(msg) {
console.log("Got message", msg.data);
var content = JSON.parse(msg.data);
var data = content.data;
switch (content.event) {
// when somebody wants to call us
case "offer":
handleOffer(data);
break;
case "answer":
handleAnswer(data);
break;
// when a remote peer sends an ice candidate to us
case "candidate":
handleCandidate(data);
break;
default:
break;
}
};
function send(message) {
conn.send(JSON.stringify(message));
}
var peerConnection;
var dataChannel;
var input = document.getElementById("messageInput");
function initialize() {
var configuration = null;
peerConnection = new RTCPeerConnection(configuration);
// Setup ice handling
peerConnection.onicecandidate = function(event) {
if (event.candidate) {
send({
event : "candidate",
data : event.candidate
});
}
};
const remoteVideo = document.getElementById('video');
peerConnection.addEventListener('track', async (event) => {
const [remoteStream] = event.streams;
remoteVideo.srcObject = remoteStream;
console.log("STREAM RECEIVED");
});

// creating data channel
dataChannel = peerConnection.createDataChannel("dataChannel", {
reliable : true
});
dataChannel.onerror = function(error) {
console.log("Error occured on datachannel:", error);
};
// when we receive a message from the other peer, printing it on the console
dataChannel.onmessage = function(event) {
console.log("message:", event.data);
};
dataChannel.onclose = function() {
console.log("data channel is closed");
};

peerConnection.ondatachannel = function (event) {
dataChannel = event.channel;
};

}
function createOffer() {
peerConnection.createOffer(function(offer) {
send({
event : "offer",
data : offer
});
peerConnection.setLocalDescription(offer);
}, function(error) {
alert("Error creating an offer");
});
}
function handleOffer(offer) {
peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
// create and send an answer to an offer
peerConnection.createAnswer(function(answer) {
peerConnection.setLocalDescription(answer);
send({
event : "answer",
data : answer
});
}, function(error) {
alert("Error creating an answer");
});
};
function handleCandidate(candidate) {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
};
function handleAnswer(answer) {
peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
console.log("connection established successfully!!");
};
function sendMessage() {
dataChannel.send(input.value);
input.value = "";
}
async function sendStream() {
const localStream = await navigator.mediaDevices.getUserMedia({audio: false, video: true});
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
console.log("STREAM SENT")
const localVideo = document.getElementById('video2');
addVideoStream(localVideo, localStream);
});
}
function addVideoStream(video, stream) {
video.srcObject = stream;
video.addEventListener('loadedmetadata', () => {
video.play();
})
}

Answer 1

如果您已经建立了WebRTC连接，则需要重新协商才能发送新轨道。

原因是对等体需要选择编解码器和SDP中包含的其他参数。否则你的浏览器不会告诉你如何压缩你想要发送的视频，以便接收器可以解码它。

见页面上方的注释:https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addTrack

所以你可能需要设置onnegotiationneeded回调，然后发送一个新的报价/接收一个新的答案。