Fermer

juin 28, 2018

Créer un service de conversation vidéo avec JavaScript, WebRTC et Okta –


Cet article a été publié à l'origine le Okta Developer Blog . Merci de soutenir les partenaires qui rendent SitePoint possible.

Il y a à peine sept ans, la création d'applications vidéo sur le Web a été extrêmement pénible. Vous souvenez-vous des jours d'utilisation de codecs Flash et propriétaires ( qui nécessitaient souvent une licence )? Yuck. Au cours des dernières années, la technologie de chat vidéo s'est considérablement améliorée et Flash n'est plus nécessaire.

Aujourd'hui, le paysage du chat vidéo est beaucoup plus simple grâce à WebRTC : un projet open source construit et maintenu par Google , Mozilla, Opera et autres. WebRTC vous permet de créer facilement des logiciels de communication en temps réel dans votre navigateur et est en cours de normalisation aux niveaux W3C et IETF. En utilisant WebRTC, vous pouvez créer des applications de chat vidéo en temps réel dans le navigateur qui fonctionne bien !

Aujourd'hui, j'ai pensé que ce serait amusant de vous guider dans le processus d'utilisation de WebRTC et de Okta pour créer un simple service de chat vidéo permettant aux utilisateurs de créer un salon de discussion et de partager Connectez-vous à n'importe qui, qui peut alors rejoindre la salle et discuter avec eux en temps réel.

L'application que vous construisez aujourd'hui utilisera Okta (un service d'authentification gratuit) pour gérer les utilisateurs connexion et contrôle d'accès et WebRTC pour alimenter toutes les fonctionnalités vidéo. Vous utiliserez également du JavaScript pur pour créer l'application Web.

Au moment où vous avez parcouru ce guide, vous comprendrez mieux comment l'authentification Web et le chat vidéo en temps réel fonctionnent

Commençons.

NOTE : Vous voulez jouer avec l'application de chat en temps réel? Vous pouvez le faire ici . Vous pouvez également afficher le code source de l'application que nous allons créer sur GitHub .

Créer la page Web

La première chose à faire est de créer une page web HTML simple pour le

Lors de la construction d'applications web, j'aime commencer par créer mon balisage et CSS, puis revenir en arrière et ajouter une logique d'application

Créer un nouveau dossier quelque part sur votre ordinateur appelé chatapp puis créez un fichier index.html avec le contenu suivant:



  
     vchat - une simple application de chat vidéo 
    
    
  
  
    

vchat

une simple application de chat vidéo

NOTE : Vous n'êtes pas connecté. Si vous souhaitez créer votre propre compte             salon de chat s'il vous plaît

Cette page simple utilise la dernière version de Bootstrap ainsi que la police Raleway ( mon préféré ) – mais pas grand-chose.

Les éléments clés présents dans cette page HTML minimaliste sont:

  • Un okta-login-container div, qui contiendra finalement notre formulaire de connexion
  • un identifiant de connexion et un espace réservé pour l'URL de la salle qui notifiera à l'utilisateur s'il doit se connecter, et dans quelle salle de conversation il se trouve
  • Un div qui contiendra éventuellement tous les flux vidéo des différents participants

la page suivante dans votre navigateur, vous remarquerez que cela semble plutôt mauvais. Mais ne vous inquiétez pas, vous le ferez paraître assez tôt! 😉

 vchat capture d'écran sans style

Ensuite, vous aurez envie de créer un dossier appelé static qui contient un autre dossier nommé css . Ensuite, vous devrez copier le CSS suivant dans un nouveau fichier style.css dans ce dossier:

 body {
  famille de polices: 'Raleway', sans-serif;
}

bas de page {
  text-align: centre;
  marge supérieure: 2em;
}

h2 {
  style de police: italique;
}

entête {
  text-align: centre;
  marge: 4em;
}

en-tête h1, en-tête h2 {
  affichage: en ligne;
}

header h1 a, en-tête h2 a, en-tête h1 a: hover, en-tête h2 a: hover {
  couleur: hériter;
  text-decoration: aucun;
}

header h2 {
  taille de police: 24px;
  rembourrage-gauche: .5em;
}

#remotes {
  visibilité: cachée;
}

