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.

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

Twilio Video: Ein leistungsstarkes Werkzeug

Erstellen des Chatraums

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>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!