Einen Anruf erstellen

Spannende Zeiten — jetzt geben Sie Ihren Benutzern die Möglichkeit, Anrufe zu tätigen.

Zuerst erhalten Sie eine Referenz auf den "Call"-Button, der im HTML definiert ist, indem Sie Folgendes am Ende von script.js hinzufügen:
js
```
const callBtn = document.querySelector(".call-btn");
```
Wenn ein Anrufer auf "Call" klickt, sollten Sie ihn nach der Peer-ID des Peers fragen, den er anrufen möchte (wir speichern sie in der Variable code in getStreamCode()), und dann möchten Sie eine Verbindung mit diesem Code herstellen. Fügen Sie folgendes unter Ihrem bisherigen Code hinzu:
js
```
callBtn.addEventListener("click", () => {
  getStreamCode();
  connectPeers();
  const call = peer.call(code, window.localStream); // A

  call.on("stream", (stream) => {
    // B
    window.remoteAudio.srcObject = stream;
    window.remoteAudio.autoplay = true;
    window.peerStream = stream;
    showConnectedContent();
  });
});
```
Lassen Sie uns diesen Code durchgehen:
- const call = peer.call(code, window.localStream): Dies erstellt einen Anruf mit dem code und window.localStream, die wir zuvor zugewiesen haben. Beachten Sie, dass der localStream der localStream des Benutzers sein wird. Also für Anrufer A wird es sein Stream sein & für B ihr eigener Stream.
- call.on('stream', (stream) => { : peerJS bietet ein stream-Ereignis, das Sie für den erstellten call verwenden können. Wenn ein Anruf zu streamen beginnt, müssen Sie sicherstellen, dass der Remote-Stream aus dem Anruf den richtigen HTML-Elementen und Fenstern zugewiesen wird. Hier erreichen Sie das.
- Die anonyme Funktion nimmt ein MediaStream-Objekt als Argument, das Sie dann wie zuvor Ihrem Fenster-HTML zuweisen müssen. Hier erhalten Sie Ihr entferntes <audio>-Element und weisen den Stream, der zur Funktion übergeben wird, der srcObject-Eigenschaft zu.
- Stellen Sie sicher, dass das autoplay-Attribut des Elements ebenfalls auf true gesetzt ist.
- Stellen Sie sicher, dass das peerStream des Fensters auf den Stream gesetzt ist, der zur Funktion übergeben wird.
- Schließlich möchten Sie den korrekten Inhalt anzeigen, also rufen Sie die von Ihnen zuvor erstellte Funktion showConnectedContent() auf.
Um dies zu testen, öffnen Sie localhost:8000 in zwei Browserfenstern und klicken Sie in einem der Fenster auf Call. Sie sollten Folgendes sehen:

Wenn Sie die ID des anderen Peers angeben, wird die Verbindung hergestellt!

Das funktioniert bisher alles, aber wir müssen dem anderen Browser die Möglichkeit geben, den Anruf anzunehmen oder abzulehnen. Das werden wir als nächstes tun.