I wish to send two video streams (one video stream and one stream captured from the canvas HTML element) using only one RTCPeerConnection.
What I tried to do is addTrack both tracks to the peer connection object before making the offer, but it doesn't work in Firefox (it works in Chrome). The peerConnection.ontrack event only happens once, with the first track added to the peer connection object (although there are two streams).
I have read about renegotiation, but I am currently adding both tracks to the peer connection before sending the offer so I don't know if I need to do renegotiation. Do I need to?
I have also heard about the interoperability issue in multistreaming between Firefox (Unified Plan) and Chrome (Plan B), so please advise me on what approach I should take now.
I am using adapter.js.
Add code (actually javascript):
function createPeerConnection() {
peerConnection = new RTCPeerConnection(iceServers);
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
// send to server
}
};
videoStream.getTracks().forEach(track => peerConnection.addTrack(track, videoStream));
canvasStream.getTracks().forEach(track => peerConnection.addTrack(track, canvasStream));
}
This is how I create the RTCPeerConnection and add the tracks. After this part is creating the offer and sending to signaling server... It all works well, it's just that the other end only receives the first track added (in Firefox). If you need those bits I will add them.
This is the ontrack event handler.
peerConnection.ontrack = (event) => {
console.log(event); //only prints the first track in Firefox, but prints both tracks in Chrome
};
