Construire une application de chat vidéo Webrtc avec Simplewebrtc

Créez une application de chat vidéo en direct basée sur Simplewebrtc

Ce livre "6 JavaScript Projects" contient cet article, visant à vous aider à comprendre le développement de JavaScript moderne. Avec la montée en puissance de WebBrTC et la capacité améliorée des navigateurs à gérer la communication point à point en temps réel, la création d'applications en temps réel est plus facile que jamais. Ce tutoriel explorera Simplewebrtc et comment il peut simplifier notre travail lors de la mise en œuvre de WebBrTC. Tout au long du processus, nous créerons une application de chat vidéo WebBrTC avec des capacités de messagerie.

Si vous avez besoin de connaissances de base sur la communication WebBrTC et entre pairs, il est recommandé de lire "Dawn of Webbrtc" et "A débutant de l'API GetUserMedia".

Points de base

• Simplewebrtc est une bibliothèque JavaScript qui simplifie l'implémentation de WebBrTC et facilite la création d'applications vidéo et audio en temps réel qui peuvent s'exécuter sur différents navigateurs sans écrire de code spécifique au navigateur.
• Ce didacticiel montre comment créer une application de chat vidéo à l'aide de SimpleWebrtc, qui implique la configuration d'une application de page unique sur un serveur express et nécessite Node.js et NPM pour la gestion de la dépendance.
• Les dépendances de clés incluent SimpleWeBRTC, SEMANTIS UI CSS pour les paramètres de style, jQuery pour les opérations DOM, le guidon pour les modèles et Express en tant que serveur Web.
• L'application prend en charge la création et l'adhésion aux salles de chat, l'envoi de messages et le traitement de plusieurs flux vidéo, démontrant la capacité de Simplewebrtc à gérer des scénarios de communication point à point complexes.
Les applications
• peuvent être facilement déployées à l'aide de l'outil now CLI de Zeit, permettant une configuration rapide et un partage public des applications.
• Ce didacticiel fournit un guide complet sur la façon de créer une application de communication en temps réel riche en fonctionnalités à l'aide de SimpleWeBRTC, mettant en évidence la facilité d'utilisation et la compatibilité entre les navigateurs de la bibliothèque.

Qu'est-ce que Simplewebrtc?

Il est important de comprendre les principaux outils que nous utiliserons avant de continuer. SimpleWebrtc est une bibliothèque JavaScript qui simplifie les données, les appels vidéo et audio point à point de WebBrTC.

Simplewebrtc agit comme un wrapper pour l'implémentation de Browser WeBrTC. Comme vous le savez peut-être déjà, les fournisseurs de navigateur ne sont pas entièrement d'accord avec une seule approche pour implémenter différentes fonctions, ce qui signifie que chaque navigateur a une implémentation WEBRTC différente. En tant que développeur, vous devez écrire différents code pour chaque navigateur que vous prévoyez de prendre en charge. Simplewebrt agit comme un emballage pour ce code. Son API exposée est facile à utiliser et à comprendre, ce qui en fait un excellent choix pour la mise en œuvre de l'arrot-navigateur WebBrTC.

Créer une application de chat vidéo WebBrTC

Il est temps de créer votre application pratique. Nous créerons une application à une seule page qui s'exécute sur le serveur express.

Veuillez noter que vous pouvez télécharger le code pour ce tutoriel à partir de notre référentiel GitHub. Pour l'exécuter ou le suivre à la maison, vous devez installer le nœud et le npm. Si vous n'êtes pas familier avec ceux-ci ou si vous avez besoin d'une aide à l'installation, veuillez consulter notre tutoriel précédent:

• Installez plusieurs versions de Node.js à l'aide de NVM
• Guide de démarrage de NPM - Node Package Manager

Vous avez également besoin d'un ordinateur ou d'un ordinateur portable avec une webcam. Sinon, vous avez besoin d'une webcam USB qui peut être connectée au haut du moniteur. Vous pouvez avoir besoin d'un ami ou d'un deuxième appareil pour tester la connexion distante.

dépendances

Nous utiliserons les dépendances suivantes pour construire notre projet:

