Créer une fête avec Ruby on Rails et l'API Video de Vonage Partie 1

Mon fils a récemment fêté son 9e anniversaire et, comme beaucoup d'enfants de son âge, il attendait sa fête d'anniversaire avec impatience depuis des mois. En pleine pandémie d'In-App Video, nous savions que nous devions faire quelque chose de différent cette année, alors je lui ai créé une application de fête vidéo en utilisant l'API Video de Vonage !

Vous aussi, vous pouvez créer votre propre application de visionnage de vidéos avec l'API Video de Vonage et Ruby on Rails, et je vais vous montrer comment. Cette série en deux parties vous guidera à travers les étapes de la création de votre application Rails complète. La première partie se concentrera sur le backend de l'application et la seconde sur le frontend.

tl;dr Si vous souhaitez sauter le pas et passer directement au déploiement, vous pouvez trouver tout le code de l'application sur GitHub.

Que fera l'application ?

Avant de commencer à construire l'application, prenons un moment pour discuter de ce qu'elle fera.

L'application présentera trois vues distinctes :

1. Une page d'atterrissage

2. Party Video Chat

3. Video Watch Party

L'accès à l'application se fera par la page de renvoi. Sur cette page, les participants devront indiquer leur nom et le mot de passe de la fête. Le nom servira à les identifier dans le chat textuel. Le mot de passe fournira une petite couche de sécurité pour l'application.

Une fois que les participants ont saisi leur nom et le mot de passe correct, ils sont redirigés vers l'écran de Video Chat. Dans cette vue, chaque participant se verra et s'entendra dans un format de grille. Il sera également possible de discuter par texte. Tous les participants verront un décompte en temps réel dans la barre de navigation. Le modérateur de la fête verra également un lien permettant d'activer ou de désactiver le mode "veille". Mode veille activé/désactivé.

Une fois que le modérateur a activé le mode veille, tous les participants sont dirigés vers la troisième et dernière vue, à savoir la Video Watch Party. Dans cette vue, le modérateur partage son écran au centre de la page. L'audio du modérateur est également publié dans une zone cachée. <div> afin que les participants puissent entendre l'audio de la Video partagée. Le chat textuel sera le moyen de communication dans cette vue. Les flux audio et vidéo de tous les participants seront désactivés.

Le modérateur peut faire passer les participants du mode Chat vidéo à celui de Video Watch Party quand il le souhaite en appuyant sur la touche Mode veille activé/désactivé dans leur barre de navigation.

Maintenant que nous avons une idée de ce que nous allons construire, commençons à le construire !

Conditions préalables

Cette application nécessite les éléments suivants :

• Ruby on Rails v6.0+

• Ruby v2.5.8+

• Compte Video API de Vonage (anciennement TokBox OpenTok)

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.

Références de l'API Video de Vonage

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.

• Sélectionnez l'option Créer un nouveau projet dans la barre latérale gauche.

• Sélectionner API à la question de savoir quel type de projet créer

• Donner un nom au projet

• Choisissez le 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.

Installation

Depuis votre terminal, lancez une nouvelle application Rails en exécutant ce qui suit :

Une fois que c'est fait, allez dans le répertoire du projet et ouvrez le projet avec votre éditeur de code préféré.

Dépendances des gemmes

Nous ajouterons l Video API de Vonage (anciennement TokBox OpenTok) au SDK Ruby. Gemfileainsi que la gem pour gérer les variables d'environnement. dotenv-rails pour gérer les variables d'environnement :

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.

Génération de modèles

Ensuite, nous allons générer un modèle pour contenir et manipuler les informations de la session Video. À partir de la ligne de commande, exécutez ce qui suit :

Cette commande créera un fichier de modèle à l'intérieur de /app/models/ et un fichier de migration de base de données dans /db/migrate/. Ouvrons le fichier de migration de base de données dans notre éditeur de code. Nous devons ajouter des valeurs par défaut aux colonnes avant de le migrer.

Vous trouverez le fichier de migration dans le dossier /db/migrate/ à l'intérieur du dossier Ce sera le seul fichier à l'intérieur du dossier, et il ressemblera à ceci :

class CreateSessions < ActiveRecord::Migration[6.0]
  def change
    create_table :sessions do |t|
      t.string :session_id, null: false
      t.boolean :expired, default: false

      t.timestamps
    end
  end
end

Nous voulons nous assurer que l'élément session_id ne soit jamais nulle et nous voulons également nous assurer que la valeur par défaut du booléen expired prenne par défaut la valeur false. Pour ce faire, modifiez votre fichier de migration en ajoutant , null: false et , default: false à la ligne :session_id et :expired respectivement.

Vous pouvez maintenant valider la migration de la base de données dans le schéma en exécutant la commande rake db:create à partir de la ligne de commande. Cette commande créera la base de données PostgreSQL et la table sessions avec les éléments session_id et expired . Elle créera la base de données PostgreSQL et la table avec les colonnes et

Définition des itinéraires

L'application a besoin que les routes HTTP auxquelles elle accédera soient définies et qu'elles pointent vers les méthodes correctes du contrôleur. Ouvrez le fichier /config/routes.rb et ajoutez ce qui suit :

Rails.application.routes.draw do
  get '/', to: 'video#landing'
  get '/party', to: 'video#index'
  get '/screenshare', to: 'video#screenshare'
  post '/name', to: 'video#name'
  post '/chat/send', to: 'video#chat'
end

Toutes les routes pointent vers des méthodes à l'intérieur de l'élément VideoController. Nous créerons le contrôleur à l'étape suivante.

• La route GET L'itinéraire racine mène à l'action #landing action. Il s'agit de l'itinéraire de la page d'atterrissage.

• L'itinéraire GET /screenshare pointe vers l'action #screenshare action. Il s'agit de l'itinéraire pour la vue du groupe de surveillance.

• L'itinéraire GET /party pointe vers l'action #index action. Il s'agit de l'itinéraire pour l'affichage du chat vidéo.

• L'itinéraire POST /name pointe vers l'action #name action. C'est là que le formulaire de la page d'atterrissage enverra ses données.

• L'itinéraire POST /chat/send pointe vers l'action #chat action. C'est là que les messages textuels seront envoyés.

Enfin, dans cette étape, nous allons créer le fichier VideoController.

Génération de contrôleurs

Dans l'étape suivante, nous créerons des méthodes pour le contrôleur. Dans cette dernière étape d'installation, nous allons générer le fichier du contrôleur. À partir de la ligne de commande, exécutez ce qui suit :

Cela créera un fichier video_controller.rb dans le dossier /app/controllers/ avec des méthodes vides pour chacune des actions spécifiées dans la commande. Il créera également la structure de base de la vue pour l'application à l'intérieur de /app/views/video.

Création des méthodes du modèle et du contrôleur

Maintenant que toute la structure de fichier et le schéma de base de données nécessaires ont été créés, il est temps de créer les méthodes pour l'application. Nous devrons créer des méthodes à la fois dans le contrôleur Video et dans le modèle de session. Commençons par le modèle de session.

Définition des méthodes du modèle

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 à la même discussion vidéo. En outre, chaque participant à la session Video se voit attribuer un numéro de session unique qui lui permet de participer à la session. token qui lui permet de participer. Un jeton peut être doté d'autorisations spéciales, telles que 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.

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. Les identifiants de session peuvent expirer, mais pour les besoins de ce tutoriel, nous ne travaillerons qu'avec des identifiants de session actifs :

def self.create_or_load_session_id
  if Session.any?
    last_session = Session.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

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

def self.create_new_session
  session = @opentok.create_session
  record = Session.new
  record.session_id = session.session_id
  record.save
  @session_id = session.session_id
  @session_id
end

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

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

En haut de la définition du modèle, nous devons également instancier une instance du SDK Vonage Video API (anciennement TokBox OpenTok) et l'affecter à une variable d'instance pour l'utiliser dans l'ensemble du modèle. Au total, le fichier ressemblera à ce qui suit :

require 'opentok'

class Session < ApplicationRecord
  @opentok = OpenTok::OpenTok.new ENV['OPENTOK_API_KEY'], ENV['OPENTOK_API_SECRET']

  def self.create_or_load_session_id
    if Session.any?
      last_session = Session.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
    record = Session.new
    record.session_id = session.session_id
    record.save
    @session_id = session.session_id
    @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

Nous sommes maintenant prêts à construire nos méthodes de contrôle qui géreront les itinéraires de l'application.

Définition des méthodes du contrôleur

Le contrôleur Video aura une méthode pour chaque route, et quelques méthodes d'aide pour construire le site. La première méthode que nous allons construire permettra à toutes les méthodes suivantes d'accéder aux informations d'identification de l'API Video.

Ouvrez le fichier video_controller.rb dans /app/controllers et après la définition de la classe, ajoutez la méthode suivante :

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

Comme vous le verrez dans la Partie 2 de cette série, lorsque nous construirons le front-end de l'application, ces variables d'instance seront également essentielles pour transmettre les données du back-end au front-end du site.

Ensuite, nous allons créer une méthode pour chacune des routes de notre application :

def landing; end

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

def index; end

def chat; end

def screenshare
  @darkmode = 'dark'
end

Comme vous pouvez le voir ci-dessus, la méthode #name attribue la valeur de la variable @name provenant du formulaire de bienvenue de la page d'accueil. Elle fournit également une petite couche de contrôle pour l'application, en ne redirigeant le participant vers la page de Video Chat que si le mot de passe qu'il a fourni correspond à celui défini dans la variable d'environnement. Si le mot de passe ne correspond pas, le participant est redirigé vers la page d'accueil et invité à réessayer.

Le reste des méthodes sont des définitions vides, juste le minimum pour fournir à Rails les informations nécessaires à la recherche du modèle de vue correspondant au nom de l'action. La seule autre exception est la méthode #screenshare qui définit une variable d'instance @darkmode qui sera utilisée pour mettre le site en mode sombre lors du partage d'écran.

La méthode #name fait également référence à name_paramsqui exploite les paramètres forts de Rails. Nous devons créer une méthode privée appelée name_params qui définit précisément les paramètres que le formulaire de la page d'atterrissage doit inclure. C'est ce que nous allons faire maintenant :

private

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

Avec cette méthode privée, nous avons construit notre contrôleur. L'ensemble ressemblera à ce qui suit :

require 'opentok'

class VideoController < ApplicationController
  before_action :set_opentok_vars

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

  def landing; end

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

  def index; end

  def chat; end

  def screenshare
    @darkmode = 'dark'
  end

  private

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

Avant de continuer et de créer nos fichiers ERB pour nos vues, nous pouvons prendre un moment pour définir un fichier personnalisé YAML qui servira de source de vérité pour les informations sur le site.

Ces informations seront utilisées pour alimenter le site en données telles que le nom de la fête, le message de bienvenue, la langue et le sens de la langue du site, et bien d'autres choses encore. Le fait de rassembler ces informations en un seul endroit nous permettra de les modifier facilement à l'avenir sans avoir à modifier plusieurs fichiers.

Configuration personnalisée du site

L'endroit dans Rails où l'on peut placer des fichiers de configuration personnalisés est le dossier /config donc ajoutons un fichier site_info.yml à l'intérieur de ce dossier. Nous lirons les données de ce fichier pour créer le contexte de notre site, comme le nom du parti et la langue du site :

language: en
lang_direction: ltr
landing_page:
  welcome_message:
    text: 'Welcome to the Vonage Video Watch Party!'
  name_form:
    text: 'What is your name and the password for the party?' 
    name_placeholder_text: Your name here   
    password_placeholder_text: Password here
    submit_button_text: Submit
navbar:
  title:
    text: Vonage Video Watch Party 
text_chat:
  submit_button_text: Submit
  placeholder_text: 'Enter text here'

Des valeurs par défaut sont fournies dans l'exemple ci-dessus. N'hésitez pas à les modifier en fonction des besoins de votre application.

Pour pouvoir utiliser ces informations, nous devons les charger et les lire quelque part. Nous ajouterons plusieurs :before_action à l'application ApplicationController qui prendront en compte toutes ces informations et les rendront disponibles dans toute l'application.

Ouvrez le fichier application_controller.rb dans le répertoire /app/controllers et ajoutez ce qui suit :

class ApplicationController < ActionController::Base
  before_action :set_site_lang_options
  before_action :set_site_welcome_options
  before_action :set_welcome_form_options
  before_action :set_site_navbar_options
  before_action :set_site_chat_options
  CONFIG = YAML.load_file("#{Rails.root}/config/site_info.yml")

  def set_site_lang_options
    @lang = CONFIG['language']
    @lang_dir = CONFIG['lang_direction']
  end

  def set_site_welcome_options
    @welcome_message = CONFIG['landing_page']['welcome_message']['text']
  end

  def set_welcome_form_options
    @name_form_text = CONFIG['landing_page']['name_form']['text']
    @name_placeholder_text = CONFIG['landing_page']['name_form']['name_placeholder_text']
    @password_placeholder_text = CONFIG['landing_page']['name_form']['password_placeholder_text']
    @name_form_submit_button_text = CONFIG['landing_page']['name_form']['submit_button_text']
  end

  def set_site_navbar_options
    @navbar_title = CONFIG['navbar']['title']['text']
  end

  def set_site_chat_options
    @submit_button_text = CONFIG['text_chat']['submit_button_text']
    @chat_placeholder_text = CONFIG['text_chat']['placeholder_text']
  end
end

Désormais, les variables d'instance contenant les données du fichier site_info.yml sont disponibles pour être utilisées dans les fichiers de vue, que nous allons créer maintenant.

Création des vues

Définition de la structure de l'application

La première vue avec laquelle nous allons travailler est la présentation par défaut de l'application. Ce fichier se trouve à l'adresse /app/views/layouts/application.html.erb. À l'intérieur de la vue, nous allons ajouter les informations sur la langue de notre site, si nous voulons passer en mode sombre ou non, et également charger le script JS Video API :

<!DOCTYPE html>
<html lang="<%= @lang %>" dir="<%= @lang_dir %>">
  <head>
    <title>Video Watch Party</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
    <script type ="text/javascript">
      var api_key = '<%= @api_key %>';
      var api_secret = '<%= @api_secret %>';
      var session_id = '<%= @session_id %>';
    </script>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body class="<%= @darkmode if @darkmode %>">
    <%= yield %>
  </body>
</html>

Un point intéressant que vous aurez remarqué dans l'exemple ci-dessus est que nous avons également créé trois variables JavaScript à l'intérieur de la balise <script> . Nous avons passé les données de la variable d'instance Ruby correspondante à ces variables JavaScript nouvellement instanciées. De cette manière, nous avons commencé à faire parler notre backend à notre frontend.

Les autres fichiers de vue avec lesquels nous travaillerons seront les vues particulières de l'application : la page d'atterrissage, le chat vidéo et les vues de visionnage de vidéos. Avant de les construire, créons quelques partiels que nous utiliserons dans le reste des vues.

Définition des partiels

Les partiels sont un excellent moyen de réutiliser les composants ERB dans toute la structure de vue d'une application Rails. Au lieu de définir le même contenu plusieurs fois, nous pouvons le mettre dans un fichier et l'invoquer simplement chaque fois que nous voulons utiliser ce contenu. Cette application aura trois partiels ; un partiel pour l'en-tête, un partiel pour le texte du chat et un partiel pour l'icône du bouton du texte du chat.

Créer un fichier appelé _header.html.erb inside /app/viws/video/ et ajoutez-y ce qui suit :

<h1><%= @navbar_title %></h1>
<p id="participant-count"></p>
<button id="watch-mode">Watch Mode On/Off</button>

L'en-tête partiel lit les données de la variable d'instance @navbar_title pour fournir le nom de l'application. Vous remarquerez également une balise <p> vide dont l'identifiant est #participant-count. Elle sera remplie avec les données du JavaScript que nous créerons dans la partie 2 de cette série d'articles de blog. Enfin, l'en-tête comporte une balise <button> qui ne sera visible que par le modérateur et qui lui permet de passer de l'affichage du chat à celui du partage d'écran pour tous les participants.

Maintenant, créez un autre fichier appelé _button-chat.html.erb dans le même dossier et ajoutez ce qui suit :

<button class="btn-chat" id="showChat"><svg viewBox="0 0 512 512"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496"><path fill="white" d="M392 279.499v-172c0-26.467-21.533-48-48-48H48c-26.467 0-48 21.533-48 48v172c0 26.467 21.533 48 48 48h43.085l.919 43.339c.275 13.021 15.227 20.281 25.628 12.438l73.983-55.776H344c26.467-.001 48-21.534 48-48.001zm-205.74 16a16.003 16.003 0 00-9.632 3.224l-53.294 40.179-.588-27.741c-.185-8.702-7.292-15.661-15.996-15.661H48c-8.822 0-16-7.178-16-16v-172c0-8.822 7.178-16 16-16h296c8.822 0 16 7.178 16 16v172c0 8.822-7.178 16-16 16H186.26zm309.74-88v132c0 26.468-21.532 48-48 48h-43.153l-.852 33.408c-.222 8.694-7.347 15.592-15.994 15.592-6.385 0-2.83 1.107-82.856-49H232c-8.837 0-16-7.163-16-16s7.163-16 16-16c84.866 0 80.901-.898 86.231 2.438l54.489 34.117.534-20.964c.222-8.675 7.317-15.592 15.995-15.592H448c8.822 0 16-7.178 16-16v-132c0-8.822-7.178-16-16-16-8.837 0-16-7.163-16-16s7.163-16 16-16c26.468.001 48 21.533 48 48.001zm-200-43c0 8.837-7.163 16-16 16H112c-8.837 0-16-7.163-16-16s7.163-16 16-16h168c8.837 0 16 7.163 16 16zm-29 70c0 8.837-7.163 16-16 16H141c-8.837 0-16-7.163-16-16s7.163-16 16-16h110c8.837 0 16 7.163 16 16z"/></svg></button>

Le code HTML ci-dessus génère une icône de chat textuel sur laquelle les participants peuvent cliquer pour afficher ou masquer la boîte de dialogue textuelle.

Le dernier partiel est un fichier qui contiendra la zone de chat textuelle, y compris le formulaire pour soumettre de nouveaux messages de chat.

Créez un fichier appelé _chat.html.erb dans le même répertoire et son contenu ressemblera à ce qui suit :

<header class="chat-header">
  <h2>Chat</h2>
  <button class="btn-close" id="closeChat"><svg viewBox="0 0 47.971 47.971"><path fill="white" d="M28.228 23.986L47.092 5.122a2.998 2.998 0 000-4.242 2.998 2.998 0 00-4.242 0L23.986 19.744 5.121.88a2.998 2.998 0 00-4.242 0 2.998 2.998 0 000 4.242l18.865 18.864L.879 42.85a2.998 2.998 0 104.242 4.241l18.865-18.864L42.85 47.091c.586.586 1.354.879 2.121.879s1.535-.293 2.121-.879a2.998 2.998 0 000-4.242L28.228 23.986z"/></svg></button>
</header>
<div id="history" class="messages"></div>
<%= form_with(url: "/chat/send", method: "post") do %>
  <%= text_field_tag :message, nil, placeholder: @chat_placeholder_text %>
  <%= submit_tag(@submit_button_text) %>
<% end %>

Dans le _chat.html.erb vous verrez également une autre balise vide, cette fois une balise <div> avec l'identifiant #history. Tous les messages texte iront automatiquement dans cette zone en utilisant la fonctionnalité de message texte de l'API Video de Vonage dans l'API Signal. Nous en parlerons dans la Partie 2.

Définir la page d'atterrissage

La page d'atterrissage sera l'endroit que les participants rencontreront pour la première fois lorsqu'ils viendront sur l'application. Elle a pour but de demander aux participants leur nom et le mot de passe du parti pour entrer sur le site.

Créer un nouveau fichier à l'intérieur de /app/views/video appelé landing_html.erb et ajoutez ce qui suit :

<main>
  <div class="landing">
    <h1><%= @welcome_message %></h1>
    <p><%= @name_form_text %></p>
    <%= form_with(url: "/name", method: "post") do %>
      <%= text_field_tag 'name', nil, :placeholder => @name_placeholder_text %>
      <%= password_field_tag 'password', nil, :placeholder => @password_placeholder_text %>
      <%= submit_tag @name_form_submit_button_text %>
      <% flash.each do |type, msg| %>
        <p class="error"><%= msg %></p>
      <% end %>
    <% end %>
  </div>
</main>

Comme pour les partiels, la vue de la page d'atterrissage utilise les variables d'instance créées dans la vue de la page d'atterrissage pour générer le message de bienvenue et le texte du formulaire. ApplicationController pour générer le message de bienvenue et le texte du formulaire.

Définition de la vue du Video Chat

La vue du chat vidéo sera l'endroit où les participants discuteront entre eux à l'aide de leurs caméras vidéo et de leurs microphones. Cette vue, en plus de la vue de partage d'écran, constitue les deux parties essentielles de l'application.

Pour créer cette vue, créez un nouveau fichier dans le même répertoire, appelé index.html.erb avec ce qui suit à l'intérieur :

