Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
a month ago

How can a JavaScript class be utilized to establish dynamic peer connections?

As a developer, I am currently working on a dynamic web conference application. The app should allow an unlimited number of participants to join a conference. In order to achieve this, I need to create a RTCPeerConnection class which will generate a new object every time a user wants to join the conference. However, I am having difficulty implementing the event listeners ontrack and onicecandidate into the class. Additionally, I'm getting a reference error when executing the setRemoteDescriptionFromOffer function, which I believe is due to the ontrack function being absent. I have researched how to create an event listener in a class, but haven't discovered anything meaningful. I'm unsure whether creating such a dynamic connection is feasible.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It is possible to create an event listener in a class in JavaScript. You can use the addEventListener() method to add an event listener to each element with a specific class. Regarding the RTCPeerConnection class, you can use the ontrack and onicecandidate properties to implement the event listeners. The ontrack property is an event handler that specifies a function to be called when a new incoming MediaStreamTrack has been created and associated with an RTCRtpReceiver object which has been added to the set of receivers on connection. The onicecandidate property is an EventHandler which specifies a function to be called when the icecandidate event occurs on an RTCPeerConnection instance. As for the reference error you are getting when executing the setRemoteDescriptionFromOffer function, it is possible that it is due to the ontrack function being absent. You can try adding the ontrack function to your code and see if that resolves the issue. I hope this helps! Let me know if you have any other questions.

Sources

EventTarget: addEventListener() method - Web APIs | MDN - Mozilla DeveloperRTCPeerConnection: setRemoteDescription() method - Web APIs | MDNCreating and triggering events - Event reference | MDN - Mozilla DeveloperThe addEventListener() Method – JavaScript Event Listener Example CodeAdd event listener to all Elements with Class in JavaScriptRTCPeerConnection.ontrack - Web APIs | MDNRTCPeerConnection.onicecandidate - Web APIs | MDNJavaScript click event listener on class - Stack Overflowjavascript - Custom Events in CLASS - Stack OverflowRTCPeerConnection: icecandidate event - Web APIs | MDN - Mozilla DeveloperRTCPeerconnection.onicecandidate functions? - Stack OverflowRTCPeerConnection - Web APIs | MDN - Mozilla Developer
avatar
Tolerim
a month ago
It's definitely possible to create a dynamic conference app using RTCPeerConnection! Here are some tips to help you implement the event listeners and fix the reference error: - To implement event listeners like ontrack and onicecandidate, you can simply define them inside your constructor function. Here's an example: 
class PeerConnection {

  constructor() {
    this.connection = new RTCPeerConnection(null);
    this.remoteStream = null;
    this.candidate = [];
    
    // define event listeners
    this.connection.ontrack = e => {
      console.log("onTrack", e.streams[0]);
      this.remoteStream = e.treams[0];
    };
    
    this.connection.onicecandidate = e => {
      if (e.candidate != null) {
        console.log("sendet Candidate", JSON.stringify(e.candidate));
      }
    };
  }
  
  // other functions...
  
}
Notice that we define the event listeners inside the constructor, just like any other class method. Then we use arrow functions to define the callback functions for each event. - The reference error you're seeing in setRemoteDescriptionFromOffer is most likely because you're calling createAnswer without using this, so it's not defined within the current scope. To fix this, simply add this. before createAnswer, like this: 
async setRemoteDescriptionFromOffer(sdp) {
  console.log("remoteDescription Offer");
  console.log(this.connection);
  await this.connection.setRemoteDescription(new RTCSessionDescription(sdp)).then((e) => {
    this.createAnswer();
  }).catch((e) => {
    console.log(`failure MESSAGE:${e.name}`)
  });
}
With these changes, your PeerConnection class should work as expected. Let me know if you have any more questions!
;