Vonage Video Express avec Ruby on Rails Partie 1

Depuis 2004, Ruby on Rails est adoré des développeurs et surtout des fondateurs de startups pour sa capacité à créer rapidement des applications web grandeur nature. Kerry Doyle a parfaitement résumé la philosophie "Convention Over Configuration" qui sous-tend Ruby on Rails, "[elle] tente de diminuer le nombre de décisions qu'un développeur utilisant le framework doit prendre sans nécessairement perdre en flexibilité et en principes "don't repeat yourself" (DRY)". Cette philosophie fait de Rails un outil idéal pour la méthode LEAN .

L'année dernière, Vonage a lancé Video Express. Cette bibliothèque Javascript qui s'appuie sur l'API Video API de Vonage est comme l'extension " Convention Over Configuration " qui rend le processus de création d'Applications d'appels vidéo plus facile et plus rapide. N'importe quel développeur peut désormais créer des réunions Video puissantes et robustes sans en connaître tous les rouages.

Dans ce tutoriel, je vous montrerai comment combiner ces technologies puissantes pour créer une application moderne et complète avec toutes les fonctionnalités de vidéoconférence que les utilisateurs attendent. J'utiliserai Ruby on Rails, Vonage Video Express et la nouvelle boîte à outils d'interface utilisateur de Vonage Vivid.

Ce billet est inspiré par Créer une fête avec Ruby on Rails et l'API Video de Vonage. Je vais recréer en grande partie la fonctionnalité de ce billet et après, vous pourrez voir que beaucoup moins de code a été nécessaire !

Ce que fait l'application

En 2020, Ben Greenberg a créé une application permettant à son fils de regarder des films avec ses amis. Cette application sera essentiellement la même. Sauf que je ne regarde pas de films en ligne avec mes amis. Mais depuis que j'ai déménagé à l'autre bout du monde, j'ai du mal à trouver des fans de mon équipe de hockey sur glace préférée, les Blues. Alors, au lieu de regarder des films avec mes amis, j'aimerais bien regarder les Blues ou le sport en général avec des amis de chez moi. Sur le plan fonctionnel, l'application est la même et emprunte beaucoup à l'application cinéma de Ben. Il sera ainsi facile de comparer les avantages et les inconvénients de l'utilisation de Video Express et de l'écriture dans l'API Video de Vonage.

Cette application comportera deux pages : une page d'atterrissage avec un formulaire de connexion et une page "fête". Lorsque les utilisateurs se connectent, ils sont dirigés vers une "zone de détente" où ils sont affichés en taille égale. Ensuite, lorsque le jeu commence, le "modérateur" qui dirige la session déclenche un partage d'écran pour afficher le jeu. En mode "Watch", l'écran partagé du modérateur sera dominant et occupera la majeure partie de l'appel vidéo. Étant donné que le meilleur moment pour regarder du sport avec des amis est le badinage, je verrai et j'entendrai toujours les autres participants. Mais si mes amis parlent trop fort, je veux pouvoir les mettre en sourdine. Nous permettrons également aux participants de se mettre en sourdine, d'éteindre leur caméra vidéo et de sélectionner leurs entrées et sorties vidéo/audio.

GIF Preview Of Finished Video Conferencing App Built With Vonage Video Express

Dans la première partie, nous construirons l'application Rails, en utilisant quelques composants Vivid, et nous ferons fonctionner Video Express. Dans la deuxième partie, nous passerons au niveau supérieur en construisant des composants combinant les fonctionnalités de Video Express avec Vivid UI.

Yalla ! Allons-y !

Exigences

• ruby v3.0.0+

• Rails v6.1.6+

• Video API de Vonage

• Vonage Video Express v1.2.3+ (en anglais)

• Vivid v2.34.0+

Installation de l'API Video de Vonage

La création d'un compte Video API de Vonage est gratuite. Vous devez le faire afin d'obtenir votre clé API et votre secret, qui sont essentiels pour rendre l'application fonctionnelle.