#url {
  text-align: centre;
  affichage: aucun;
}

#s'identifier {
  affichage: aucun;
}

#roomIntro {
  font-weight: gras;
}

.videoContainer {
  objet-fit: couverture;
  marge: 0 auto;
  rembourrage: 0;
}

Vidéo .videoContainer {
  largeur: 100%;
  hauteur: 100%;
  border-radius: 10px;
  bordure: 5px double # f2f2f2;
}

.le volume {
  position: absolue;
  gauche: 15%;
  largeur: 70%;
  bas: 20px;
  hauteur: 10px;
  affichage: aucun;
}

.connectionstate {
  position: absolue;
  haut: 10px;
  largeur: 100%;
  text-align: centre;
  couleur: #fff
}

.col-md-6 {
  marge-bas: 1em;
}

Je n'entrerai pas dans le détail en expliquant chaque règle CSS ( car je ne veux pas vous ennuyer à mort ), mais si vous ajoutez votre feuille de style nouvellement créée dans votre index.html page, vous remarquerez que l'application web a l'air bien plus belle:


   vchat - une simple application de chat vidéo 
  
  
  

 vchat capture d'écran avec style

Set Up Okta

Maintenant que vous avez une simple page web avec un style, configurons le composant de connexion utilisateur en utilisant Okta. Si vous n'avez pas encore de compte développeur Okta, allez en créer un maintenant puis revenez (cela ne devrait prendre qu'une seconde).

Une fois que vous avez votre compte Okta et que vous êtes connecté Dans le tableau de bord Okta, vous devez créer une nouvelle application Okta (c'est ainsi que Okta sait quel type d'application vous construisez et quel type d'authentification autoriser).

Pour ce faire, naviguez jusqu'à la ] Applications onglet de votre tableau de bord et cliquez sur le bouton Ajouter une application . Une fois là, cliquez sur l'icône Single-Page App (parce que vous construisez un SPA) puis cliquez sur Suivant .

 Okta create app

Once vous avez atteint la page Créer une nouvelle application et remplissez le formulaire Paramètres de l'application avec les informations suivantes:

 Paramètres de l'application Okta

Une fois terminé cliquez sur Terminé . Votre application Okta est maintenant presque prête à l'emploi

La prochaine chose que vous devrez faire est d'ajouter votre ordinateur local en tant que Trusted Origin – les origines de confiance sont des URL autorisées à interagir avec Okta à partir d'un environnement JavaScript pur; Pour cela, cliquez sur l'onglet API suivi de l'onglet Trusted Origins de votre tableau de bord Okta. Pour créer votre nouvelle origine, cliquez sur le bouton Ajouter une origine :

 Créez une origine de confiance

Une fois que vous avez atteint l'écran Ajouter l'origine , entrez les informations suivantes qui indiquent à Okta de vous autoriser à utiliser le service d'authentification Okta depuis votre environnement de test local:

 Ok, créez l'origine de confiance

Enfin, maintenant que vous avez configuré votre application Okta et toutes les règles de sécurité nécessaires, vous devriez aller créer des comptes d'utilisateur dans Okta que vous pouvez vous connecter avec plus tard. Vous pouvez le faire en cliquant sur l'onglet Users suivi du bouton Add Person :

 Okta create user

Utilisez Okta pour gérer l'authentification de l'utilisateur

Maintenant que vous avez configuré Okta, vous devez brancher Okta dans votre application Web pour que les utilisateurs puissent se connecter à votre application de chat vidéo.

Bien qu'il existe de nombreuses façons d'intégrer Okta, pour une application d'une seule page comme la celui que vous construisez aujourd'hui, vous voudrez utiliser le Widget de connexion Okta .

Le Widget de connexion Okta est une bibliothèque JS pure que vous pouvez déposer dans n'importe quelle page Web qui gère l'authentification des utilisateurs

Avant d'ajouter le code JS du widget (ci-dessous), vous pouvez visiter votre tableau de bord Okta et récupérer la valeur Org URL dans la partie supérieure droite de la page.

 Tableau de bord Okta

Vous aurez également besoin de voir l'Application que vous avez créée précédemment pour récupérer le ID client v alue. Ces deux valeurs (l'ID du client et l'URL de l'organisation) seront utilisées ci-dessous.

 Okta app credentials

