2

我正在开发基于 webrtc 的音频/视频会议应用程序。为此，我在 Angular 11 和后端节点（快速服务器）中创建了一个前端。所以我使用 vanilla JS、HTML、CSS 创建了这个应用程序，它工作正常。但是当我试图将前端转换为 Angular 应用程序时，问题就来了。

应用程序的工作是这样的，首先我创建了房间，然后我会得到一个roomId我发送给另一个人的信息，他用它roomId来加入房间进行聊天。

当另一个人加入房间 onRoomJoined()时，我会被处决。

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'] });
}

现在这个函数进一步调用setUpConnection()函数如下，


  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);
    }
  }

以下是我在我身边的浏览器控制台中遇到的错误（房间创建者），

ERROR Error: Uncaught (in promise): TypeError: this.setUpConnection is not a function
TypeError: this.setUpConnection is not a function
    at Socket.<anonymous> (home.component.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.component.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.component.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 以上两个函数onRoomJoined()都setUpConnection()在home.component.ts文件中。我仍然得到TypeError: this.setUpConnection is not a function.

这怎么可能？

任何帮助表示赞赏，谢谢！

4

2 回答 2

5

我认为您误解了“this”关键字。事件处理程序中的“this”将引用套接字的实例而不是组件本身，因此它将无法在其附近找到您的 setUpConnection() 函数。您需要做的是尝试在事件处理程序中使用箭头函数而不是回调函数。例如，如果您已经完成：

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

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

你应该做的是：

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

现在在箭头函数中，关键字“this”将引用您的组件，您将能够轻松调用 setUpConnection() 函数。

于 2021-04-24T16:03:30.833 回答
1

如果 onRoomJoined 函数被调用为像 onontrack = onRoomJoind 这样的回调函数，则this不再是 Angular 组件。您可以通过在 onRoomJoined 中将 this 或 setUpConnection 函数作为参数传递并在内部使用/调用它来解决此问题。

于 2021-04-24T14:11:22.367 回答