The ontrack listener is not fired when a track is supposedly added although a connection has already been established between 2 peers over WebRTC. I know this because I have data channels that work for sending messages between the 2 peers.
I tried adding a webcam to the connection by having a button call the following function:
async function startLocalVideo() {
let stream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: false
});
localStream.srcObject = stream;
for(const track of stream.getTracks()) {
console.log('adding tracks', track)
let answer = currentPeer.rtc?.conn.addTrack(track, stream);
console.log(answer)
}
}
*localStream is a bound <video> element.
From the callee’s perspective, I added the following lines to when the RTC connection object is created:
this.conn = new RTCPeerConnection({
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' },
],
})
this.conn.ondatachannel = (e) => {
console.log('got a dc')
this.chan = e.channel
}
// NEW LINES
this.conn.ontrack = (e) => {
console.log("Got a track")
}
when I press the button, the console logs the following:
logged information
On the callee’s side I would expect the conn.ontrack listener be fired, but it seems like nothing happens. I tried following many tutorials and from what I understand this is supposed to work.
My current layout is this:
Peer1: creates a new data channel, makes an offer, and sends it to server
Server: sends the offer to Peer2
Peer2: accepts the offer, creates a new data channel, creates an answer with the offer, and sends the answer to the server
Server: sends the answer to Peer1
Peer1: accepts the answer
At this point, the data channels are opened on both sides and the peers can send data with them.
now what I tried is the following:
Peer1: presses the ‘video’ button and triggers the addTrack
Peer1: the allow video prompt is shown and the peer accepts it, and a live preview of the camera is shown.
—
Peer2: expected to receive the track, but nothing happens.