Titres de compétences

Après avoir créé un Account avec l'API Video de Vonagede Vonage, vous verrez une interface de tableau de bord. La première étape pour obtenir les informations d'identification de l'API consiste à créer un nouveau projet.

• Ouvrir le Projets dans la barre latérale gauche.

• Cliquez sur le bouton Créer un nouveau projet .

• Sélectionner Video API de Vonage lorsqu'on lui demande quel type de projet créer ; Créer un projet personnalisé

• Indiquer un nom quelconque pour le nom du projet

• Choisissez l'option codec VP8. (Les différences entre VP8 et H.264 sont expliquées en détail ici)

• Vous avez maintenant accès à la clé API et au secret de votre projet. Gardez-les en lieu sûr, nous les utiliserons bientôt.

Activer Video Express

Pour utiliser Video Express, veillez à activer le module complémentaire Video Express pour votre Account.

• Accédez à votre Video API Account et cliquez sur Paramètres du compte dans le menu de gauche.

• Dans la liste des Modules complémentaires Accounttrouvez Video Express et cliquez sur Ajouter au Account. Suivez ensuite les instructions restantes pour activer le module complémentaire.

Mise en place de l'application Rails

Avant de pouvoir ajouter la magie du front-end avec Video Express et Vivid, nous devons faire un peu de travail pour créer notre application Rails et l'exécuter avec l'API Video de Vonage sur le back-end.

Installation

Créer une nouvelle application rails en utilisant postgresql comme base de données.

rails new video-express-rails --database=postgresql

S'installer dans le projet : cd video-express-rails

Ouvrez maintenant le projet avec votre éditeur de texte préféré.

Dépendances des gemmes

Nous aurons besoin d'ajouter deux gems : Vonage Video API Ruby SDK (anciennement connu sous le nom d'OpenTok) et dotenv-rails pour gérer nos variables d'environnement.

Ouvrez le Gemfile et ajoutez les pierres précieuses :

gem 'opentok'
gem 'dotenv-rails'

Une fois que c'est fait, nous pouvons lancer bundle install à partir de la ligne de commande pour installer nos dépendances.

Bibliothèques Javascript

Nous utiliserons deux bibliothèques Javascript dans la partie frontale : Video Express et Vivid. Avant de les utiliser, nous allons en savoir un peu plus sur elles.

Video Express

J'ai promis que Video Express faciliterait la vie des développeurs, mais comment ? Principalement de deux façons : Les performances et la la conception.

Performance

Video Express Quality Manager optimise en permanence la résolution des flux, le taux de rafraîchissement et les tailles de rendu. C'est très important car le nombre de flux dans une session de vidéoconférence classique augmente de façon quadratique ! Par exemple, 2 personnes dans un appel vidéo créent 1 flux. 6 personnes dans un appel vidéo créent 36 flux. Mais 25 personnes lors d'un appel vidéo signifient que 625 flux sont actifs simultanément !

Le gestionnaire de la qualité s'efforce d'augmenter ou de diminuer la résolution en fonction des réseaux et des processeurs, de mettre en pause les flux vidéo non visibles et les flux audio en sourdine, et de demander des flux vidéo plus petits aux serveurs multimédias lorsque les vidéos affichées deviennent plus petites.

Cela peut se traduire par 60 % de réduction de l'utilisation de la bande passante pour les sessions de 10 participants et 80 % de réduction de l'utilisation de Bandwith pour 25 sessions de participants !

Conception

Depuis les débuts de COVID, le monde s'est intimement familiarisé avec la vidéoconférence. À l'heure actuelle, tout le monde sait plus ou moins ce que l'on peut attendre d'une vidéoconférence et, pour la plupart des Applications, il n'est pas nécessaire de réinventer la roue. Video Express fait le gros du travail avec son Gestionnaire de mise en page et Experience Manager.

