Erstellen der Projektordner und der HTML-Vorlage
Sie beginnen mit der Erstellung einer HTML-Datei, einer JavaScript-Datei und einer CSS-Datei. Diese drei Dateien werden unser Layout, die Anwendungslogik und einige visuelle Elemente enthalten.
- Bevor Sie mit dem Code beginnen, erstellen Sie einen neuen Projektordner auf Ihrem Computer, um diese Dateien zu speichern (das folgende Beispiel heißt myproject aber Sie können es nennen, wie Sie wollen). Dann fügen Sie eine /js und /css zusammen mit leeren Dateien für index.html, app.jsund app.css in der folgenden Struktur:
Sobald Sie Ihr Projekt eingerichtet haben, öffnen Sie den Hauptprojektordner in Ihrem Code-Editor und gehen Sie zum Abschnitt index.html Datei.
- Kopieren Sie den folgenden Code (über die Schaltfläche Kopieren) und fügen Sie ihn im Code-Editor in Ihre Datei index.html ein:
<html>
<head>
<title> Vonage Getting Started </title>
<link href="css/app.css" rel="stylesheet" type="text/css">
<script src="https://video.standard.vonage.com/v2/js/opentok.min.js"></script>
</head>
<body>
<div id="videos">
<div id="subscriber"></div>
<div id="publisher"></div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Der obige Code enthält Verweise auf die opentok.js Bibliothek sowie die von Ihnen erstellten JS- und CSS-Dateien. Der Code enthält außerdem Herausgeber und Teilnehmer divs, die die Videostreams enthalten werden - wir werden diese Klassen verwenden, um das Layout später anzupassen.
Einfacher Video-Chat
Lernen Sie die grundlegenden Concepts der Vonage Video API-Plattform kennen und erfahren Sie, wie Benutzer über Video, Voice und Messaging kommunizieren können. Erkunden Sie einen grundlegenden Ablauf der Vonage Video API.