I am working on webrtc based Audio/Video conferencing app. For that, I have created a frontend in Angular 11 and the Backend node(express server). So I have created this app in using vanilla JS, HTML, CSS and it worked. But when I tried to convert the frontend into Angular app that where the problem es.

Working of the app goes like this, first I create the room and I will get a roomId which I send to another person and he uses that roomId to join the room for a chat.

When another person joins the room then onRoomJoined() gets executed on my side.

async onRoomJoined(data) {
    await this.setUpConnection(data['client-id'], data['client-name']);
    this.socket.emit('send-metadata', { 'room-id': this.roomId, 'client-name': this.clientName, 
      'client-id': this.clientId, 'peer-id': data['client-id'] });
}

Now this function further calls setUpConnection() function which is as follows,

  async setUpConnection(peerId, peerName, initiateCall = false){
    const videoElement = this.getVideoElement(peerId, 0, peerName);
    videoElement.autoplay = true;
    videoElement.playsInline = true;
    this.peerConnections[peerId] = { 'peer-name': peerName, 'pc': new RTCPeerConnection(iceServers) };
    this.peerConnections[peerId].pc.ontrack = (track) => { this.setRemoteStream(track, peerId); };
    this.addLocalStreamTracks(peerId);
    this.peerConnections[peerId].pc.onicecandidate = (iceCandidate) => { this.gatherIceCandidates(iceCandidate, peerId); };
    this.peerConnections[peerId].pc.oniceconnectionstatechange = (event) => { this.checkPeerDisconnection(event, peerId); };
    if (initiateCall === true) {
      await this.createOffer(peerId);
    }
  }

Following is the error I am getting in the browser console on my side(room creator),

ERROR Error: Uncaught (in promise): TypeError: this.setUpConnection is not a function
TypeError: this.setUpConnection is not a function
    at Socket.<anonymous> (homeponent.ts:440)
    at Generator.next (<anonymous>)
    at tslib.es6.js:76
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:72)
    at Socket.onRoomJoined (homeponent.ts:438)
    at Socket.push.cpc2.Emitter.emit (index.js:145)
    at Socket.emit (typed-events.js:46)
    at Socket.emitEvent (socket.js:263)
    at Socket.onevent (socket.js:250)
    at resolvePromise (zone-evergreen.js:798)
    at new ZoneAwarePromise (zone-evergreen.js:963)
    at __awaiter (tslib.es6.js:72)
    at Socket.onRoomJoined (homeponent.ts:438)
    at Socket.push.cpc2.Emitter.emit (index.js:145)
    at Socket.emit (typed-events.js:46)
    at Socket.emitEvent (socket.js:263)
    at Socket.onevent (socket.js:250)
    at Socket.onpacket (socket.js:214)
    at Manager.push.cpc2.Emitter.emit (index.js:145)

Here Both of above functions onRoomJoined() and setUpConnection() are there in homeponent.ts file. Still I am getting the TypeError: this.setUpConnection is not a function.

How this is possible?

Any Help is appreciated, Thanks!

I am working on webrtc based Audio/Video conferencing app. For that, I have created a frontend in Angular 11 and the Backend node(express server). So I have created this app in using vanilla JS, HTML, CSS and it worked. But when I tried to convert the frontend into Angular app that where the problem es.

Working of the app goes like this, first I create the room and I will get a roomId which I send to another person and he uses that roomId to join the room for a chat.

When another person joins the room then onRoomJoined() gets executed on my side.

async onRoomJoined(data) {
    await this.setUpConnection(data['client-id'], data['client-name']);
    this.socket.emit('send-metadata', { 'room-id': this.roomId, 'client-name': this.clientName, 
      'client-id': this.clientId, 'peer-id': data['client-id'] });
}

Now this function further calls setUpConnection() function which is as follows,

  async setUpConnection(peerId, peerName, initiateCall = false){
    const videoElement = this.getVideoElement(peerId, 0, peerName);
    videoElement.autoplay = true;
    videoElement.playsInline = true;
    this.peerConnections[peerId] = { 'peer-name': peerName, 'pc': new RTCPeerConnection(iceServers) };
    this.peerConnections[peerId].pc.ontrack = (track) => { this.setRemoteStream(track, peerId); };
    this.addLocalStreamTracks(peerId);
    this.peerConnections[peerId].pc.onicecandidate = (iceCandidate) => { this.gatherIceCandidates(iceCandidate, peerId); };
    this.peerConnections[peerId].pc.oniceconnectionstatechange = (event) => { this.checkPeerDisconnection(event, peerId); };
    if (initiateCall === true) {
      await this.createOffer(peerId);
    }
  }

Following is the error I am getting in the browser console on my side(room creator),

ERROR Error: Uncaught (in promise): TypeError: this.setUpConnection is not a function
TypeError: this.setUpConnection is not a function
    at Socket.<anonymous> (home.ponent.ts:440)
    at Generator.next (<anonymous>)
    at tslib.es6.js:76
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:72)
    at Socket.onRoomJoined (home.ponent.ts:438)
    at Socket.push.cpc2.Emitter.emit (index.js:145)
    at Socket.emit (typed-events.js:46)
    at Socket.emitEvent (socket.js:263)
    at Socket.onevent (socket.js:250)
    at resolvePromise (zone-evergreen.js:798)
    at new ZoneAwarePromise (zone-evergreen.js:963)
    at __awaiter (tslib.es6.js:72)
    at Socket.onRoomJoined (home.ponent.ts:438)
    at Socket.push.cpc2.Emitter.emit (index.js:145)
    at Socket.emit (typed-events.js:46)
    at Socket.emitEvent (socket.js:263)
    at Socket.onevent (socket.js:250)
    at Socket.onpacket (socket.js:214)
    at Manager.push.cpc2.Emitter.emit (index.js:145)

Here Both of above functions onRoomJoined() and setUpConnection() are there in home.ponent.ts file. Still I am getting the TypeError: this.setUpConnection is not a function.

How this is possible?

Any Help is appreciated, Thanks!

• javascript
• angular
• typeerror

Share Improve this question Follow edited Apr 24, 2021 at 13:59 R. Richards 25.2k1010 gold badges6666 silver badges6565 bronze badges asked Apr 24, 2021 at 13:50 pparth27743pparth27743 2311 silver badge55 bronze badges 2

• 1 Consider that the value of this may not be what you think it is.. – Pointy Commented Apr 24, 2021 at 13:51
• bind "this" to onRoomJoined invocation or use arrow function to call it e.g. onRoomJoined.bind(this) OR (data) => onRoomJoined(data) – Eray Ismailov Commented Apr 24, 2021 at 14:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I think you are mis-interpreting the 'this' keyword. 'this' inside the event handler would refer to the instance of the socket and not the ponent itself and hence it won't be able to find your setUpConnection() function in its vicinity. What you need to do is instead of a callback function try using the arrow function in your event handler. Say for example if you have done :

socket.on('some-event', onRoomJoined);

function onRoomJoined(data) {
    ...
    ...
    ...
}

What you should do instead is :

socket.on('some-event', (data) => {
    ...
    ...
    ...
});

Now inside the arrow function, the keyword 'this' would refer to your ponent and you'll be able to call the setUpConnection() function without any hassle.

if onRoomJoined function is called as a callback function like onontrack = onRoomJoind, then this is no longer the Angular ponent. You can get around this by passing this or setUpConnection function the as a param in onRoomJoined and use/call it inside.