I am new to webRTC and trying to make a video streaming application. Signaling is implemented through websockets.
When running my app, I am not able to figure out why lc.ontrack function is not fired. Connection between the peers is established properly is both can send and receive messages after connection.
Please help.
const lc = new RTCPeerConnection(servers );
const dc = lc.createDataChannel("channel");
lc.addEventListener("track", e => {
console.log("Track received:", e.track);
// Add the track to the remote stream
if (e.streams && e.streams[0]) {
remoteStream.addTrack(e.track);
}
});
// --------------------------------------------------------------------------------------------------------------------------------
socket.on("becomeClient1", () => {
console.log("Received becomeClient1 event");
remoteStream = new MediaStream();
document.getElementById("user-2").srcObject = remoteStream;
socket.on("notifyClient1",() =>{
console.log("cliebt2 joined++++")
let init = async() => {
localStream = await navigator.mediaDevices.getUserMedia({video:true,audio:true})
document.getElementById("user-1").srcObject = localStream;
}
init()
localStream.getTracks().forEach(track => {
lc.addTrack(track,localStream)
console.log("tracks added")
});
lc.onicecandidate = e => {console.log("new ice candidate " +
JSON.stringify(lc.localDescription))
socket.emit("recieveCLient1SDP",JSON.stringify(lc.localDescription))
}
dc.onmessage = e => console.log("just got a message" + e.data);
dc.onopen = e => {
console.log("connection opened cl1")
dc.send("heyyyyyy")
};
lc.createOffer().then(o => {
lc.setLocalDescription(o)
console.log(o)
}).then(a => console.log("set successfully"));
})
socket.on("recieveAnswertoClient1", answer =>{
console.log("+++++"+ JSON.parse(answer))
lc.setRemoteDescription(JSON.parse(answer))
})
});
The console prints 'tracks added' two times as seen the image
but the event listener is not invoked.
Thank you.
That is the expected behavior, the track event only triggers for remote tracks.