Fermer

avril 30, 2018

Création d'une application de chat vidéo WebRTC avec SimpleWebRTC –


Avec l'avènement de WebRTC et la capacité croissante des navigateurs à gérer les communications poste à poste en temps réel, il est plus facile que jamais de créer des applications en temps réel. Dans ce tutoriel, nous allons jeter un coup d'œil sur SimpleWebRTC et sur comment il peut nous faciliter la vie lors de la mise en œuvre de WebRTC. Tout au long de l'article, nous allons créer une application de chat vidéo WebRTC avec des fonctions de messagerie.

Si vous avez besoin d'un peu de contexte concernant la communication WebRTC et peer-to-peer, je vous recommande de lire The Dawn of WebRTC et Introduction à l'API getUserMedia .

Qu'est-ce que SimpleWebRTC

Avant de passer à autre chose, il est important que nous comprenions l'outil principal que nous utiliserons. SimpleWebRTC est une bibliothèque JavaScript qui simplifie les appels de données, vidéos et audio WebRTC entre pairs

SimpleWebRTC agit comme une enveloppe autour de l'implémentation WebRTC du navigateur. Comme vous le savez peut-être, les fournisseurs de navigateurs ne sont pas vraiment d'accord sur une seule façon de mettre en œuvre différentes fonctionnalités, ce qui signifie que pour chaque navigateur, il existe une implémentation différente pour WebRTC. En tant que développeur, vous devez écrire un code différent pour chaque navigateur que vous envisagez de prendre en charge. SimpleWebRT agit comme le wrapper pour ce code. L'API qu'il expose est facile à utiliser et à comprendre, ce qui en fait un excellent candidat pour l'implémentation du WebRTC par navigateur

Création de l'application de chat vidéo WebRTC

Il est maintenant temps de se salir en créant l'application . Nous allons créer une application d'une seule page qui s'exécute sur un serveur Express.

Veuillez noter que vous pouvez télécharger le code de ce tutoriel à partir de notre rapport GitHub . Pour l'exécuter, ou pour suivre à la maison, vous devez avoir installé Node et NPM. Si vous n'êtes pas familier avec ceux-ci, ou si vous voulez de l'aide pour les installer, consultez nos tutoriels précédents:

Vous avez également besoin d'un PC ou d'un ordinateur portable équipé d'une webcam. Sinon, vous devrez vous procurer une webcam USB que vous pouvez attacher sur le dessus de votre moniteur. Vous aurez probablement besoin d'un ami ou d'un second périphérique pour tester les connexions distantes.

Dépendances

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

  • SimpleWebRTC – la bibliothèque WebRTC
  • UI sémantique CSS – un élégant cadre CSS
  • jQuery – utilisé pour sélectionner des éléments sur la page et le traitement des événements
  • Handlebars – une bibliothèque de templates JavaScript, que nous utiliserons pour générer HTML pour les messages
  • Express – Serveur NodeJS

Configuration du projet

Accédez à votre espace de travail et créez un dossier simplewebrtc-messenger . Ouvrez le dossier dans VSCode ou votre éditeur favori et créez les fichiers et la structure de dossiers suivants:

 simplewebrtc-messenger
├── public
│ ├── images
│ │ └── image image.png
│ ├── index.html
│ └── js
│ └──app.js
RE── README.md
Server── server.js

Ou, si vous préférez, faites de même via la ligne de commande:

 mkdir -p simplewebrtc-messenger / public / {images, js}
cd simplewebrtc-messenger
appuyez sur public / js / app.js public / index.html .gitignore README.md server.js

Ouvrez README.md et copiez le contenu suivant:

 # Simple WebRTC Messenger

Un didacticiel sur la création d'une application de chat vidéo WebRTC à l'aide de SimpleWebRTC.

Ajoutez la ligne node_modules au fichier .gitignore si vous envisagez d'utiliser un référentiel git. Générez le fichier package.json à l'aide de la commande suivante:

 npm init -y

Vous devriez obtenir la sortie suivante:

 {
  "nom": "simplewebrtc-messenger",
  "version": "1.0.0",
  "description": "Didacticiel sur la création d'une application de chat vidéo WebRTC à l'aide de SimpleWebRTC.",
  "main": "server.js",
  "scripts": {
    "test": "echo " Erreur: aucun test spécifié  "&& exit 1",
    "start": "nœud server.js"
  },
  "mots-clés": [],
  "auteur": "",
  "licence": "ISC"
}

Maintenant installons nos dépendances:

 npm install guidons express jquery semantic-ui-css simplewebrtc

Au cours de l'installation, copiez ce code dans server.js :

 const express = require ('express');

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

// Définir le dossier public en tant que root
app.use (express.static ('public'));

