Einen Anruf beantworten

Unsere Nutzer können jetzt einen Anruf tätigen, aber sie können keinen annehmen. Fügen wir das nächste Teil des Puzzles hinzu, damit die Nutzer Anrufe, die an sie gerichtet sind, beantworten können.

Das peerJS-Framework stellt das .on('call')-Ereignis zur Verfügung, und wir sollten es hier nutzen. Fügen Sie dies am Ende von script.js hinzu:
js
```
peer.on("call", (call) => {
  const answerCall = confirm("Do you want to answer?");
});
```
Zuerst fordern wir den Nutzer mit einem Bestätigungsdialog auf zu antworten. Dies zeigt ein Fenster auf dem Bildschirm (wie im Bild gezeigt), von dem aus der Nutzer "OK" oder "Abbrechen" auswählen kann — das wird auf einen zurückgegebenen booleschen Wert abgebildet. Wenn Sie in Ihrem Browser "Anrufen" drücken, sollte der folgende Dialog erscheinen:

Warnung: Da wir einen confirm-Dialog verwenden, um den Nutzer zu fragen, ob er den Anruf annehmen möchte, ist es wichtig, dass der Browser und der Tab, der angerufen wird, "aktiv" ist. Das bedeutet, das Fenster sollte nicht minimiert und der Tab sollte auf dem Bildschirm sichtbar sein, und die Maus sollte sich innerhalb des Tabs befinden. Idealerweise würden Sie in einer Produktionsversion dieser App Ihr eigenes Modal-Fenster in HTML erstellen, das diese Einschränkungen nicht hätte.
Lassen Sie uns diesen Ereignis-Listener weiter ausbauen. Aktualisieren Sie ihn wie folgt:
js
```
peer.on("call", (call) => {
  const answerCall = confirm("Do you want to answer?");

  if (answerCall) {
    call.answer(window.localStream); // A
    showConnectedContent(); // B
    call.on("stream", (stream) => {
      // C
      window.remoteAudio.srcObject = stream;
      window.remoteAudio.autoplay = true;
      window.peerStream = stream;
    });
  } else {
    console.log("call denied"); // D
  }
});
```
Gehen wir die wichtigsten Teile dieses Codes durch:
- call.answer(window.localStream): Wenn answerCall true ist, sollten Sie die answer()-Funktion von peerJS für den Anruf aufrufen, um eine Antwort zu erstellen, und den lokalen Stream übergeben.
- showCallContent: Ähnlich wie bei dem, was Sie im Ereignis-Listener des Anrufbuttons gemacht haben, sollten Sie sicherstellen, dass die angerufene Person den richtigen HTML-Inhalt sieht.
- Alles im call.on('stream', () => { }-Block ist genau das gleiche wie im Ereignis-Listener des Anrufbuttons. Der Grund, warum Sie es auch hier hinzufügen müssen, ist, damit der Browser auch für die Person aktualisiert wird, die den Anruf beantwortet.
- Wenn die Person den Anruf ablehnt, loggen wir einfach eine Nachricht in die Konsole.
Der Code, den Sie jetzt haben, reicht aus, um einen Anruf zu erstellen und ihn zu beantworten. Aktualisieren Sie Ihre Browser und testen Sie es aus. Stellen Sie sicher, dass beide Browser die Konsole geöffnet haben, sonst erhalten Sie den Aufforderung nicht, den Anruf zu beantworten. Klicken Sie auf Anruf, übermitteln Sie die Peer-ID für den anderen Browser und beantworten Sie dann den Anruf. Die endgültige Seite sollte folgendermaßen aussehen: