Vonage Video API Hackathon-Kit

Eine Kurzanleitung zum Einbinden der Vonage Video API-Funktionalität in Ihre Hackathon-Anwendung

TokBox veranstaltet ein virtueller Hackathon vom 1. August bis zum 18. September. Machen Sie mit bei der HackTokBox-Slack-Gruppe und springen Sie zum #arlivevideo Slack-Kanal für den Einstieg.

Schnellzugriff

Was ist OpenTok?

Die von Vonage entwickelte OpenTok-Plattform ermöglicht die einfache Einbindung hochwertiger interaktiver Echtzeit-Funktionen für Video, Sprache, Nachrichtenübermittlung und Bildschirmfreigabe in Web- und Mobil-Apps.

Die Plattform umfasst clientseitige Bibliotheken für Web, iOS, Android, Windows und Linux sowie serverseitige SDKs und eine REST-API.

Wie kann ich OpenTok nutzen?

Die OpenTok-Plattform ermöglicht nicht nur die Integration von Audio- und Video-Chats in Echtzeit in Web- und Mobil-Apps, sondern bietet auch eine Vielzahl von Funktionen, mit denen sich innovative Anwendungsfälle in nahezu jeder Branche entwickeln lassen.

Hier sind nur einige Beispiele dafür, wie Unternehmen weltweit OpenTok einsetzen:

  • Beliebte Social-Media-App Hausparty nutzt OpenTok, um Live-Video-Räume einzurichten, in denen Nutzer auf ihrem Mobilgerät mit Freunden „chillen“ können
  • Minerva wurde gegründet virtuelle Klassenzimmer wo bis zu 18 Schüler in Echtzeit mit ihrem Lehrer interagieren können
  • Babylon Health macht es einfach, direkt über Ihr Smartphone Videokonsultationen in Echtzeit mit Ärzten, Therapeuten und Fachärzten zu vereinbaren
  • Roll20 hat eine virtuelle Spielfläche mit Video- und Sprachchat für Nutzer, die gemeinsam online spielen
  • Esurance wurde hinzugefügt Video-Begutachtung in ihre App integriert, sodass Kunden mit einem Mitarbeiter sprechen und nach einem Unfall Live-Videos der Schäden zeigen können
  • Be My Eyes verbindet blinde und sehbehinderte Menschen über Live-Video mit sehenden Helfern aus aller Welt
  • Double Robotics hat Telepräsenzroboter entwickelt, die mithilfe von Echtzeit-Videos den Nutzern eine physische Präsenz in einem Büro oder an einem anderen entfernten Standort ermöglichen
  • Weitere Beispiele dafür, wie OpenTok genutzt wird, finden Sie in unserem Kundenberichte Seite.

Hier sind einige Ideen, was ihr während eures Hackathons entwickeln könnt:

  • Eine Video-Speed-Dating-App, bei der die Nutzer nacheinander Videochats mit ihren Matches führen
  • Ein Gesellschaftsspiel wie „Scharade“ oder „Cards Against Humanity“, das per Videokonferenz gespielt wird
  • Eine App für Demokratie-Technologie – virtuelle Bürgerversammlung, Organisation von Protesten, Spendensammlung
  • Eine VR-Application mit Video-Chat-Funktion
  • Kombinieren Sie OpenTok mit Clarifai um eine Videokommunikations-App um eine Bilderkennung zu erweitern
  • Nutzen Sie OpenTok’s HLS- und RTMP-Übertragung Funktion zum Veröffentlichen von Streams auf Livestream und/oder JWPlayer oder auf einem RTMP-Server

Demo

Um zu sehen, wie OpenTok in der Praxis funktioniert, können Sie sich unsere Videokonferenz-Demo unten ansehen:

  1. Gehe zu opentokdemo.tokbox.com oder laden Sie die OpenTokApp im App Store herunter
  2. Einen Raum erstellen
  3. Teile die Raum-URL (oder den Raumnamen) mit einem Freund oder öffne sie einfach in einem neuen Tab, um einen Video-Chat zu starten

Wichtige Concepts

Sitzungen und Tokens

Jeder OpenTok-Videochat findet innerhalb eines Sitzung. Man kann sich eine Sitzung als eine Art „Chatroom“ vorstellen, in dem Clients (Browser oder mobile App) gegenseitig Nachrichten veröffentlichen und abonnieren können. Ströme. Die Sitzungen werden in der OpenTok-Cloud gehostet, und jede Sitzung ist mit einer eindeutigen Sitzungs-ID. Damit mehrere Clients miteinander chatten können, müssen Sie sie einfach mit derselben Sitzungs-ID verbinden.

A Token ist Ihr „Schlüssel“ für die Sitzung und wird für eine bestimmte Sitzungs-ID generiert. Jeder Benutzer sollte über ein eigenes Token verfügen, um sich mit der Sitzung zu verbinden. Diese Token verfallen nach einer bestimmten Zeit (die vom Entwickler festgelegt wird), die Sitzung selbst hingegen nicht.

Sitzungs-IDs und Tokens werden in der Regel mithilfe der serverseitig Bestandteil einer OpenTok-Application, aber wenn Sie lediglich eine Demo oder einen Proof-of-Concept erstellen, können Sie diese in Ihrem Account - Gehen Sie einfach auf Ihre Projektübersichtsseite und scrollen Sie nach unten zu Projekt-Tools.

Verbindungen, Herausgeber und Abonnenten

Sobald ein Client über eine Sitzungs-ID und ein Token verfügt, kann er eine Verbindung mit Code aus den clientseitigen SDKs (siehe unten) eine Verbindung zur Sitzung herstellen. Diese Verbindung löst ein Ereignis an die Sitzung und alle bereits verbundenen Clients aus. Sobald die Verbindung hergestellt ist, kann der Client veröffentlichen. einen Audio-/Videostream von seiner Kamera und seinem Mikrofon

Wenn ein Client einen Stream veröffentlicht, werden Ereignisse an alle mit der Sitzung verbundenen Clients gesendet. Nach Erhalt des Ereignisses können die Clients abonnieren zum neu veröffentlichten Stream.

Weitere Informationen zu Sessions, Tokens, Streams und vielem mehr findest du auf unserer Seite „Grundlagen der Video API“.

Holen Sie sich Ihren API-Schlüssel

  1. Erhalten Sie Ihren API-Schlüssel, indem Sie sich für einen kostenlosen Account registrieren hier. Vergiss nicht, bei der Anmeldung deinen Hackathon-Promo-Code einzugeben.
  2. Sobald Sie in Ihrem Account angemeldet sind, Ein neues Projekt erstellen. Beim Erstellen Ihrer App verwenden Sie die Projektübersicht um Sitzungs-IDs und Tokens zu generieren (mehr dazu weiter unten).

Einrichten eines Clients (mit Beispiel-Apps)

Die clientseitige Komponente einer OpenTok-App stellt den Großteil der Funktionen einer OpenTok-Anwendung bereit. Der Client nutzt die Sitzungs-ID und das Token (siehe oben), um den Nutzer über einen Webbrowser oder eine mobile App mit einer Sitzung zu verbinden.

Einfacher Video-Chat

Wenn Sie erfahren möchten, wie Sie den grundlegendsten clientseitigen Code im Web einrichten, lesen Sie unseren Hallo Welt. Für die Entwicklung mobiler Anwendungen können Sie unsere clientseitigen Beispiel-Apps für iOS Swift, iOS Objective-C und Android auf GitHub.

Beispiel-Apps für Accelerator + Extras

Um relativ schnell eine etwas ausgefeiltere clientseitige Lösung mit einigen erweiterten Funktionen zum Laufen zu bringen, können Sie unsere Accelerator-Beispiel-Apps für Web, iOSund Android auf GitHub.

Diese Beispiel-Apps umfassen grundlegende Audio-/Video-Chat-Funktionen sowie Bedienelemente, einen integrierten Text-Chat und einigen Startcode für die Einrichtung der Bildschirmfreigabe und der Archivierung. Weitere Informationen zur Einrichtung und zu den erweiterten Funktionen dieser Beispiel-Apps finden Sie in den README-Dateien auf GitHub. Sie können die Benutzeroberfläche dieser Beispiele mithilfe von CSS nach Belieben anpassen.

Weitere mobile Beispiele

Wenn Sie Gruppenchats, benutzerdefinierte Audio-/Videotreiber oder andere spezielle Anwendungsfälle auf Mobilgeräten implementieren möchten, bieten wir Ihnen mehrere weitere Beispiel-Apps für Android, iOS Swiftund iOS Objective-C

Weitere Informationen

Weitere Informationen zur Einrichtung des clientseitigen Codes für Ihre OpenTok-Application finden Sie in unserem Leitfäden für Entwickler.

Einrichten eines Servers (optional)

Die serverseitige Komponente einer OpenTok-App dient dazu, Sitzungs-IDs und Tokens für Anwendungsbenutzer zu generieren. Wenn Sie lediglich eine Demo oder einen Proof of Concept erstellen, benötigen Sie möglicherweise keine serverseitige Komponente – Sie können Sitzungs-IDs und Tokens auf der Seite „Projektübersicht“ Ihres Projekts in Ihrem Video API-Konto (Öffnen oder erstellen Sie einfach ein Projekt und scrollen Sie dann nach unten zu „`Projekt-Tools`“).

Wenn Sie daran interessiert sind, eine serverseitige Komponente einzurichten, finden Sie hier einige Beispiel-Apps für den schnellen Einstieg für jede Sprache des serverseitigen SDKs:
PHP | Java | .NET | Knotenpunkt | Rubinrot | Python

Weitere Informationen zur Einrichtung von serverseitigem Code finden Sie in unserem Leitfäden für Entwickler.

Augmented Reality und Live-Video

Um einen ersten Einblick in AR und Live-Videos zu erhalten, sehen Sie sich die folgenden Beispiele an:
ARKit
ARKit-Frame-Metadaten

Erweiterte Funktionen

Neben den grundlegenden Videochat-Funktionen bietet OpenTok eine Vielzahl weiterer, erweiterter Funktionen. Unsere Beispiel-Apps für Accelerator Oben finden Sie Code für einige dieser Funktionen (Bildschirmfreigabe, Archivierung und Text-Chat), aber hier sind einige hilfreiche Anleitungen mit weiteren Informationen zur Einrichtung erweiterter Funktionen:

Bildschirmfreigabe:
Die Beispiel-Apps für Accelerator Oben finden Sie den Startcode für die Bildschirmfreigabe-Funktion, aber Sie sollten sich auch unsere Anleitungen zur Bildschirmfreigabe ansehen für Web, iOSund Android. Normalerweise müssen Sie für die Bildschirmfreigabe im Internet Eine benutzerdefinierte Browser-Erweiterung erstellen, aber wenn Sie „localhost“ nur zur Demonstration Ihrer App verwenden, können Sie diese vorgefertigte Erweiterung nutzen.

Weitere Anleitungen zu erweiterten Funktionen:
Archivierung – Anleitung | Leitfaden
Text-Chat
Sendung
SIP-Zusammenschaltung (verbindet OpenTok-Sitzungen mit SIP-Anrufen/Telefonie)

Weitere Informationen zur Implementierung dieser und anderer Funktionen finden Sie in unserem Leitfäden für Entwickler. Sie können sich auch unsere API-Referenzdokumente für Informationen zu bestimmten Methoden und Aufrufen.

Tipps & Tricks

  • Ein lokaler Webserver ist die beste Möglichkeit, Ihre Web-App schnell vorzuführen. Falls Sie noch keinen haben, finden Sie hier einige gängige Dienste: XAMPP und MAMP. Alternativ könnten Sie den Python-SimpleHttpServer, einen PHP-Webserver oder eine Node-App verwenden.
  • Wenn Sie von mehreren Geräten aus (z. B. einem Laptop und einem Smartphone) eine Verbindung zu Ihrem Localhost herstellen möchten, ngrok lässt sich in wenigen Minuten einrichten, um über eine sichere öffentliche URL auf Ihren Localhost zuzugreifen.
  • Hier finden Sie eine Liste der von OpenTok unterstützten Browser hier
  • Chrome erlaubt WebRTC-Kommunikation nur über HTTPS

Hilfe bekommen

Wenn Sie eine Frage haben oder Hilfe bei der Entwicklung Ihrer App benötigen, gibt es mehrere Möglichkeiten, uns zu kontaktieren, um eine schnelle Antwort zu erhalten:

  • Wenden Sie sich an unser technisches Team vor Ort, wenn Sie an einer Vonage-Veranstaltung teilnehmen.
  • Kontakt