Maintenant que vous avez les informations d'identification nécessaires, commençons à brancher le widget dans votre application web. Ouvrez le fichier index.html sur lequel vous travailliez précédemment et importez les dépendances du widget de connexion Okta ainsi que l'initialisation du widget au bas de la page dans une balise de script. Assurez-vous de remplacer {{OKTA_ORG_URL}} et {{CLIENT_ID}} par les valeurs appropriées pour votre application.



                       
   vchat - une application de chat vidéo simple 
  
                                                
                                                    
         




  

Le code ci-dessus initialise le widget Okta, gère l'authentification de l'utilisateur et enregistre certains messages dans la console du développeur pour vous aider à comprendre ce qui se passe

L'objet okta créé ci-dessus contrôle la fonctionnalité du widget : en créant une nouvelle instance de la classe OktaSignIn et en lui donnant des détails spécifiques à votre application, vous dites essentiellement à Okta où se trouve votre serveur OpenID Connect et comment l'utiliser (Okta utilise le OpenID Connectez le protocole en coulisses pour alimenter ce widget de connexion.)

La fonction handleLogin que vous voyez ci-dessus est ce qui contrôle la gestion de session dans votre application. Si un utilisateur vient de se connecter (dans le cadre du flux OIDC), les jetons d'accès et d'identification de l'utilisateur seront stockés dans le stockage local HTML afin que votre application puisse se souvenir de l'identité de l'utilisateur. Si l'utilisateur était déjà connecté mais qu'il visualise la page, un message sera renvoyé à la console. Et si l'utilisateur n'est pas connecté du tout, alors le formulaire de connexion sera rendu (via la fonction showLogin ).

Maintenant que vous avez le widget connecté à votre application, si vous voir votre application dans un navigateur, vous serez en mesure de voir le Widget Okta Sign-In en action: il va afficher un joli formulaire de connexion. Si vous entrez vos informations de connexion Okta, vous remarquerez que le message console.log approprié va se déclencher: soit vous n'êtes pas connecté, vous venez de vous connecter, ou vous étiez déjà connecté. [19659003]  vchat test Okta login

Configurer la gestion d'état

La prochaine chose à faire est de configurer la gestion d'état pour l'application. Mais avant de nous plonger là-dedans, parlons de la façon dont l'application va fonctionner.

L'application de chat vidéo que vous construisez donnera à chaque utilisateur enregistré sa propre salle de chat dédiée, utilisable à tout moment et pouvant être utilisée. partagé avec toute personne externe. Lorsqu'une autre personne rejoint l'une de ces salles de discussion dédiées, elle est immédiatement mise en session de chat vidéo sans avoir besoin d'un compte sur le site.

Pour que cette fonctionnalité fonctionne de manière simple, vous allez structurer l'application de sorte que chaque utilisateur enregistré aura une salle de discussion dédiée dont l'URL est {{YOUR_SITE_URL}}? room = {{email}} . De cette façon, si mon adresse e-mail est r@rdegges.com j'aurai une salle de discussion dédiée que mes amis pourront rejoindre c'est {{YOUR_SITE_URL}}?room=r@rdegges.com – facile à mémoriser et à partager

