Erstellen Sie einen Echtzeit-Video-Chat-Raum mit Webrtc & Twilio

Dieser Artikel profitierte von der Peer Review von Wern Ancheta und Tim Severien. Vielen Dank an die Peer -Rezensenten von SitePoint für die Verbesserung unserer Inhalte!

Erstellen Sie in meinem vorherigen Artikel "The Dawn of Webrtc", der eine einfache Fotokabon-App demonstrierte. Dieser Artikel führt Sie durch das Erstellen eines funktionalen Video-Chat-Raums mit der Web-Echtzeit-Communications (WEBRTC) -API.

.

weBRTC ermöglicht Web- und Mobile-Entwickler, hochauflösende Video- und Audioanwendungen mit unkomplizierten APIs zu erstellen. Eine breite Palette von Branchen, einschließlich Gesundheitsversorgung, Bildung, Kundendienst und sozialen Medien, nutzen WEBRTC für Anwendungen der nächsten Generation. Sie haben wahrscheinlich Webrtc unwissentlich über Plattformen wie Facebook Messenger, WhatsApp und Snapchat verwendet.

Schlüssellernen:

Integrieren Sie Echtzeit-Video und Audio mithilfe der programmierbaren Video-API von Twilio in Ihre Anwendungen, um das Engagement der Benutzer zu verbessern.
Richten Sie einen Video -Chat -Raum mit Twilio und Firebase für die Benutzerverwaltung ein.
Gewährleistung der Kompatibilität mit den von WEBRTC unterstützten Browsern (Chrome, Firefox, Opera) und implementieren Sie die SSL-Verschlüsselung für die sichere Kommunikation.
Verwenden Sie bereitgestelltes PHP- und JavaScript -Code für Benutzerauthentifizierung, Chat -Einladungen und Verbindungsverwaltung.
Entwickeln Sie eine robuste Echtzeit-Video-Chat-Anwendung mit User-Status-Updates und dynamischen Verbindungen/Trennungsfunktionen.

Straffung der Entwicklung mit Twilio

weBRTC und ähnliche Technologien revolutionieren die Kommunikation. Entwickler können verbesserte Kommunikationsfunktionen problemlos in jede Anwendung integrieren. Genau wie wichtige Plattformen wie Facebook, Snapchat, Tango und WhatsApp Live -Audio und Video integriert haben, können Sie auch.

Der Prozess ist überraschend einfach, schnell und kostengünstig. Die Open-Source-Natur von Google von WEBRTC beseitigt Lizenzgebühren. Navigieren von WebRTC -Komponenten wie Turn/Stun, Signal und MCUs können jedoch eine Herausforderung sein.

Viele PaaS -Anbieter bieten WEBRTC -Lösungen an. Aufgrund unserer Erfahrung bei BlacP Spot Media empfehlen wir Twilio für seine nachgewiesene Wirksamkeit. Dieser Artikel konzentriert sich auf ihre Plattform.

Twilio Video: Ein leistungsstarkes Werkzeug

Twilio bietet eine Reihe von Kommunikationstools über einfache APIs und SDKs an. Ihr programmierbares Video ermöglicht HD Multi-Party-Video- und Audioerlebnisse in Web- und Mobile-Apps. Twilio ist führend im WEBRTC -Raum und verbessert das Angebot kontinuierlich. Zukünftige Verbesserungen umfassen mobile Bildschirmfreigabe und verbesserte Mehrparteienfunktionen.

Erstellen des Chatraums

Diese Demo erfordert ein Twilio -Konto (melden Sie sich für ein kostenloses Konto an und wählen Sie "programmierbares Video"). Sie werden:

Credential	Description
Twilio Account SID	Your main Twilio account identifier (found on your dashboard).
Twilio Video Config SID	Enables video capabilities in the access token (generate one on your dashboard).
API Key	Used for authentication (generate one on your dashboard).
API Secret	Used for authentication (generate one on your dashboard).

Wir werden auch Firebase für die Benutzerverwaltung verwenden. (Melden Sie sich bei Bedarf für ein kostenloses Konto an). Nach dem Einrichten können Sie diese Demo auf einem Server bereitstellen.

Die Demo

Der Code ist auf GitHub verfügbar und eine Live -Demo wird bei BlacP Spot Media gehostet. Denken Sie daran, dass WebRTC derzeit Google Chrome, Mozilla Firefox und Opera auf dem Desktop unterstützt. Überprüfen Sie die Browserkompatibilität bei. Kann ich rtcpeerconnection verwenden?

Für die Serverbereitstellung (Chrome 47 und später benötigen Sie SSL), verwenden Sie Let Let Let Let Let Let Let Let LECTEPT für ein kostenloses SSL -Zertifikat. Ein Tutorial für digitales Ozean kann bei der Installation beitragen.

PHP -Code (token.php)

Dieses PHP -Skript übernimmt die Twilio -Authentifizierung und die Token -Generierung.

// ADD TWILIO REQUIRED LIBRARIES
require_once('twilio/Services/Twilio.php');

// TWILIO CREDENTIALS
$TWILIO_ACCOUNT_SID = 'your account sid here';
$TWILIO_CONFIGURATION_SID = 'your configuration sid here';
$TWILIO_API_KEY = 'your API key here';
$TWILIO_API_SECRET = 'your API secret here';

// CREATE TWILIO TOKEN
$id = $_GET['id'];

$token = new Services_Twilio_AccessToken(
    $TWILIO_ACCOUNT_SID,
    $TWILIO_API_KEY,
    $TWILIO_API_SECRET,
    3600,
    $id
);

$grant = new Services_Twilio_Auth_ConversationsGrant();
$grant->setConfigurationProfileSid($TWILIO_CONFIGURATION_SID);
$token->addGrant($grant);

echo json_encode(array(
    'id'    => $id,
    'token' => $token->toJWT(),
));

html code (index.html)

Diese HTML bietet die Grundstruktur für die Schnittstelle zur Chatraum.

<div class="m-content">
    <h1 id="Quick-Start-Your-WebRTC-Project-with-Twilio">Quick Start Your WebRTC Project with Twilio</h1>
    <div class="start">
        <input type="text" id="id" name="id" value="" placeholder="Enter your name to join the chat" />
        <button id="start">Join Chat Room</button>
        <button id="disconnect" class="b-disconnect hide">Disconnect from Chat</button>
        <div class="status">
            <strong>MY STATUS:</strong> <span id="status">DISCONNECTED</span>
        </div>
    </div>
    <div class="local">
        <div id="lstream"></div>
    </div>
    <div class="remote">
        <div id="rstream"></div>
    </div>
    <div class="users-list"></div>
    <div class="logs"></div>
</div>
<🎜>
<🎜>
<🎜>
<🎜>
<🎜>

JavaScript Code (app.js)

Dieses JavaScript übernimmt die WEBRTC -Funktionalität, die Benutzerinteraktion und die Integration von Firebase. (Hinweis: Dies ist eine deutlich verkürzte Version für die Kürze. Der vollständige Code ist auf Github verfügbar.)

// ... (WebRTC browser check, tlog function, etc.) ...

$('#start').on('click', function() {
  // ... (Ajax request to token.php, Twilio client setup) ...
});

// ... (clientConnected, firebaseConnect, addParticipant functions) ...

function startConversation() {
  // ... (Get user media, attach to #lstream) ...
}

// ... (conversationInvite, conversationStarted, participantConnected, participantDisconnected functions) ...

$('#disconnect').on('click', function() {
  // ... (Firebase disconnect, stop conversation, reset UI) ...
});

// ... (stopConversation function) ...

Der vollständige JavaScript -Code, einschließlich der ausgelassenen Funktionen, ist im GitHub -Repository verfügbar, das im Originalartikel verknüpft ist.

Schlussfolgerung

weBRTC transformiert die Kommunikation. Twilio und Firebase vereinfachen die Entwicklung von Kommunikationsanwendungen in Echtzeit. Erstellen Sie noch heute Ihre eigenen innovativen Lösungen! Weitere WEBRTC -Tutorials und Ressourcen finden Sie unter webrtc.tutorials (beim Start).

(Der FAQS-Abschnitt aus der ursprünglichen Eingabe wurde aufgrund von Längenbeschränkungen weggelassen, kann jedoch leicht in diese überarbeitete Ausgabe integriert werden.)

Das obige ist der detaillierte Inhalt vonErstellen Sie einen Echtzeit-Video-Chat-Raum mit Webrtc & Twilio. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!