// Fournit l'accès au dossier node_modules du côté client
app.use ('/ scripts', express.static (`$ {__ dirname} / node_modules /`));

// Redirige tout le trafic vers index.html
app.use ((req, res) => res.sendFile (`$ {__ dirname} / public / index.html`));

app.listen (port, () => {
  console.info ('écouter sur% d', port);
});

Le code du serveur est assez standard. Lisez simplement les commentaires pour comprendre ce qui se passe.

Ensuite, configurons notre fichier public public / index.html :




  
  
  
  
   SimpleWebRTC Demo 

  
  

    
 Simple WebRTC Messenger 

    

  


  
              

Ensuite, configurons notre code JavaScript de base côté client. Copiez ce code dans public / js / app.js :

 window.addEventListener ('load', () => {
  // Mettre tout le code côté client ici
});

Enfin, téléchargez cette image depuis notre dépôt GitHub et enregistrez-la dans le dossier public / images .

Maintenant, nous pouvons lancer notre application:

 npm start

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

Configuration du projet

Markup

On travaille maintenant sur public / index .html . Par souci de simplicité (surtout si vous êtes déjà familiarisé avec Handlebars), vous pouvez copier l'ensemble du code de balisage à partir de notre dépôt GitHub . Sinon, passons aux choses étape par étape. Tout d'abord, copiez ce code et placez-le après le

tag dans le conteneur ui div:



  
  

    

      
      

        

          

            
            
          

          

            
            
          

        

        

        

          
 Créer pièce 

          

          
 Rejoindre pièce 

        

      

      
      

    

  

  

  
  

    

       Local Caméra
    

    
    
  







 Caméras distantes 



  

    
  

  

    
  

  

    
  

  

    
  

Parcourez le code de balisage et lisez les commentaires pour comprendre à quoi sert chaque section. Consultez également la documentation Semantic UI si vous n'êtes pas familier avec la bibliothèque CSS. Rafraîchissez votre navigateur Vous devriez avoir la vue suivante:

Markup view

Nous utilisons une image vide comme espace réservé pour indiquer où l'emplacement de la caméra sera diffusé sur la page Web. Prenez note que cette application sera en mesure de prendre en charge plusieurs connexions à distance, à condition que votre bande passante Internet puisse le gérer.

Templates

Ajoutons maintenant les trois modèles de Handlebar qui rendront notre page interactive.

balisage juste après le conteneur ui div (bien que l'emplacement n'a pas vraiment d'importance). Commençons par le conteneur de chat, qui est simplement composé de:

  • ID pièce
  • conteneur de messages vides (à remplir plus tard via JavaScript)
  • entrée pour poster des messages. -> {{room}}

    Envoyer

      


    Ensuite, ajoutez le modèle suivant, qui sera utilisé pour afficher les messages de discussion de l'utilisateur:

    Enfin, ajoutez le modèle suivant, qui sera utilisé pour afficher les flux d'une caméra distante:

    Nous espérons que le code de balisage sera assez explicite, passons donc à l'écriture du code JavaScript côté client pour notre application

    Main App Script

    Ouvre le fichier public / js / app. js et ajouter ce code:

     // Plate-forme de discussion
const chatTemplate = Handlebars.compile ($ ('# chat-template') .html ());
const chatContentTemplate = Handlebars.compile ($ ('# chat-contenu-template'). html ());
const chatEl = $ ('# chat');
const formEl = $ ('.form');
messages const = [];
laissez le nom d'utilisateur;

// Vidéo locale
const localImageEl = $ ('# local-image');
const localVideoEl = $ ('# local-video');

// Vidéos à distance
const remoteVideoTemplate = Handlebars.compile ($ ('# remote-video-template') .html ());
const remoteVideosEl = $ ('# remote-videos');
laissez remoteVideosCount = 0;

// Ajouter des règles de validation pour créer / joindre un formulaire de chambre
formEl.form ({
  des champs: {
    roomName: 'vide',
    nom d'utilisateur: 'vide',
  },
});

    Ici, nous initialisons plusieurs éléments que nous avons l'intention de manipuler. Nous avons également ajouté des règles de validation au formulaire afin qu'un utilisateur ne puisse laisser aucun champ vide.

    Ensuite, initialisons notre code WebRTC:

     // crée notre connexion WebRTC
const webrtc = nouveau SimpleWebRTC ({
  // l'élément id / element dom qui contiendra "notre" vidéo
  localVideoEl: 'local-video',
  // l'élément id / element dom qui contiendra les vidéos distantes
  remoteVideosEl: 'vidéos à distance',
  // demande immédiatement l'accès à la caméra
  autoRequestMedia: true,
});

// Nous avons accès à une caméra locale
webrtc.on ('localStream', () => {
  localImageEl.hide ();
  localVideoEl.show ();
});

    Maintenant vous savez pourquoi ça s'appelle SimpleWebRTC. C'est tout ce que nous devons faire pour initialiser notre code WebRTC. Remarqué, nous n'avons même pas spécifié de serveurs ICE ou de serveurs STUN. Cela fonctionne juste. Cependant, vous pouvez utiliser d'autres services TURN tels que Xirsys . Vous devrez configurer un serveur SignalMaster local pour gérer la signalisation WebRTC.

    Procédons à un rafraîchissement rapide de la page Web pour confirmer que le nouveau code fonctionne:

    Appareil photo local

    La page devrait demander l'accès à votre caméra et à votre microphone. Il suffit de cliquer sur Accepter et vous devriez avoir la vue ci-dessus

    Script de conversation

    Maintenant, rendons le formulaire fonctionnel. Nous devons écrire une logique pour créer et rejoindre une pièce. En outre, nous devons écrire une logique supplémentaire pour afficher la salle de discussion. Nous allons utiliser le chat-room-template pour cela. Commençons par attacher les gestionnaires de clic aux boutons du formulaire:

     $ ('. Submit'). On ('click', (event) => {
  if (! formEl.form ('est valide')) {
    return false;
  }
  nom d'utilisateur = $ ('# nom d'utilisateur'). val ();
  const roomName = $ ('# roomName'). val (). toLowerCase ();
  if (event.target.id === 'create-btn') {
    createRoom (roomName);
  } autre {
    joinRoom (roomName);
  }
  return false;
});

    Ensuite, nous devons déclarer les fonctions createRoom et joinRoom . Placez le code suivant avant le code du gestionnaire de clics:

     // Enregistrer un nouveau salon de discussion
const createRoom = (nom_de_chambre) => {
  console.info (`Créer une nouvelle pièce: $ {roomName}`);
  webrtc.createRoom (roomName, (err, name) => {
    showChatRoom (nom);
    postMessage ("$ {username} créé chatroom`);
  });
}

// Rejoindre un salon de discussion existant
const joinRoom = (nom de la pièce) => {
  console.log (`Joining Room: $ {roomName}`);
  webrtc.joinRoom (roomName);
  showChatRoom (roomName);
  postMessage (`$ {username} a été ajouté à chatroom`);
}

    Créer ou rejoindre une pièce est très simple: il suffit d'utiliser les méthodes createRoom et joinRoom de SimpleWebRTC .

    Vous avez peut-être aussi remarqué que nous avons showChatroom et postMessage fonctions que nous n'avons pas encore définies. Faisons-le maintenant en insérant le code suivant avant le code appelant:

     // Publier un message local
const postMessage = (message) => {
  const chatMessage = {
    Nom d'utilisateur,
    message,
    postedOn: new Date (). toLocaleString ('en-GB'),
  }
  // Envoyer à tous les pairs
  webrtc.sendToAll ('chat', chatMessage);
  // Mettre à jour les messages localement
  messages.push (chatMessage);
  $ ('# post-message'). val ('');
  updateChatMessages ();
}

// Afficher l'interface de chat
const showChatRoom = (pièce) => {
  // Masquer le formulaire
  formEl.hide ();
  const html = chatTemplate ({room});
  chatEl.html (html);
  const postForm = $ ('formulaire');
  // Post-Validation des règles de validation
  postForm.form ({
    message: 'vide',
  });
  $ ('# post-btn'). on ('clic', () => {
    const message = $ ('# post-message'). val ();
    postMessage (message);
  });
  $ ('# post-message'). on ('keyup', (événement) => {
    if (event.keyCode === 13) {
      const message = $ ('# post-message'). val ();
      postMessage (message);
    }
  });
}

    Prenez le temps de parcourir le code pour comprendre la logique. Vous rencontrerez bientôt une autre fonction que nous n'avons pas déclarée, updateChatMessages . Ajoutons-le maintenant:

     // Mettre à jour les messages de chat
const updateChatMessages = () => {
  const html = chatContentTemplate ({messages});
  const chatContentEl = $ ('# chat-content');
  chatContentEl.html (html);
  // défile automatiquement vers le bas
  const scrollHeight = chatContentEl.prop ('scrollHeight');
  chatContentEl.animate ({scrollTop: scrollHeight}, 'lent');
}

    Le but de cette fonction est simplement de mettre à jour l'interface de chat avec de nouveaux messages. Nous avons besoin d'une fonction supplémentaire qui accepte les messages des utilisateurs distants. Ajoutez la fonction suivante à app.js :

     // Recevoir un message de l'utilisateur distant
webrtc.connection.on ('message', (données) => {
  if (data.type === 'chat') {
    message const = data.payload;
    messages.push (message);
    updateChatMessages ();
  }
});

    C'est toute la logique dont nous avons besoin pour faire fonctionner le salon de discussion. Actualiser la page et identification:

    Login de la chambre

    Afficher le bouton Créer une pièce . Vous serez amené à cette vue. Postez des messages pour confirmer que le salon de discussion fonctionne

    Salon de discussion

    Une fois que vous avez confirmé que cela fonctionne, passez à la tâche suivante.

    Remote Video Camera

    mentionné précédemment, SimpleWebRTC prend en charge plusieurs homologues. Voici le code pour ajouter des flux vidéo distants lorsqu'un nouvel utilisateur rejoint une salle:

     // Ajout de la vidéo à distance
webrtc.on ('videoAdded', (vidéo, pair) => {
  const id = webrtc.getDomId (pair);
  const html = remoteVideoTemplate ({id});
  if (remoteVideosCount === 0) {
    remoteVideosEl.html (html);
  } autre {
    remoteVideosEl.append (html);
  }
  $ (`# $ {id}`) .html (vidéo);
  $ (`# $ {id} video`) .addClass ('média image ui'); // Rendre l'élément vidéo réactif
  remoteVideosCount + = 1;
});

    C'est tout. Je suis désolé si vous attendiez quelque chose de plus compliqué. Ce que nous avons fait est simplement d'ajouter un écouteur d'événement pour videoAdded dont le rappel reçoit un élément vidéo qui peut être directement ajouté au DOM. Il reçoit également un objet pair qui contient des informations utiles sur notre connexion homologue, mais dans ce cas, nous ne sommes intéressés que par l'identifiant de l'élément DOM.

    Malheureusement, tester ce peu de code n'est pas possible sans l'exécuter sur un serveur HTTPS. En théorie, vous pouvez générer un certificat auto-signé pour votre serveur Express afin d'exécuter l'application sur votre réseau interne. Mais les mauvaises nouvelles sont que les navigateurs ne vous permettront pas d'accéder à la webcam si le certificat ne provient pas d'une autorité de confiance.

    La solution la plus simple pour tester le code ci-dessus est de le déployer sur un serveur public supportant le HTTPS

    Deployment

    Cette méthode que nous sommes sur le point d'effectuer est l'une des méthodes les plus simples pour déployer une application NodeJS. Tout ce que nous avons à faire est d'abord créer un compte avec now.sh .

    Il suffit de choisir le plan libre. Vous devrez fournir votre adresse e-mail. Vous devrez également vérifier votre adresse e-mail pour activer votre compte. Ensuite, installez maintenant outil CLI sur votre système:

     npm install -g maintenant

    Une fois l'installation terminée, vous pouvez déployer l'application. Il suffit d'exécuter la commande suivante à la racine de votre dossier de projet:

     now --public

    Si vous exécutez la commande pour la première fois, il vous sera demandé d'entrer votre adresse e-mail. Vous recevrez ensuite un e-mail dont vous aurez besoin pour vérifier votre identifiant. Une fois la vérification effectuée, vous devrez exécuter à nouveau la commande --public . Après quelques secondes, votre application sera opérationnelle et fonctionnera à une URL spécifiée qui sera imprimée sur le terminal.

    Si vous utilisez le terminal VSCode intégré, appuyez simplement sur ALT et cliquez sur ouvrez l'URL dans votre navigateur.

    Déployer autoriser la caméra

    Vous devez permettre à la page d'accéder à votre caméra et à votre microphone. Ensuite, créez une pièce comme avant. Une fois que vous êtes connecté, vous devez accéder à un autre appareil, tel qu'un autre ordinateur portable ou un smartphone équipé d'une caméra frontale. Vous pouvez également demander à un ami avec une connexion Internet pour vous aider avec cela. Accédez simplement à la même URL et entrez un nouveau nom d'utilisateur et le même nom de chambre. L'utilisateur distant devra appuyer sur le bouton Join Room . En quelques secondes, les deux appareils doivent être connectés à la salle de discussion. Si un appareil n'a pas de caméra, c'est bon, car la fonctionnalité de chat fonctionnera toujours.

    Caméra distante

    Conclusion

    Dans ce tutoriel, vous avez appris à propos de SimpleWebRTC et comment vous pouvez Utilisez-le pour créer des applications en temps réel. Plus précisément, nous avons créé une application de messagerie qui permet à l'utilisateur d'envoyer du texte et de passer un appel vidéo à un homologue distant. SimpleWebRTC est une très bonne bibliothèque multi-navigateurs pour implémenter sans problème WebRTC dans les applications web.

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


    J'écris du code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui apportent des gains d'efficacité et une productivité accrue à mon flux de travail.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link