Si un utilisateur est sur une page avec la chaîne de caractères vous saurez qu'il essaie de rejoindre une salle de discussion vidéo spécifique utilisez cette valeur de chaîne de requête pour les mettre dans la bonne pièce. Si l'utilisateur consulte la page d'accueil du site (sans aucune chaîne de requête), vous saurez qu'il essaie probablement de se connecter à l'application et que vous devriez lui montrer le formulaire de connexion.

C'est la logique de base vous allez mettre en œuvre ci-dessous. Nous allons construire sur ce à mesure que ce guide progresse, en ajoutant de plus en plus de fonctionnalités jusqu'à ce que le service de chat vidéo est entièrement construit.

Pour commencer, créez une fonction hasQueryString qui sera utile pour déterminer si ou pas l'utilisateur est sur la page d'accueil de l'application ou dans une salle de conversation spécifique:

 // Détermine si nous avons ou non une chaîne de requête.
Fonction hasQueryString () {
  return location.href.indexOf ("?")! == -1;
}

Ensuite, définissez deux fonctions auxiliaires: getRoom et getRoomURL qui déterminera le nom de la salle de conversation (à partir de la chaîne de requête) ainsi que l'URL complète de la salle. Ceux-ci seront utiles plus tard lors de l'écriture du code de chat vidéo:

 // Détermine le nom de la salle et l'URL publique de cette session de discussion.
function getRoom () {
  var query = location.search && location.search.split ("?") [1];

  if (requête) {
    return (location.search && decodeURIComponent (query.split ("=") [1]));
  }

  renvoie okta.tokenManager.get ("idToken"). claims.email;
}

// Récupère l'URL absolue de la pièce.
function getRoomURL () {
  return location.protocol + "//" + location.host + (emplacement.path || "") + "? room =" + getRoom ();
}

Maintenant que vous avez des fonctions d'aide utiles, vous devez modifier la fonction handleLogin d'avant à:

  • Rediriger les utilisateurs connectés vers leur salle de conversation dédiée ( { {YOUR_SITE_URL}}? Room = {{email}}
  • Avertissez les utilisateurs qui ne sont pas connectés (mais qui sont dans une salle de chat vidéo) qu'ils peuvent se connecter s'ils le souhaitent
 // Handle la connexion de l'utilisateur et ce qui se passe ensuite.
function handleLogin () {
  // Si l'utilisateur se connecte pour la première fois ...
  if (okta.token.hasTokensInUrl ()) {
    okta.token.parseTokensFromUrl (
      succès de la fonction (res) {
        // Sauvegarde des jetons pour une utilisation ultérieure, par ex. si la page est rafraîchie:
        okta.tokenManager.add ("accessToken", res [0]);
        okta.tokenManager.add ("idToken", res [1]);

        // Rediriger vers l'URL de la salle dédiée de cet utilisateur.
        window.location = getRoomURL ();
      }, erreur de fonction (err) {
        alert ("Nous n'avons pas pu vous connecter, quelque chose d'horrible a dû se produire. Veuillez rafraîchir la page.");
      }
    )
  } autre {
    okta.session.get (function (res) {

      // Si l'utilisateur est connecté ...
      if (res.status === "ACTIF") {

        // Si l'utilisateur est connecté sur la page d'accueil, redirigez-le vers sa page d'accueil.
        if (! hasQueryString ()) {
          window.location = getRoomURL ();
        }

        revenir;
      }

      // Si nous arrivons ici, l'utilisateur n'est pas connecté.

      // S'il y a une chaîne de requête dans l'URL, cela signifie que cette personne est dans un
      // "room" donc nous devrions afficher notre avis de connexion passive. Autrement,
      // nous les inviterons à se connecter immédiatement.
      if (hasQueryString ()) {
        document.getElementById ("login"). style.display = "bloquer";
      } autre {
        showLogin ();
      }
    });
  }
}

En utilisant les fonctions d'aide simples pour gérer les redirections, vous pouvez presque accomplir tout ce dont vous avez besoin en termes de gestion d'état.

Mais, il reste une petite chose à faire: vous avez besoin pour vous assurer que le bouton login redirige les utilisateurs vers la page d'accueil de l'application afin qu'ils puissent voir le formulaire de connexion. Pour ce faire, il suffit de définir un gestionnaire onclick sur l'élément de la page:

NOTE : Vous n'êtes pas connecté. Si vous souhaitez démarrez votre propre salle de chat s'il vous plaît

Et avec ce dernier changement, la gestion de l'état de l'application est maintenant terminée!

 vchat state management

Il est temps de passer à l'amusement: la vidéo en temps réel avec WebRTC. Utilisez WebRTC pour activer la conversation vidéo en temps réel

Pour utiliser le chat vidéo en temps réel dans cette application, nous utiliserons la fantastique bibliothèque SimpleWebRTC . Cette bibliothèque fournit d'excellentes API qui enveloppent les API WebRTC sous-jacentes, ce qui les rend beaucoup plus simples à utiliser.

Pour commencer avec SimpleWebRTC, vous devez d'abord inclure la bibliothèque d'adaptateurs requise dans la section du web app:


   vchat - une application de chat vidéo simple 
  
  
     
  
     

Ensuite, vous devrez modifier le div videoContainer que vous avez créé précédemment et qui contiendra votre vidéo afin de faire deux choses:

  1. Assurez-vous que le clic droit sur la vidéo en direct est désactivé (sinon l'utilisateur obtiendra un menu inutile), et
  2. Ajout de quelques bons numéros de volume par défaut afin que la barre de volume de l'affichage vidéo fonctionne correctement

Pour ce faire, il vous suffit de remplacer le ] videoContainer div avec ce code HTML mis à jour:

  
     

L'attribut oncontextmenu indique simplement au navigateur de ne rien faire lorsque l'élément vidéo est cliqué avec le bouton droit de la souris. Les attributs supplémentaires min max haut et bas sur le compteur de volume sont les valeurs par défaut recommandées par SimpleWebRTC, c'est ce que

Ensuite, vous devez définir une fonction loadSimpleWebRTC () qui va:

  • Inviter l'utilisateur à autoriser l'accès caméra / micro à la page Web
  • Rendre un flux vidéo sur l'écran
  • Rejoindre automatiquement la salle de conversation appropriée en fonction de l'URL visitée par l'utilisateur
  • Gérer les erreurs qui surviennent (flux vidéo interrompu lorsque quelqu'un se déconnecte, etc.)

Pour ce faire, vous besoin de définir la fonction dans votre code JS:

 // Charger dynamiquement le script simplewebrtc afin que nous puissions
// kickstart l'appel vidéo.
function loadSimpleWebRTC () {
  var script = document.createElement ("script");
  script.src = "https://simplewebrtc.com/latest-v3.js";
  document.head.appendChild (script);

  script.onload = function () {
    var webrtc = nouveau SimpleWebRTC ({
      localVideoEl: "selfVideo",
      // l'élément id / element dom qui contiendra les vidéos distantes
      remoteVideosEl: "",
      autoRequestMedia: true,
      debug: false,
      detectSpeakingEvents: true,
      autoAdjustMic: false
    });

    // Définit l'URL de la salle disponible au public.
    document.getElementById ("roomUrl"). innerText = getRoomURL ();

    // Rejoindre immédiatement la pièce lorsqu'elle est chargée.
    webrtc.on ("readyToCall", function () {
      webrtc.joinRoom (getRoom ());
    });

    function showVolume (el, volume) {
      if (! el) retourne;
      if (volume < -45) volume = -45; // -45 to -20 is
      if (volume > -20) volume = -20; // une bonne gamme
      el.value = volume;
    }

    // Affiche le compteur de volume.
    webrtc.on ("localStream", fonction (flux) {
      var button = document.querySelector ("bouton formulaire>");
      if (button) button.removeAttribute ("désactivé");
      document.getElementById ("localVolume"). style.display = "bloquer";
    });

    // Si nous n'avons pas accès à la caméra, déclenchez une erreur.
    webrtc.on ("localMediaError", fonction (err) {
      alert ("Ce service ne fonctionne que si vous autorisez l'accès à la caméra. Veuillez autoriser l'accès et actualiser la page.");
    });

    // Quand une autre personne rejoint la salle de discussion, nous affichons sa vidéo.
    webrtc.on ("videoAdded", fonction (vidéo, pair) {
      console.log ("utilisateur ajouté au chat", pair);
      var télécommandes = document.getElementById ("télécommandes");

      if (télécommandes) {
        var outerContainer = document.createElement ("div");
        outerContainer.className = "col-md-6";

        var container = document.createElement ("div");
        container.className = "videoContainer";
        container.id = "container_" + webrtc.getDomId (pair);
        container.appendChild (vidéo);

        // Supprime les clics droits sur la vidéo.
        video.oncontextmenu = function () {return false; }

        // Afficher le compteur de volume.
        var vol = document.createElement ("mètre");
        vol.id = "volume_" + peer.id;
        vol.className = "volume";
        vol.min = -45;
        vol.max = -20;
        vol.low = -40;
        vol.high = -25;
        container.appendChild (vol);

        // Afficher l'état de la connexion.
        if (pair && pair.pc) {
          var connstate = document.createElement ("div");
          connstate.className = "connectionstate";
          container.appendChild (connstate);

          peer.pc.on ("iceConnectionStateChange", function (event) {
            switch (peer.pc.iceConnectionState) {
              cas "vérification":
                connstate.innerText = "se connecter à un pair ...";
                Pause;
              cas "connecté":
              case "completed": // sur le côté appelant
                vol.style.display = "bloquer";
                connstate.innerText = "connexion établie";
                Pause;
              cas "déconnecté":
                connstate.innerText = "déconnecté";
                Pause;
              le cas "a échoué":
                connstate.innerText = "la connexion a échoué";
                Pause;
              affaire classée":
                connstate.innerText = "connexion fermée";
                Pause;
            }
          });
        }

        outerContainer.appendChild (conteneur);
        remotes.appendChild (outerContainer);

        // Si nous ajoutons une nouvelle vidéo, nous devons modifier bootstrap pour que nous
        // n'obtient que deux vidéos par ligne.
        var remoteVideos = document.getElementById ("distantes"). getElementsByTagName ("video"). longueur;

        if (! (remoteVideos% 2)) {
          var spacer = document.createElement ("div");
          spacer.className = "w-100";
          remotes.appendChild (spacer);
        }
      }
    });

    // Si un utilisateur se déconnecte du chat, nous devons supprimer son flux vidéo.
    webrtc.on ("videoRemoved", function (video, peer) {
      console.log ("utilisateur supprimé du chat", pair);
      var télécommandes = document.getElementById ("télécommandes");
      var el = document.getElementById ("conteneur_" + webrtc.getDomId (pair));
      if (télécommandes && el) {
        remotes.removeChild (el.parentElement);
      }
    });

    // Si le volume a changé, mettez à jour le compteur.
    webrtc.on ("volumeChange", function (volume, seuil) {
      showVolume (document.getElementById ("localVolume"), volume);
    });

    // Si le volume d'un utilisateur distant a changé, mettez à jour le compteur.
    webrtc.on ("remoteVolumeChange", fonction (pair, volume) {
      showVolume (document.getElementById ("volume_" + peer.id), volume);
    });

    // S'il y a une erreur P2P, nous devons faire une erreur.
    webrtc.on ("iceFailed", function (pair) {
      var connstate = document.querySelector ("# container_" + webrtc.getDomId (pair) + ".connectionstate");
      console.log ("échec local", connstate);
      if (connstate) {
        connstate.innerText = "la connexion a échoué";
        fileinput.disabled = "désactivé";
      }
    });

    // échec p2p / glace à distance
    webrtc.on ("connectivityError", function (pair) {
      var connstate = document.querySelector ("# container_" + webrtc.getDomId (pair) + ".connectionstate");
      console.log ("échec distant", connstate);
      if (connstate) {
        connstate.innerText = "la connexion a échoué";
        fileinput.disabled = "désactivé";
      }
    });
  }
}

Bien que ce soit beaucoup de code à prendre, tout n'est pas complexe.

La première chose que nous faisons dans la fonction ci-dessus est de charger dynamiquement la bibliothèque SimpleWebRTC (c'est ce qui incitera l'utilisateur à accéder au micro / caméra dans le navigateur et gérer la logique de connexion vidéo):

 var script = document.createElement ("script");
script.src = "https://simplewebrtc.com/latest-v3.js";
document.head.appendChild (script);

Le code de code suivant s'exécute une fois que la bibliothèque SimpleWebRTC est entièrement chargée et place automatiquement l'utilisateur dans la salle de conversation correcte en fonction de l'URL de la page que l'utilisateur visite.

Par exemple, si l'utilisateur tente de voir le ? room = test salon de discussion, ils seront déposés dans le salon de discussion nommé test . En manipulant simplement cette logique via les paramètres de chaîne querys, nous pouvons éviter d'utiliser une logique côté serveur.

Voici l'extrait de code qui gère la jointure de pièce:

 script.onload = function () {
  var webrtc = nouveau SimpleWebRTC ({
    localVideoEl: "selfVideo",
    // l'élément id / element dom qui contiendra les vidéos distantes
    remoteVideosEl: "",
    autoRequestMedia: true,
    debug: false,
    detectSpeakingEvents: true,
    autoAdjustMic: false
  });

  // Définit l'URL de la salle disponible au public.
  document.getElementById ("roomUrl"). innerText = getRoomURL ();

  // Rejoindre immédiatement la pièce lorsqu'elle est chargée.
  webrtc.on ("readyToCall", function () {
    webrtc.joinRoom (getRoom ());
  });

  // coupure

Maintenant que vous avez terminé la vidéo compliquée, il vous suffit de définir une fonction, enableVideo qui affichera les boîtes vidéo et initialisera le code SimpleWebRTC que vous venez de définir:

 / / Activer la vidéo sur la page.
function enableVideo () {
  document.getElementById ("url"). style.display = "bloquer";
  document.getElementById ("distants"). style.visibility = "visible";
  loadSimpleWebRTC ();
}

Enfin, vous devez maintenant revenir en arrière et modifier votre fonction handleLogin afin qu'elle appelle votre nouvelle fonction enableVideo lorsque cela est approprié:

 // Traitement de l'utilisateur connectez-vous et ce qui se passe ensuite.
function handleLogin () {
  // Si l'utilisateur se connecte pour la première fois ...
  if (okta.token.hasTokensInUrl ()) {
    okta.token.parseTokensFromUrl (
      succès de la fonction (res) {
        // Sauvegarde des jetons pour une utilisation ultérieure, par ex. si la page est rafraîchie:
        okta.tokenManager.add ("accessToken", res [0]);
        okta.tokenManager.add ("idToken", res [1]);

        // Rediriger vers l'URL de la salle dédiée de cet utilisateur.
        window.location = getRoomURL ();
      }, erreur de fonction (err) {
        alert ("Nous n'avons pas pu vous connecter, quelque chose d'horrible a dû se produire. Veuillez rafraîchir la page.");
      }
    )
  } autre {
    okta.session.get (function (res) {

      // Si l'utilisateur est connecté, affichez l'application.
      if (res.status === "ACTIF") {

        // Si l'utilisateur est connecté sur la page d'accueil, redirigez-le vers sa page d'accueil.
        if (! hasQueryString ()) {
          window.location = getRoomURL ();
        }

        retourne enableVideo ();
      }

      // Si nous arrivons ici, l'utilisateur n'est pas connecté.

      // S'il y a une chaîne de requête dans l'URL, cela signifie que cette personne est dans un
      // "room" donc nous devrions afficher notre avis de connexion passive. Autrement,
      // nous les inviterons à se connecter immédiatement.
      if (hasQueryString ()) {
        document.getElementById ("login"). style.display = "bloquer";
        enableVideo ();
      } autre {
        showLogin ();
      }
    });
  }
}

En appelant enableVideo si approprié ci-dessus, tout devrait maintenant fonctionner correctement! Vous pouvez le tester en ouvrant votre page et en essayant:

Pas mal, non?

Tout mettre ensemble

Maintenant que vous avez traversé la Pour le développement de votre application, vous devriez avoir une belle application d'une seule page.

Par souci d'exhaustivité, voici la version finale dans un seul fichier index.html (moins le CSS affiché précédemment) :



  
     vchat - une simple application de chat vidéo 
    
      
      
  
  
    

vchat

une simple application de chat vidéo

NOTE : Vous n'êtes pas connecté. Si vous souhaitez créer votre propre             salon de chat s'il vous plaît

  

With just a little bit of effort you were able to build a real-time video chat app using WebRTC to power video chat and Okta to power user authentication.

If you’d like to see a slightly more organized version of this project, you can check out my GitHub repo which contains the cleaned up source here: https://github.com/rdegges/chatapp

If you enjoyed this article but didn’t follow through the tutorial, one thing you might want to do is create an Okta developer account (they’re free) to handle any user management, authentication, authorization, single-sign on, social login, etc. It’s a really powerful tool and quite useful when building web apps (especially those without server-side backends).

If you’d like to see more articles like this, tweet us @oktadev and let me know! We’ve also got a ton of other interesting developer articles you can find on the Okta developer blog.

Bonus: Deploy Your Site Live with Netlify

If you’re anything like me then you hate following tutorials only to discover that the app you were building only runs on localhost. If you’d like to deploy your new Okta + WebRTC app live to the world in a simple way, I’d highly recommend using Netlify.

Netlify is one of my favorite services — it’s a static website hosting tool that syncs with GitHub and makes deploying your static sites a breeze. For projects like this that have no backend, Netlify is incredibly valuable as it automates 100% of your deployment and will host your site for you on its fast CDN at no cost!

To get started with Netlify, you first need to go create an account on their site.

Once you’ve got an account, you’ll then need to create a new Netlify app (you can have as many as you want, one for each website you run). Simply click the New site from Git button at the top right of your dashboard, then select your hosting provider (GitHub in my case), find your project, then configure it.

Here’s what this process looks like for me:

In just a few short seconds I’m able to sync my GitHub repo with Netlify so that it auto-deploys my website live to its CDN (over SSL) — pretty amazing, right? From this point forward, each time you push a new commit to your repo (depending on how you’ve configured Netlify) it will automatically deploy your static site to its CDN.

And… once you’ve gotten your site all setup in Netlify, the next thing you’ll want to do is optimize it! Netlify has some great functionality that will automatically optimize your images, CSS, HTML, etc. each time you push new code.

To enable this functionality you can visit the Site settings -> Build & deploy menu:

With just a few clicks you’re able to speed up your site dramatically by compressing all your images, JS, and CSS.

If you’d like to use a real URL instead of the Netlify default project URL, you can easily do that through the Domain management tab which allows you to do things like setup your own DNS, generate SSL certs for free, etc.

Overall, it’s a really nice service that I’ve come love for all my projects.

Anyhow: I hope this tutorial was useful and helpful!






Source link