Einem Anruf tätigen

• Zurück
• Weiter

Spannende Zeiten – nun werden Sie Ihren Benutzern die Möglichkeit geben, Anrufe zu tätigen.

1. Zuerst erhalten Sie eine Referenz auf den in Ihrem HTML definierten "Call"-Button, indem Sie Folgendes am Ende von script.js hinzufügen:

   js

   const callBtn = document.querySelector(".call-btn");
   

2. Wenn ein Anrufer auf "Call" klickt, möchten Sie ihn nach der Peer-ID des Peers fragen, den er anrufen möchte (diese speichern wir in der code-Variable in getStreamCode()) und dann möchten Sie mit diesem Code eine Verbindung herstellen. Fügen Sie den folgenden Code unter Ihrem vorherigen 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 wird einen Anruf mit dem code und window.localStream, die wir zuvor zugewiesen haben, erstellen. Beachten Sie, dass der localStream der localStream des Benutzers sein wird. Für Anrufer A wird es also ihr Strom sein und für B ihr eigener Strom.
   • call.on('stream', (stream) => { : peerJS bietet uns ein stream-Event, das Sie mit dem erstellten call verwenden können. Wenn ein Anruf streamt, müssen Sie sicherstellen, dass der Remote-Stream, der vom Anruf kommt, den richtigen HTML-Elementen und dem Fenster zugewiesen wird, hier werden Sie das tun.
   • Die anonyme Funktion nimmt ein MediaStream-Objekt als Argument, das Sie dann in Ihrem Fenster-HTML wie zuvor einstellen müssen. Hier erhalten Sie Ihr Remote-<audio>-Element und weisen den an die Funktion übergebenen Stream der srcObject-Eigenschaft zu.
   • Stellen Sie sicher, dass das Attribut autoplay des Elements auch auf true gesetzt ist.
   • Stellen Sie sicher, dass der peerStream des Fensters auf den an die Funktion übergebenen Stream gesetzt ist.
   • Schließlich möchten Sie die richtigen Inhalte anzeigen, rufen Sie also die zuvor erstellte Funktion showConnectedContent() auf.

3. Um dies zu testen, öffnen Sie localhost:8000 in zwei Browserfenstern und klicken Sie in einem von ihnen auf "Call". Sie sollten Folgendes sehen:

   

   Wenn Sie die ID des anderen Peers eingeben, wird der Anruf verbunden!

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.

• Zurück
• Weiter