Le gestionnaire de mise en page gère la réactivité de l'appel vidéo, ajuste automatiquement les fenêtres vidéo lorsque les participants quittent, rejoignent ou partagent leur écran, et optimise les résolutions vidéo et les fréquences d'images en fonction de la taille du rendu.

Le gestionnaire d'expérience définit dynamiquement la priorité des orateurs et met automatiquement en sourdine les personnes qui se joignent à la réunion.

Toutes ces tâches lourdes signifient que Video Express dispose d'une tonne de fonctions intégrées qui ne demandent qu'à être connectées à une interface utilisateur. Video Express vous offre toutes ces fonctionnalités dès sa sortie de l'emballage :

• Détection des actions effectuées par les utilisateurs, telles que rejoindre ou quitter un lieu, activer leur caméra ou leur système audio.

• Différentes options de présentation : grille ou haut-parleur actif

• Détection active du haut-parleur

• Changement de la caméra et du microphone utilisés

• Réglage du périphérique de sortie audio

• Création d'un éditeur de prévisualisation

• Accéder à l'audio/vidéo de l'éditeur de partage d'écran

• Détection de la publication de flux de partage d'écran par d'autres clients

• Activation et désactivation de l'audio et de la vidéo d'un abonné au partage d'écran

Vif

Comme je l'ai dit, Video Express dispose de toutes les fonctionnalités frontales, il suffit qu'un développeur conçoive une interface utilisateur pour l'utilisateur final. C'est ce que fait Vonage ! Nous avons développé une magnifique boîte à outils d'interface utilisateur appelée Vivid qui permet de créer des applications avec des fonctions de communication beaucoup plus rapidement.

Vivid est construit à l'aide de Web Components, ce qui lui permet de fonctionner avec n'importe quel framework ou même avec du HTML/JS vanille comme Rails. Et ils sont superbes ! Et ils sont accessibles sur le web!

En savoir plus sur Vivid

Vivid Install

Installons Vivid et commençons à travailler :

yarn add @vonage/vivid

Génération de modèles

Ensuite, nous allons générer un modèle qui contiendra et manipulera les informations relatives au groupe de surveillance. Cela créera également une table associée dans notre base de données. watch_parties dans notre base de données. Afin de connecter deux utilisateurs au même appel vidéo, nous devrons passer à l'API Video de Vonage le fichier session_id. À partir de la ligne de commande, exécutez ce qui suit :

rails g model WatchParty session_id:string

Avant d'exécuter la migration pour créer cette colonne dans notre base de données, nous devrons mettre à jour la migration pour nous assurer que les sessions ne sont pas définies par défaut comme nulles lorsque nous devons les récupérer.

Ouvrez le répertoire db/migrate et trouvez le fichier appelé : TIMESTAMP_create_watch_parties.rb

//In TIMESTAMP_create_watch_parties.rb
class CreateWatchParties < ActiveRecord::Migration[6.1]
  def change
    create_table :watch_parties do |t|
       t.string :session_id, null:false
       t.boolean :expired, default: false

       t.timestamps
     end
   end
 end

Vous pouvez maintenant valider la migration de la base de données vers le schéma en exécutant la ligne de commande run :

rails db:create db:migrate

Cette commande crée la base de données PostgreSQL et la table sessions avec la colonne session_id.

Création des méthodes de la classe

Mettons maintenant en œuvre notre logique de surveillance qui utilisera l'API Video de Vonage pour connecter les utilisateurs à une session d'appel vidéo.

Chaque session Vonage Video possède son propre identifiant de session. C'est cet identifiant de session qui permet à différents participants de se joindre au même chat vidéo. En outre, chaque participant au chat vidéo a besoin d'un jeton qui lui permet de participer. Un jeton peut recevoir des autorisations spéciales, comme des capacités de modération.

Dans le modèle Session, nous allons créer trois méthodes de classe qui seront utilisées pour créer un nouvel identifiant de session ou charger le précédent, et générer des jetons pour chaque participant.

En savoir plus sur Sessions de l'API Video de Vonage.

