Einrichtung

Beginnen wir damit, die Grundlage für unsere WebRTC-basierte Telefon-App einzurichten.

Wählen Sie zunächst einen geeigneten Ort in Ihrem lokalen Dateisystem. Führen Sie mkdir audio_app und anschließend cd audio_app aus, um ein Verzeichnis für Ihre App zu erstellen und in dieses zu wechseln.
Erstellen Sie als Nächstes mit yarn init eine neue App. Folgen Sie den Eingabeaufforderungen und geben Sie einen Namen, eine Version, eine Beschreibung usw. für Ihr Projekt an.
Installieren Sie anschließend die erforderlichen Abhängigkeiten mit den folgenden Befehlen:
- Express: yarn add express
- PeerJS: yarn add peerjs
- Peer: yarn add peer
Peer wird für den Peer-Server verwendet, während PeerJS den Zugriff auf die PeerJS-API und das Framework ermöglicht. Nach der Installation der Abhängigkeiten sollte Ihre package.json ungefähr so aussehen:
json
```
{
  "name": "audio_app",
  "version": "1.0.0",
  "description": "An audio app using WebRTC",
  "scripts": {
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Lola Odelola",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "peer": "^0.5.3",
    "peerjs": "^1.3.1"
  }
}
```
Kopieren Sie zum Abschluss der Einrichtung die folgenden HTML- und CSS-Dateien in das Stammverzeichnis Ihres Projekts. Sie können beide Dateien index nennen: Die HTML-Datei heißt dann index.html und die CSS-Datei index.css. In den folgenden Artikeln müssen Sie diese Dateien kaum ändern.

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Lola's Web Phone!</title>
    <meta
      property="og:description"
      content="Cast your computer to your devices as a teleprompter" />

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/index.css" />
    <!-- import the javascript -->
    <script src="script.js" defer></script>
    <script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/davidshimjs-qrcodejs@0.0.2/qrcode.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Phone a friend</h1>
      <p id="cast-status" class="big">Connecting...</p>
      <p>Please use headphones!</p>
      <button class="call-btn">Call</button>
      <section class="call-container" hidden>
        <div class="audio-container">
          <p>You're automatically muted, unmute yourself!</p>
          <audio controls id="remoteAudio" muted="true"></audio>
          <audio controls id="localAudio" muted="true"></audio>
        </div>
        <button class="hangup-btn">Hang up</button>
      </section>
    </div>

    <section class="modal" hidden>
      <div id="close">close</div>
      <div class="inner-modal">
        <label>Give us your friend's device ID</label>
        <input placeholder="Enter your friend's device ID" aria-colcount="10" />
        <button class="connect-btn">Connect</button>
      </div>
    </section>
  </body>
</html>

css

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  color: darkslategrey;
  display: flex;
  align-items: center;
  justify-content: center;
  background: antiquewhite;
}

h1 {
  font-size: 6rem;
  letter-spacing: 0.2rem;
  margin-bottom: auto;
}

p {
  text-align: center;
  font-size: 2rem;
}

button {
  background-color: light-dark(white, black);
  padding: 1rem 10rem;
  border-radius: 3rem;
  border: none;
  cursor: pointer;
}

.call-btn {
  background-color: darkslategrey;
  color: antiquewhite;
  font-size: 3rem;
  margin-left: 7rem;
}

.hangup-btn {
  background-color: darkred;
  color: white;
  font-size: 1.5rem;
  margin-left: 6rem;
  margin-top: 4rem;
}

.modal {
  padding: 5rem;
  background-color: whitesmoke;
  border-radius: 2rem;
  width: 40rem;
  height: 20rem;
}

.inner-modal {
  text-align: center;
}

.modal label {
  font-size: 1.5rem;
}
.modal input {
  margin: 1rem 7rem 3rem;
  display: block;
  padding: 1rem;
  border-radius: 3rem;
  box-shadow: 0 0 15px 4px rgb(0 0 0 / 0.19);
  border: none;
  width: 50%;
}

.connect-btn {
  background-color: #0c1d1d;
  color: whitesmoke;
  font-size: 1.5rem;
}

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden