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 :

  
  
  
  
  

  
  

    
 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:

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:

  
  

    

      
      

        

          

             Nom d'utilisateur 
            
          
          

             Chambre 
            
          
        
        

        

          
 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:

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

  ---

  ---

  Poster un message
  

  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:

  

  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:

  

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

  

  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.

  

  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.

  

  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.