Ouvrir app/models/watch_party.rb

Tout d'abord, nous devons accéder à la fonctionnalité de l'API Video de Vonage en instanciant une instance du SDK Ruby OpenTok. Nous transmettrons nos API_KEY et API_SECRET de la section "credentials" ci-dessus par le biais des variables d'environnement ENV

require 'opentok'
@opentok = OpenTok::OpenTok.new(ENV['OPENTOK_API_KEY'], ENV['OPENTOK_API_SECRET'])

Nous pouvons maintenant ajouter les méthodes de la classe. La méthode Session#create_or_load_session_id vérifie s'il existe déjà un identifiant de session. Si c'est le cas, elle l'utilisera. Sinon, elle en génère un nouveau.

def self.create_or_load_session_id
  unless WatchParty.any?
    return @session_id = create_new_session
  else
    last_session = WatchParty.last
    if last_session
      @session_id = last_session.session_id
    elsif !last_session
      @session_id = create_new_session
    else
      raise 'Something went wrong with the session creation!'
    end
  end
end

La méthode ci-dessus fait également référence à une méthode supplémentaire que nous devons créer, appelée create_new_session qui se charge de créer une nouvelle session s'il n'en existe pas :

def
  session = @opentok.create_session
  @session_id = session.session_id
end

Enfin, nous créerons une méthode qui attribuera le bon jeton à chaque participant :

def self.create_token(session_id)
  @token = @opentok.generate_token(session_id)
end

Votre modèle WatchParty complet devrait ressembler à ceci :

class WatchParty < ApplicationRecord
  require 'opentok'

  @opentok = OpenTok::OpenTok.new ENV['OPENTOK_API_KEY'], ENV['OPENTOK_API_SECRET']

  def self.create_or_load_session_id
    if WatchParty.any?
      last_session = WatchParty.last
      if last_session && last_session.expired == false
        @session_id = last_session.session_id
        @session_id
      elsif (last_session && last_session.expired == true) || !last_session
        @session_id = create_new_session
      else
        raise 'Something went wrong with the session creation!'
      end
    else
      @session_id = create_new_session
    end
  end

  def self.create_new_session
    session = @opentok.create_session
    @session_id = session.session_id
  end

  def self.create_token(user_name, moderator_name, session_id)
    @token = user_name == moderator_name ? @opentok.generate_token(session_id, { role: :moderator }) : @opentok.generate_token(session_id)
  end
end

Définition des variables ENV

Nous avons vu que la logique de notre Video API nécessite l'utilisation de certaines variables d'environnement secrètes. Définissons-les maintenant.

Créer le fichier .env à la racine du projet video-express projet :

touch .env

A l'intérieur, nous définissons nos variables ENV :

OPENTOK_API_KEY=''
OPENTOK_API_SECRET=''
MODERATOR_NAME=''
PARTY_PASSWORD=''

Ici, vous devrez ajouter les informations d'identification de votre Video API. Dans une application réelle, vous voudriez stocker les informations sur les modérateurs et les mots de passe des groupes de surveillance dans votre base de données, mais pour cette démo, le stockage dans une variable ENV fait l'affaire !

N'oubliez pas d'ajouter un MODERATOR_NAME et PARTY_PASSWORDà utiliser dans la page de connexion.

Définir les itinéraires

L'utilisateur verra deux pages : la page d'accueil et la page des fêtes. Mais nous devons aussi récupérer les informations du formulaire de connexion pour vérifier que le mot de passe est correct et que l'utilisateur est bien le modérateur. Nous allons donc créer deux requêtes get et un post :

Rails.application.routes.draw do
  get '/', to: 'watch_party#home'
  get '/party', to: 'watch_party#party'
  post '/login', to: 'watch_party#login'
end

Création du contrôleur

Avec la "Convention over Configuration" de Rails, nous savons déjà de quelles actions nous aurons besoin pour notre contrôleur, de la même manière que pour les routes !