• Simplewebrtc - Bibliothèque Webbrtc
• SEMANTIC UI CSS - Un élégant cadre CSS
• jQuery - Utilisé pour sélectionner les éléments et le traitement des événements sur la page.
• Moidbars - Une bibliothèque de modèles JavaScript que nous utiliserons pour générer du HTML pour les messages
• Express - NodeJS Server.

Paramètres du projet

Accédez à votre espace de travail et créez un dossier appelé simplewebrtc-messenger. Ouvrez le dossier dans VScode ou votre éditeur préféré et créez la structure de fichiers et de dossiers suivante:

<code>simplewebrtc-messenger
├── public
│   ├── images
│   │   └── image.png
│   ├── index.html
│   └── js
│       └── app.js
├── README.md
└── server.js</code>

ou, si vous préférez, vous pouvez faire de même via la ligne de commande:

<code>mkdir -p simplewebrtc-messenger/public/{images,js}
cd simplewebrtc-messenger
touch public/js/app.js public/index.html .gitignore README.md server.js</code>

ouvrir README.md et copier ce qui suit:

<code># Simple WebRTC Messenger

A tutorial on building a WebRTC video chat app using SimpleWebRTC.</code>

Si vous prévoyez d'utiliser un référentiel GIT, ajoutez node_modules au fichier .gitignore. Utilisez la commande suivante pour générer le fichier package.json:

<code>npm init -y</code>

Vous devriez obtenir la sortie suivante:

<code class="language-json">{
  "name": "simplewebrtc-messenger",
  "version": "1.0.0",
  "description": "A tutorial on building a WebRTC video chat app using SimpleWebRTC.",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}</code>

Installons nos dépendances maintenant:

<code>npm install express handlebars jquery semantic-ui-css simplewebrtc</code>

Pendant l'installation, copiez ce code à server.js:

<code class="language-javascript">const express = require('express');

const app = express();
const port = 3000;

// 设置公共文件夹为根目录
app.use(express.static('public'));

// 从客户端提供对node_modules文件夹的访问
app.use('/scripts', express.static(`${__dirname}/node_modules/`));

// 将所有流量重定向到index.html
app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`));

app.listen(port, () => {
  console.info('listening on %d', port);
});</code>

Le code du serveur est très standard. Il suffit de lire les commentaires pour voir ce qui se passe.

Ensuite, définissons le fichier public/index.html:

(Le code index.html doit être inséré ici, et en raison des limitations de l'espace, il est omis ici. Veuillez vous référer au texte d'origine pour obtenir le code complet)

Ensuite, configurons le code JavaScript client de base. Copiez ce code à public/js/app.js:

<code class="language-javascript">window.addEventListener('load', () => {
  // 将所有客户端代码放在这里
});</code>

Enfin, téléchargez cette image à partir de notre référentiel GitHub et enregistrez-le dans le dossier public/images.

Maintenant, nous pouvons exécuter notre application:

<code>npm start</code>

Ouvrez URL dans votre navigateur localhost:3000, et vous devriez voir ce qui suit:

(L'image doit être insérée ici, en raison des limitations de l'espace, omise ici. Veuillez vous référer au texte d'origine pour obtenir l'image)

(Le contenu suivant continue de traiter les segments de code de la même manière en fonction de la structure du texte d'origine. En raison des limites d'espace, tous les segments de code et images suivants sont omis ici. Veuillez vous référer au texte d'origine pour le code complet et images.)

Conclusion

Dans ce tutoriel, vous avez appris Simplewebrtc et comment l'utiliser pour créer une application en direct. Plus précisément, nous avons créé une application de messagerie qui permet aux utilisateurs d'envoyer du texte et de passer des appels vidéo aux pairs distants. Simplewebrtc est une excellente bibliothèque de navigateurs transouvroyantes qui peut facilement implémenter WebBrTC dans les applications Web.

N'oubliez pas que le code utilisé dans ce tutoriel est disponible sur GitHub. Clone, créez quelque chose de cool et amusez-vous!

(La partie FAQ est omise ici, en raison des limitations de l'espace, elle est omise ici. Veuillez vous référer au texte d'origine pour le contenu FAQ complet.)

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!