Créez une salle de chat vidéo en temps réel avec Webbrtc & Twilio

Cet article a bénéficié de l'examen par les pairs de Wern Ancheta et Tim Severien. Merci aux pairs examinateurs de SitePoint pour améliorer notre contenu!

s'appuyant sur mon article précédent, "The Dawn of Webbrtc", qui a démontré une application de photomaton simple, cet article vous guide en créant une salle de discussion vidéo fonctionnelle à l'aide de l'API Web Communications en temps réel (WebBrTC)

WeBrTC permet aux développeurs Web et mobiles de créer des applications d'appels vidéo et audio haute définition avec des API simples. Un large éventail d'industries, y compris les soins de santé, l'éducation, le service à la clientèle et les médias sociaux, tire partis de la WEBRTC pour les applications de nouvelle génération. Vous avez probablement utilisé WeBrTC sans le savoir via des plates-formes comme Facebook Messenger, WhatsApp et Snapchat.

Points d'apprentissage clés:

• Intégrez la vidéo et l'audio en temps réel dans vos applications en utilisant l'API vidéo programmable de Twilio, améliorant l'engagement des utilisateurs.
• Configurez une salle de chat vidéo avec Twilio et Firebase pour la gestion des utilisateurs.
• Assurer la compatibilité avec les navigateurs soutenus par WeBRTC (Chrome, Firefox, Opera) et implémenter le cryptage SSL pour une communication sécurisée.
• Utiliser le code PHP et JavaScript fourni pour l'authentification des utilisateurs, les invitations de chat et la gestion des connexions.
• Développer une application de chat vidéo robuste en temps réel avec les mises à jour de l'état de l'utilisateur et les capacités de connexion / déconnexion dynamique.

rationalisation du développement avec Twilio

webrtc et des technologies similaires révolutionnent la communication. Les développeurs peuvent facilement intégrer des fonctionnalités de communication améliorées dans n'importe quelle application. Tout comme les principales plateformes comme Facebook, Snapchat, Tango et WhatsApp ont incorporé audio et vidéo en direct, vous pouvez aussi.

Le processus est étonnamment simple, rapide et rentable. La nature open source de Google de WebBrTC élimine les frais de licence. Cependant, la navigation de composants WebBrTC comme Turn / Stun, la signalisation et les MCU peuvent être difficiles.

De nombreux fournisseurs de PaaS proposent des solutions WeBRTC. Sur la base de notre expérience chez BLACC Spot Media, nous recommandons Twilio pour son efficacité éprouvée. Cet article se concentre sur leur plate-forme.

VIDÉO TWILIO: Un outil puissant

Twilio propose une suite d'outils de communication via des API et des SDK simples. Leur vidéo programmable permet des expériences vidéo et audio multipartites HD dans les applications Web et mobiles. Twilio est un leader dans l'espace Webrtc, améliorant continuellement ses offres. Les améliorations futures incluent le partage d'écran mobile et l'amélioration des capacités multipartites.

Construire la salle de chat

Cette démo nécessite un compte Twilio (inscrivez-vous à un compte gratuit et sélectionnez "vidéo programmable"). Vous aurez besoin:

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).

Nous utiliserons également Firebase pour la gestion des utilisateurs. (Inscrivez-vous à un compte gratuit si nécessaire). Après la configuration, vous pouvez déployer cette démo sur un serveur.

La démo

Le code est disponible sur GitHub, et une démo en direct est hébergée chez Blacc Spot Media. N'oubliez pas que WeBrTC prend actuellement en charge Google Chrome, Mozilla Firefox et Opera sur Desktop. Vérifiez la compatibilité du navigateur à puis-je utiliser RTCPEERCConnection?

Pour le déploiement du serveur (Chrome 47 et nécessite plus tard SSL), utilisez Let's Encrypt pour un certificat SSL gratuit. Un tutoriel numérique océan peut aider à l'installation.

Code php (token.php)

Ce script PHP gère l'authentification Twilio et la génération de jetons.

// 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(),
));

Code html (index.html)

Ce HTML fournit la structure de base de l'interface de la salle de chat.

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

Code javascript (app.js)

Ce JavaScript gère la fonctionnalité de WebBrTC, l'interaction utilisateur et l'intégration de la base de feu. (Remarque: il s'agit d'une version considérablement raccourcie pour la concision. Le code complet est disponible sur github.)

// ... (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) ...

Le code JavaScript complet, y compris les fonctions omis, est disponible sur le référentiel GitHub lié dans l'article d'origine.

Conclusion

webrtc transforme la communication. Twilio et Firebase simplifient le développement d'applications de communication en temps réel. Commencez à construire vos propres solutions innovantes aujourd'hui! Pour plus de tutoriels et de ressources Webrtc, visitez Webbrtc.Tutorial (lorsqu'il est lancé).

(La section FAQ de l'entrée d'origine a été omise en raison de contraintes de longueur, mais elle peut être facilement réintégrée dans cette sortie révisée.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!