À partir de la ligne de commande, générez le contrôleur WatchParty avec les actions home, login et party.

rails g controller WatchParty home login party

• Le générateur de rails génère des choses supplémentaires que nous ne voulons pas. Maintenant, nous allons supprimer les routes qu'il a générées dans app/config/routes.rb. Et supprimez complètement le fichier login view ; app/views/watch_party/login.html.erb

À ce stade, la configuration et l'installation principales étant terminées, j'aime bien faire une paire action/vue à la fois jusqu'à ce que j'aie terminé une application.

Construction de la page d'accueil

La page d'accueil que nous voulons créer ressemblera à ceci :

Watch Party Home Page

Si nous regardons la documentation de Vivid, nous voyons que nous avons tous les composants dont nous avons besoin :

• Carte

• Texte

• Formulaires

• Boutons

Ainsi, avec un peu de magie Rails et un peu de magie Vivid, nous avons tout ce dont nous avons besoin. Il n'y a que deux choses délicates à faire ici. Premièrement, vous remarquerez que les cartes peuvent avoir des titres et des sous-titres dans Vivid. Alors pourquoi avons-nous besoin d'utiliser le composant vwc-text ? Parce que Vivid utilise des slots dans ses composants web et que lorsqu'on utilise le composant slot="main" pour avoir du contenu dans la carte, cela remplace les slots du titre et du sous-titre.

Deuxièmement, le formulaire ne nous aide pas à transmettre les données au serveur. Nous devons donc utiliser l'aide de Rails form_with. Dans l'ensemble, cela ressemble à ceci :

<div class="card-wrapper">
  <vwc-card>
    <div slot="main" id="box">
      <vwc-text font-face="subtitle-1" >Big Game Watch Party
        <br>
        <span><vwc-text font-face="body-1-code">Built With Vonage Video Express on Rails</vwc-text></span></vwc-text>

      <%= form_with(url: "/login", method: "post") do %>
        <vwc-textfield name="name" label="Enter Your Name" icon="user" outlined="">
        </vwc-textfield>
        <vwc-textfield name="password" label="Enter Team Passcode" icon="lock" type="password" outlined="">
        </vwc-textfield>
        <div class="controls">
          <vwc-button layout="outlined" type="reset" outlined="">
            Reset
          </vwc-button>
          <vwc-button layout="filled" type="submit" unelevated="">
            Submit
          </vwc-button>
        </div>
      <% end %>
    </div>
  </vwc-card>
</div>

Maintenant, si nous lançons notre serveur, nous devrions avoir une belle page d'accueil comme dans l'image, n'est-ce pas ? Essayez donc ! Lancez rails s depuis votre ligne de commande et ouvrez localhost:3000 dans votre navigateur.

Euh oh, ça ne marche pas !

Car bien que nous ayons Vivid dans notre projet, nous ne l'avons pas importé dans le code pour l'utiliser. Nous allons donc le faire dans notre code Javascript. Dans app/javascript/packs/application.js ajoutez cette ligne sous import "channels:

import '@vonage/vivid';

Maintenant, si vous ouvrez la page, elle fonctionnera. Mais elle est encore assez laide. Nous allons donc la styliser. Dans app/assets/stylesheets/watch_party.scss ajoutons un peu de css :

// Home Page Styles

.card-wrapper {
  display: flex;
}
vwc-card {
  margin: auto;
  padding: 10%;
}

#box {
  padding: 50px 100px;
}

form {
  display: grid;
  gap: 20px;
}
.controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

Avant de poursuivre, ajoutons le magnifique arrière-plan de Vonage dans app/assets/stylesheets/application.scss