<script type ="text/javascript">
  var token = '<%= @token %>';
  var name = '<%= @name %>';
  var moderator_env_name = '<%= @moderator_name %>';

  // reload page to render with variables
  (function() {
    if(window.localStorage) {
      if(!localStorage.getItem('firstLoad')) {
        localStorage['firstLoad'] = true;
        window.location.reload();
    } else
      localStorage.removeItem('firstLoad');
    }
  })();
</script>

<header>
  <%= render partial: 'header' %>
</header>

<main class="app">
  <div class="videos">
    <div class="publisher" id="publisher"></div>
    <div class="subscriber" id="subscribers"></div> 
  </div>

  <aside class="chat">
    <%= render partial: 'chat' %>
  </aside>

  <%= render partial: 'button-chat' %>
</main>

Ce point de vue comporte plusieurs éléments qui méritent d'être mentionnés.

La première concerne ce qui se passe à l'intérieur des balises <script></script> . Comme pour la présentation de l'application, nous continuons à transmettre davantage de données au frontend du site sous la forme de nouvelles variables JavaScript. Séparément, afin de tirer parti de ces variables à l'intérieur du site après le chargement du JavaScript, nous ajoutons également une petite fonction pour recharger la page si c'est la première fois qu'elle est chargée dans le navigateur.

L'autre point que nous mentionnerons est que vous remarquerez que la plus grande partie de l'affichage consiste en des balises <div> vides. La raison en est que celles-ci seront remplies dynamiquement par les vidéos de l'API Video. Le JavaScript du front-end recherchera ces balises à l'aide de leur nom d'identification et ajoutera les vidéos de tous les participants à l'intérieur de l'élément #subscribers et ajoutera votre Video à l'élément #publisher à l'intérieur de l'élément.

Définition de la vue en partage d'écran

La dernière vue que nous devons créer pour l'application est celle du partage d'écran vidéo. Dans cette vue, les participants peuvent continuer à discuter via la boîte de dialogue textuelle, tout en regardant ensemble le même écran.

Cette vue ne devra fournir que les éléments <div> pour que l'API fournisse un éditeur, à savoir la vidéo en partage d'écran, et un flux audio. Un partage d'écran en lui-même n'inclut pas d'audio, ce qui rendrait difficile le visionnage d'une vidéo en commun. C'est pourquoi nous publierons également un flux audio provenant de l'ordinateur du modérateur pour accompagner le partage d'écran.

Ajoutez un fichier appelé screenshare.html.erb dans le même dossier avec ce qui suit :

<script type ="text/javascript">
  var token = '<%= @token %>';
  var name = '<%= @name %>';
  var moderator_env_name = '<%= @moderator_name %>';
  // reload page to render with variables
  (function() {
    if(window.localStorage) {
      if(!localStorage.getItem('screenshareFirstLoad')) {
        localStorage['screenshareFirstLoad'] = true;
        window.location.reload();
    } else
      localStorage.removeItem('screenshareFirstLoad');
    }
  })();
</script>

<header>
  <%= render partial: 'header' %>
</header>

<main class="app">
  <div class="videos">
    <div class="screenshare" id="screenshare"></div>
    <div class="audio" id="audio"></div> 
  </div>

  <aside class="chat">
    <%= render partial: 'chat' %>
  </aside>

  <%= render partial: 'button-chat' %>
</main>

À ce stade, le backend de notre application est prêt ! Félicitations, vous avez terminé la première partie de la création de la soirée de visionnage de vidéos.

Prochaines étapes

En Partie 2 de cette série d'articles de blog, nous construirons le frontend de l'application. Alors que le backend de l'application était principalement écrit en Ruby et utilisait le SDK Ruby de l'API Video de Vonage, le frontend sera écrit en JavaScript et utilisera le SDK JavaScript.

Le travail consistant à fournir les données dont le SDK JavaScript aura besoin a déjà été effectué dans le backend que nous avons créé. Nous devons maintenant créer les classes et les fonctions JavaScript qui utiliseront ces informations. Grâce aux avancées de Rails et à son incorporation de Webpack, il existe un processus clair pour incorporer JavaScript dans une application Rails, et nous allons suivre ces étapes.

Poursuivre avec Partie 2 de cette série d'articles de blog pour terminer la construction de l'application.