PeerConnection.onicecandidate-Rückruf wird nicht aufgerufen (webRTC, Angular) ⇐ JavaScript

[Guest]

Ich bin ein Anfänger und versuche, eine webRTC-Videoanruf-App als Projekt zu erstellen (ich habe es geschafft, sie mit WebSockets zum Laufen zu bringen, aber bei langsamer Internetverbindung friert sie ein). Ich verwende Angular für FE und Go für BE. Ich habe ein Problem damit, dass der peerConnection.onicecandidate-Rückruf nicht ausgelöst wird. Die Methoden „setLocalDescription“ und „setRemoteDescription“ scheinen keine Fehler auszulösen, und die Protokollierung der SDPs sieht gut aus, sodass das Problem wahrscheinlich nicht im Backend liegt, da die SDP-Angebote und -Antworten ordnungsgemäß transportiert werden (über Websockets). Hier ist der Winkeldienstcode, der die Konnektivität herstellen soll:

Code: Select all

import { HttpClient, HttpHeaders } from '@angular/common/http'
import { Injectable, OnInit } from '@angular/core'
import { from, lastValueFrom, Observable } from 'rxjs'
import { Router } from '@angular/router';

interface Member {
memberID: string
name: string
conn: RTCPeerConnection | null
}

@Injectable({
providedIn: 'root'
})
export class ApiService {

constructor(private http: HttpClient, private router: Router) { }

// members data
public stableMembers: Member[] = []

// private httpUrl = 'https://callgo-server-386137910114.europe-west1.run.app'
// private webSocketUrl = 'wss://callgo-server-386137910114.europe-west1.run.app/ws'
private httpUrl = 'http://localhost:8080'
private webSocketUrl = 'http://localhost:8080/ws'

// http
createSession(): Promise {
return lastValueFrom(this.http.post(`${this.httpUrl}/initialize`, null))
}

kickSession(sessionID: string, memberID: string, password: string): Promise {
return lastValueFrom(this.http.post(`${this.httpUrl}/disconnect`, {
"sessionID":`${sessionID}`,
"memberID":`${memberID}`,
"password":`${password}`
}))
}

// websocket
private webSocket!: WebSocket

// stun server
private config = {iceServers: [{ urls: ['stun:stun.l.google.com:19302', 'stun:stun2.1.google.com:19302'] }]}

// callbacks that other classes can define using their context, but apiService calls them
public initMemberDisplay = (newMember: Member) => {}
public initMemberCamera = (newMember: Member) => {}

async connect(sessionID: string, displayName: string) {
console.log(sessionID)

this.webSocket = new WebSocket(`${this.webSocketUrl}?sessionID=${sessionID}&displayName=${displayName}`)

this.webSocket.onopen = (event: Event) => {
console.log('WebSocket connection established')
}

this.webSocket.onmessage = async (message: MessageEvent) => {
const data = JSON.parse(message.data)

// when being asigned an ID
if(data.type == "assignID") {
sessionStorage.setItem("myID", data.memberID)
this.stableMembers.push({
"name": data.memberName,
"memberID": data.memberID,
"conn": null
})
}

// when being notified about who is already in the meeting (on meeting join)
if(data.type == "exist") {
this.stableMembers.push({
"name": data.memberName,
"memberID": data.memberID,
"conn": null
})
}

// when being notified about a new joining member
if(data.type == "join") {
// webRTC
const peerConnection = new RTCPeerConnection(this.config)
// send ICE
peerConnection.onicecandidate = (event: RTCPeerConnectionIceEvent) => {
console.log(event)
event.candidate && console.log(event.candidate)
}
// send SDP
try {
await peerConnection.setLocalDescription(await peerConnection.createOffer())
this.sendSDP(peerConnection.localDescription!, data.memberID, sessionStorage.getItem("myID")!)
} catch(error) {
console.log(error)
}

this.stableMembers.push({
"name": data.memberName,
"memberID": data.memberID,
"conn": peerConnection
})
}

// on member disconnect notification
if(data.type == "leave") {
this.stableMembers = this.stableMembers.filter(member =>  member.memberID != data.memberID)
}

// on received SDP
if(data.sdp) {
if(data.sdp.type == "offer") {
const peerConnection = new RTCPeerConnection(this.config)
try {
const findWithSameID = this.stableMembers.find(member => member?.memberID == data?.from)
findWithSameID!.conn = peerConnection
await peerConnection.setRemoteDescription(new RTCSessionDescription(data.sdp))
const answer: RTCSessionDescriptionInit = await peerConnection.createAnswer()
await peerConnection.setLocalDescription(answer)
this.sendSDP(answer, data.from, sessionStorage.getItem("myID")!)

this.initMemberDisplay(findWithSameID!)
this.initMemberCamera(findWithSameID!)
} catch(error) {
console.log(error)
}
}

if(data.sdp.type == "answer") {
try {
const findWithSameID = this.stableMembers.find(member => member?.memberID == data?.from)
await findWithSameID!.conn!.setRemoteDescription(new RTCSessionDescription(data.sdp))

this.initMemberDisplay(findWithSameID!)
this.initMemberCamera(findWithSameID!)
} catch(error) {
console.log(error)
}
}
}
}

this.webSocket.onclose = () => {
console.log('WebSocket connection closed')
this.stableMembers = []
this.router.navigate(['/menu'])
}

this.webSocket.onerror = (error) => {
console.error('WebSocket error:', error)
}
}

close() {
if(this.webSocket && this.webSocket.readyState === WebSocket.OPEN) {
this.webSocket.close()
} else {
console.error('WebSocket already closed.')
}
}

sendSDP(sdp: RTCSessionDescriptionInit, to: string, from: string) {
this.webSocket.send(JSON.stringify({
"to": to,
"from": from,
"sdp": sdp
}))
}

}

Zur kurzen Erläuterung: „stableMembers“ enthält Verweise auf alle Mitglieder auf dem Client und der Rest des Codes ändert sie nach Bedarf. Die Rückrufe initMemberDisplay und initMemberCamera sollen von anderen Komponenten definiert und zum Empfangen und Senden von Videospuren verwendet werden. Ich habe weder auf FE noch auf BE etwas ICE-bezogenes implementiert, aber als ich es versuchte, bemerkte ich, dass der onicecandidate-Rückruf einfach nicht aufgerufen wird. Ich verwende die kostenlosen bekannten Stun-Google-Server: private config = {iceServers: [{ urls: ['stun:stun.l.google.com:19302', 'stun:stun2.1.google.com:19302'] } ]}. Falls Sie den Rest des Codes lesen möchten, finden Sie das Repo hier: https://github.com/HoriaBosoanca/callgo-client. Es gibt einen Link zum BE-Code in der Readme-Datei.
Ich habe versucht, das Ereignis über den Rückruf peerConnection.onicecandidate = (event: RTCPeerConnectionIceEvent) => {console.log(event)} zu protokollieren und mir ist aufgefallen, dass nichts protokolliert wurde.