body {
  background: linear-gradient(90deg, #9DD2FE 4.86%, #8728FB 96.11%);
  margin: 0px;
}

Définition de la connexion

Nous avons un formulaire, mais nous voulons nous assurer que seuls les vrais fans, c'est-à-dire nos amis, peuvent participer à notre soirée de surveillance ! Nous allons donc ajouter un peu de logique Rails Strong Parameters pour attraper la fonction name et password des paramètres envoyés dans le formulaire de la page d'accueil.

class WatchPartyController < ApplicationController
  def home
  end

  def login
    @name = login_params[:name]
    if login_params[:password] == ENV['PARTY_PASSWORD']
      redirect_to party_path(name: @name)
    else
      redirect_to('/', flash: { error: 'Incorrect password' })
    end
  end

  def party
  end

  private

  def login_params
    params.permit(:name, :password, :authenticity_token, :commit)
  end
end

Les connexions réussies seront redirigées vers le site party_path. Ce chemin conduira les utilisateurs vers la page de la fête, le cœur de l'application où se trouvera notre salle Video Express. Construisons-la !

Création de la page du parti

Tout d'abord, jetons un coup d'œil à ce que nous construisons. Il s'agit de la page de la Fête en mode "Chill", en tant que non-modérateur. Mais pour la partie 1, nous ne nous soucierons pas de l'en-tête ou des composants de la barre d'outils, de sorte qu'il ne nous reste plus qu'à construire Video Chat.

Party Page: Chill Mode, Non Moderator

Commençons par l'ossature de la page, le HTML. Nous avons trois composants : un en-tête, l'appel vidéo et une barre d'outils. Pour l'instant, nous nous contenterons de laisser des commentaires à l'endroit où se trouvent les balises header et toolbar vont aller : Ajoutez ceci à votre app/views/video/party.html.erb:

<header>
  <!-- Header Will Go Here -->
</header>

<main class="app">
  <!-- Video Chat Will Go Here -->
  <toolbar class="toolbar-wrapper">
    <!-- Toolbar Will Go Here -->
  </toolbar>
</main>

Il ne reste donc plus qu'à ajouter notre appel vidéo avec Video Express sur la page de la fête. Construisons-le maintenant.

Construction d'une salle avec Video Express

L'API Video de Vonage donne aux développeurs un contrôle total sur la personnalisation de leur présentation vidéo en manipulant publisher et subscriber éléments. Dans Video Express, ces éléments sont remplacés par le concept de l'élément room. L'ajout de cet élément est aussi simple que 1, 2, 3.

1. Inclure la bibliothèque. Ajoutez ce script au début du fichier : <script src="https://static.opentok.com/v1/js/video-express.js"></script>

2. Exécutez maintenant la création de la salle avec l'exemple de code tiré de la documentation de Video Express. Notez que nous passons le paramètre supplémentaire participantName. Video Express est léger mais il est livré avec quelques options, explorez la documentation !

<script>
      const room = new VideoExpress.Room({
       apiKey: '<%= @api_key %>', // add your OpenTok API key
       sessionId: '<%= @session_id %>', // add your OpenTok Session ID
       token: '<%= @token %>', // add your OpenTok token
       roomContainer: 'roomContainer',
       participantName: '<%= @name %>'
      });
      room.join();
    </script>

1. Nous pouvons voir que le roomContainer cherche le point d'entrée dans le html où il peut s'accrocher et intégrer le Room. Nous devons donc créer un élément dont l'identifiant est roomContainter.

Le code final du party.html.erb ressemble à ceci :

<script src="https://static.opentok.com/v1/js/video-express.js"></script>
<header>
  <!-- Header Will Go Here -->
</header>

<main class="app">
  <div id="roomContainer"></div>
  <toolbar>
    <!-- Toolbar Will Go Here -->
  </toolbar>
</main>

<script>
  const room = new VideoExpress.Room({
   apiKey: '<%= @api_key %>', // add your OpenTok API key
   sessionId: '<%= @session_id %>', // add your OpenTok Session ID
   token: '<%= @token %>', // add your OpenTok token
   roomContainer: 'roomContainer',
   participantName: '<%= @name %>'
 });
 room.join();
</script>

Nous devrions donc être en mesure d'exécuter notre serveur et de voir un beau site d'appel vidéo, n'est-ce pas ? Vous devriez savoir que la réponse est "non" maintenant 😆. Qu'est-ce qui nous manque ? Nous n'avons pas utilisé la logique OpenTok de l'API Video pour l'envoyer à Video Express.

Nous devons donc définir nos variables OpenTok dans l'élément WatchParty Controller et les transmettre à notre frontend.

Dans le contrôleur WatchParty, nous devons ajouter l'élément set_opentok_vars action"

def set_opentok_vars
      @api_key = ENV['OPENTOK_API_KEY']
      @api_secret = ENV['OPENTOK_API_SECRET']
      @session_id = WatchParty.create_or_load_session_id
      @moderator_name = ENV['MODERATOR_NAME']
      @name ||= params[:name]
      @token = WatchParty.create_token(@name, @moderator_name, @session_id)
    end

Nous utiliserons la fonction before_action qui appellera la méthode avant d'entrer dans l'action party avant d'entrer dans l'action. Le contrôleur complet ressemble donc à ceci

class WatchPartyController < ApplicationController
  skip_before_action :verify_authenticity_token
  before_action :set_opentok_vars

  def home
  end

  def login
    @name = login_params[:name]
    if login_params[:password] == ENV['PARTY_PASSWORD']
      redirect_to party_path(name: @name)
    else
      redirect_to('/', flash: { error: 'Incorrect password' })
    end
  end

  def party
  end

  private

  def set_opentok_vars
    @api_key = ENV['OPENTOK_API_KEY']
    @api_secret = ENV['OPENTOK_API_SECRET']
    @session_id = WatchParty.create_or_load_session_id
    @moderator_name = ENV['MODERATOR_NAME']
    @name ||= params[:name]
    @token = WatchParty.create_token(@name, @moderator_name, @session_id)
  end

  def login_params
    params.permit(:name, :password, :authenticity_token, :commit)
  end
end

Maintenant, si nous actualisons... nous voyons que notre caméra s'allume et que l'audio devient bizarre. Mais rien ne s'affiche à l'écran. Pourquoi ? Video Express fonctionne et nous sommes connectés à une session vidéo par l'intermédiaire de Video API. Mais nous n'avons pas donné à l'écran vidéo la possibilité d'exister !

Ajoutons quelques feuilles de style CSS issues du modèle de base de Video Express pour l'écran vidéo. Nous ciblons le #roomContainer et lui donnons toute la largeur et toute la hauteur, moins l'en-tête. Nous ajoutons également un peu de CSS pour indiquer à Video Express où placer l'affichage local et le partage d'écran lorsqu'il est déclenché.

// Video Express Styles
#roomContainer {
  width: 100vw;
  height: calc(100vh - 130px);
  position: relative;
}
#roomContainer > .OT_publisher {
  top: 25px;
  right: 25px;
  position: absolute;
  border-radius: 10px;
}
#roomContainer > .OT_screenshare {
  top: 25px;
  left: 25px;
  position: absolute;
  border-radius: 10px;
}

Boum ! Nous avons maintenant une session Video. Essayez de vous connecter à partir de plusieurs onglets/noms différents. Boum ! Vous avez une vidéoconférence dans Rails !

Prochaines étapes

Dans la deuxième partie, nous ajouterons certaines des fonctionnalités que l'on peut attendre d'une vidéoconférence moderne :

• Partage d'écran : il sera limité de sorte que seul notre modérateur puisse l'utiliser.

• Mettre en sourdine tous les autres participants

• Se mettre en sourdine

• Cachez-vous (éteignez la caméra)

• Sélectionner les entrées : micro et caméra

• Sélection de la sortie audio

Pour ce faire, nous ajouterons d'autres composants Vivid ainsi que du Javascript Video Express.

Si vous êtes arrivé jusqu'ici, bravo ! Appelez-moi sur Twitter et faites-moi savoir comment vous avez trouvé le tutoriel.