Erstellen einer Party mit Ruby on Rails und der Vonage Video API Teil 1

Mein Sohn feierte kürzlich seinen 9. Geburtstag, und wie viele Kinder in seinem Alter freute er sich schon seit Monaten auf seine Geburtstagsparty. Mitten in der Covid-19-Pandemie wussten wir, dass wir dieses Jahr etwas anderes machen mussten, also habe ich ihm eine Video-Watch-Party-App mit der Vonage Video API gebaut!

Auch Sie können Ihre eigene Video-Watch-Party-Anwendung mit der Vonage Video-API und Ruby on Rails erstellen, und ich werde Ihnen zeigen, wie. Diese zweiteilige Serie führt Sie durch die Schritte zur Erstellung einer vollständigen Rails-Anwendung. Der erste Teil konzentriert sich auf das Backend der Anwendung und der zweite Teil auf das Frontend.

tl;dr Wenn Sie das Ganze überspringen und direkt mit dem Einsatz beginnen möchten, können Sie finden Sie den gesamten Code für die Anwendung auf GitHub.

Was wird die App tun?

Bevor wir mit der Erstellung der Anwendung beginnen, sollten wir uns einen Moment Zeit nehmen, um zu besprechen, was sie tun wird.

Die App wird drei verschiedene Ansichten haben:

1. Eine Landing Page

2. Party-Video-Chat

3. Video-Watch-Party

Der Zugang zur App erfolgt über die Landing Page. Auf der Landing Page werden die Teilnehmer aufgefordert, ihren Namen und das Passwort für die Party anzugeben. Der Name wird verwendet, um sie im Textchat zu identifizieren. Das Passwort bietet eine kleine Sicherheitsebene für die App.

Nachdem die Teilnehmer ihren Namen und das korrekte Teilnehmerpasswort eingegeben haben, werden sie zur Ansicht "Videochat der Gruppe" weitergeleitet. In dieser Ansicht sehen und hören sich die Teilnehmer gegenseitig in einem Rasterformat. Es gibt auch die Möglichkeit, per Text zu chatten. In der Navigationsleiste wird die Anzahl der Teilnehmer in Echtzeit angezeigt. Der Moderator der Gruppe sieht außerdem einen Link zum Einschalten des Beobachtungsmodus ein-/ausschalten.

Sobald der Moderator den Überwachungsmodus aktiviert hat, werden alle Teilnehmer zur dritten und letzten Ansicht, der Videoüberwachungsparty, weitergeleitet. In dieser Ansicht teilt der Moderator seinen Bildschirm in der Mitte der Seite. Der Ton des Moderators wird außerdem in einem versteckten <div> so dass die Teilnehmer den Ton des freigegebenen Videos hören können. Der Text-Chat ist das Kommunikationsmittel in dieser Ansicht. Die Audio- und Video-Feeds aller Teilnehmer werden deaktiviert.

Der Moderator kann jederzeit zwischen den Modi Party-Videochat und Video-Watch-Party wechseln, indem er die Taste Beobachtungsmodus ein/aus in ihrer Navigationsleiste drücken.

Nun, da wir eine Vorstellung davon haben, was wir bauen werden, können wir mit dem Bau beginnen!

Voraussetzungen

Diese Anwendung erfordert Folgendes:

• Ruby on Rails v6.0+

• Ruby v2.5.8+

• Vonage Video API (ehemals TokBox OpenTok) Konto

Es ist kostenlos, ein Vonage Video API-Konto zu erstellen. Sie müssen dies tun, um Ihren API-Schlüssel und Ihr Geheimnis zu erhalten, die für die Funktionalität der App unerlässlich sind.

Vonage Video-API-Anmeldeinformationen

Nachdem Sie ein ein Konto mit der Vonage Video API erstellt habenerstellt haben, sehen Sie eine Dashboard-Oberfläche. Der erste Schritt zum Erhalt von API-Anmeldeinformationen besteht darin, ein neues Projekt zu erstellen.

• Wählen Sie die Option Neues Projekt erstellen in der linken Seitenleiste.

• Wählen Sie API wenn Sie gefragt werden, welche Art von Projekt Sie erstellen möchten

• Geben Sie einen beliebigen Namen für das Projekt an

• Wählen Sie die VP8 Codec-Option. (Einzelheiten über den Unterschied zwischen VP8 und H.264 finden Sie hier)

Sie haben nun Zugriff auf den API-Schlüssel und das Geheimnis Ihres Projekts. Bewahren Sie diese an einem sicheren Ort auf, wir werden sie bald verwenden.

Einrichtung

Starten Sie von Ihrem Terminal aus eine neue Rails-Anwendung, indem Sie Folgendes ausführen:

Wechseln Sie anschließend in das Projektverzeichnis und öffnen Sie das Projekt mit Ihrem bevorzugten Code-Editor.

Gem-Abhängigkeiten

Wir werden die Vonage Video API (ehemals TokBox OpenTok) Ruby SDK in die Gemfilehinzufügen, zusammen mit dem dotenv-rails gem, um Umgebungsvariablen zu verwalten:

gem 'opentok'
gem 'dotenv-rails'

Sobald das erledigt ist, können wir bundle install von der Kommandozeile aus ausführen, um unsere Abhängigkeiten zu installieren.

Erzeugung von Modellen

Als Nächstes werden wir ein Modell erstellen, das die Informationen der Videositzung enthält und bearbeitet. Führen Sie in der Befehlszeile Folgendes aus:

Dieser Befehl erstellt eine Modelldatei innerhalb von /app/models/ und eine Datenbankmigrationsdatei innerhalb von /db/migrate/. Öffnen wir die Datenbankmigrationsdatei in unserem Code-Editor. Wir müssen den Spalten Standardwerte hinzufügen, bevor wir sie migrieren.

Sie finden die Migrationsdatei im Ordner /db/migrate/ Ordner. Sie ist die einzige Datei in diesem Ordner und sieht ähnlich aus wie diese:

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

Wir wollen sicherstellen, dass die session_id niemals null ist und wir wollen auch sicherstellen, dass der expired boolescher Wert standardmäßig false ist. Um dies zu erreichen, ändern Sie Ihre Migrationsdatei, indem Sie , null: false und , default: false zu den :session_id und :expired Zeilen hinzufügen.

Sie können diese Datenbankmigration nun in das Schema übernehmen, indem Sie rake db:create von der Befehlszeile aus ausführen. Dieser Befehl erstellt die PostgreSQL-Datenbank und die sessions Tabelle mit den session_id und expired Spalten.

Definition von Routen

Für die Anwendung müssen die HTTP-Routen, auf die zugegriffen werden soll, definiert werden und auf die richtigen Controller-Methoden verweisen. Öffnen Sie die /config/routes.rb Datei und fügen Sie Folgendes hinzu:

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

Alle Routen verweisen auf Methoden innerhalb der VideoController. Im nächsten Schritt werden wir den Controller erstellen.

• Die GET Root-Route führt zu der #landing Aktion. Dies ist die Route für die Landing Page.

• Die Website GET /screenshare Route verweist auf die #screenshare Aktion. Dies ist die Route für die Ansicht der Überwachungsgruppe.

• Die Website GET /party Route zeigt auf die #index Aktion. Dies ist die Route für die Videochat-Ansicht.

• Die Website POST /name Route zeigt auf die #name Aktion. Dorthin sendet das Landing Page-Formular seine Daten.

• Die Website POST /chat/send Route zeigt auf die #chat Aktion. Dorthin werden die Text-Chat-Nachrichten gesendet.

In diesem Schritt erstellen wir schließlich die VideoController.

Controller-Erzeugung

Im nächsten Schritt werden wir Methoden für den Controller erstellen. In diesem letzten Installationsschritt erzeugen wir die Controller-Datei. Führen Sie in der Befehlszeile Folgendes aus:

Dadurch wird eine video_controller.rb Datei im Ordner /app/controllers/ mit leeren Methoden für jede der Aktionen, die wir im Befehl angegeben haben. Es wird auch die grundlegende Ansichtsstruktur für die Anwendung innerhalb von /app/views/video.

Erstellen des Modells und der Controller-Methoden

Nachdem nun alle notwendigen Dateistrukturen und Datenbankschemata erstellt worden sind, ist es an der Zeit, die Methoden für die Anwendung zu erstellen. Wir müssen sowohl im Video-Controller als auch im Sitzungsmodell Methoden erstellen. Beginnen wir zuerst mit dem Sitzungsmodell.

Definition der Modellmethoden

Jede Vonage Video-Sitzung hat eine eigene, eindeutige Sitzungs-ID. Diese Sitzungs-ID ermöglicht es verschiedenen Teilnehmern, demselben Video-Chat beizutreten. Außerdem erhält jeder Teilnehmer des Videochats eine token Token, das ihm die Teilnahme ermöglicht. Ein Token kann mit besonderen Berechtigungen versehen werden, z. B. mit Moderationsfunktionen.

In dem Session Modell werden wir drei Klassenmethoden erstellen, mit denen wir entweder eine neue Sitzungs-ID erstellen oder die vorherige laden und Token für jeden Teilnehmer generieren.

Die Methode Session#create_or_load_session_id Methode prüft, ob bereits eine Sitzungs-ID existiert. Wenn es eine ID gibt, wird sie diese verwenden. Wenn nicht, wird eine neue ID erzeugt. Sitzungs-IDs können ablaufen, aber für die Zwecke dieses Lehrgangs werden wir nur mit aktiven Sitzungs-IDs arbeiten:

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

Die obige Methode verweist auch auf eine zusätzliche Methode, die wir erstellen müssen und die Session#create_new_session die die Aufgabe hat, eine neue Sitzung zu erstellen, falls noch keine vorhanden ist:

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

Schließlich werden wir eine Methode erstellen, die jedem Teilnehmer das richtige Token zuweist:

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

Am Anfang der Modelldefinition müssen wir auch eine Instanz des Vonage Video API (früher bekannt als TokBox OpenTok) SDK instanziieren und sie einer Instanzvariablen zuweisen, um sie im gesamten Modell zu verwenden. Insgesamt wird die Datei wie folgt aussehen:

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

Wir sind nun bereit, unsere Controller-Methoden zu erstellen, die die Routen der App verwalten werden.

Definieren der Controller-Methoden

Die Video-Steuerung wird eine Methode für jede Route und einige Hilfsmethoden zum Aufbau der Website haben. Die erste Methode, die wir erstellen werden, wird allen nachfolgenden Methoden den Zugriff auf die Anmeldeinformationen der Video-API ermöglichen.

Öffnen Sie die video_controller.rb Datei in /app/controllers und fügen Sie nach der Klassendefinition die folgende Methode hinzu:

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

Wie Sie sehen werden Teil 2 dieser Serie sehen werden, wenn wir das Frontend der Anwendung erstellen, werden diese Instanzvariablen auch für die Übergabe der Daten vom Backend an das Frontend der Website entscheidend sein.

Als nächstes erstellen wir eine Methode für jede der Routen in unserer Anwendung:

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

Wie Sie oben sehen können, weist die #name Methode weist den Wert der @name Variable zu, die aus dem Willkommensformular der Landing Page stammt. Sie bietet auch eine kleine Kontrollebene für die Anwendung, indem sie den Teilnehmer nur dann auf die Videochatseite weiterleitet, wenn das angegebene Kennwort mit dem in der Umgebungsvariablen festgelegten übereinstimmt. Stimmt das Passwort nicht überein, wird der Teilnehmer auf die Landing Page umgeleitet und aufgefordert, es erneut zu versuchen.

Der Rest der Methoden sind leere Definitionen, nur das Minimum, um Rails mit den Informationen zu versorgen, um die Ansichtsvorlage zu suchen, die dem Namen der Aktion entspricht. Die einzige andere Ausnahme ist die #screenshare Methode, die eine @darkmode Instanzvariable setzt, die verwendet wird, um die Seite während der Screenshare-Ansicht in einen dunklen Modus zu versetzen.

Die #name Methode referenziert auch name_paramsdie die starken Parameter von Rails ausnutzt. Wir müssen eine private Methode namens name_params die genau definiert, welche Parameter das Formular auf der Landing Page enthalten soll. Lassen Sie uns das jetzt tun:

private

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

Mit dieser privaten Methode haben wir unseren Controller fertiggestellt. Alles zusammen wird wie folgt aussehen:

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

Bevor wir fortfahren und unsere ERB-Dateien für unsere Ansichten erstellen, können wir uns einen Moment Zeit nehmen und eine benutzerdefinierte YAML Datei definieren, die als Quelle der Wahrheit für Informationen über die Website dienen wird.

Diese Informationen werden verwendet, um Daten wie den Namen der Partei, die Begrüßungsnachricht, die Sprache und die Sprachrichtung der Website und vieles mehr auf der Website einzutragen. Wenn wir diese Informationen an einem einzigen Ort speichern, können wir sie in Zukunft leicht ändern, ohne mehrere Dateien ändern zu müssen.

Bereitstellung einer benutzerdefinierten Website-Konfiguration

Der Platz in Rails um benutzerdefinierte Konfigurationsdateien zu platzieren ist innerhalb des /config Ordner, also fügen wir dort eine site_info.yml Datei hinein. Wir werden die Daten aus dieser Datei lesen, um den Kontext für unsere Website zu erstellen, Dinge wie den Namen der Partei und die Sprache der Website:

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'

Im obigen Beispiel sind Standardwerte angegeben. Sie können diese nach Belieben bearbeiten und an die Bedürfnisse Ihrer Anwendung anpassen.

Um diese Informationen nutzen zu können, müssen wir sie irgendwo laden und lesen. Wir werden mehrere :before_action Einstellungen zu der ApplicationController hinzufügen, die alle diese Informationen aufnehmen und in der gesamten App verfügbar machen.

Öffnen Sie die application_controller.rb Datei im Verzeichnis /app/controllers Verzeichnis und fügen Sie Folgendes hinzu:

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

Jetzt sind diese Instanzvariablen, die die Daten aus der site_info.yml enthalten, zur Verwendung in den View-Dateien zur Verfügung, die wir jetzt erstellen werden.

Erstellen der Ansichten

Definieren des Anwendungslayouts

Die erste Ansicht, mit der wir arbeiten werden, ist das Standardlayout für die Anwendung. Diese Datei finden Sie unter /app/views/layouts/application.html.erb. Innerhalb der Ansicht fügen wir die Informationen über die Sprache unserer Website hinzu, ob wir in den dunklen Modus wechseln wollen oder nicht, und wir laden das Video API JS-Skript:

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

Ein interessanter Punkt, den Sie im obigen Beispiel bemerkt haben werden, ist, dass wir auch drei JavaScript-Variablen innerhalb des <script> Tag erstellt. Wir haben die entsprechenden Ruby-Instanzvariablendaten an diese neu instanziierten JavaScript-Variablen übergeben. Auf diese Weise haben wir begonnen, unser Backend mit unserem Frontend sprechen zu lassen.

Der Rest der Ansichtsdateien, mit denen wir arbeiten werden, sind die einzelnen Ansichten der App: die Landing Page, der Video-Chat und die Video-Watch-Ansicht. Bevor wir diese jedoch erstellen, sollten wir einige Teilbereiche erstellen, die wir in den restlichen Ansichten verwenden werden.

Definieren der Partials

Partials sind eine großartige Möglichkeit, ERB-Komponenten in der gesamten View-Struktur einer Rails-Anwendung wiederzuverwenden. Anstatt denselben Inhalt mehrfach zu definieren, können wir ihn in einer Datei ablegen und diese Datei einfach aufrufen, wenn wir diesen Inhalt verwenden wollen. Diese Anwendung wird drei Partials haben: ein Partial für die Kopfzeile, ein Partial für den Text-Chat und ein Partial für das Symbol der Text-Chat-Schaltfläche.

Erstellen Sie eine Datei namens _header.html.erb innerhalb von /app/viws/video/ und fügen Sie den folgenden Text hinzu:

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

Der Teilkopf liest die Daten aus der @navbar_title Instanzvariable, um den Namen der Anwendung bereitzustellen. Sie werden auch ein leeres <p> Tag mit einer id von #participant-count. Dieser wird mit Daten aus dem JavaScript gefüllt, das wir in Teil 2 dieser Blogbeitragsreihe erstellen werden. Schließlich hat die Kopfzeile ein <button> Tag, der nur für den Moderator sichtbar ist und es ihm ermöglicht, zwischen Chat- und Screenshare-Ansicht für alle Teilnehmer zu wechseln.

Erstellen Sie nun eine weitere Datei namens _button-chat.html.erb in demselben Ordner und fügen Sie Folgendes hinzu:

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

Der obige HTML-Code erzeugt ein Text-Chat-Symbol, auf das die Teilnehmer klicken können, um das Text-Chatfeld ein- oder auszublenden.

Der letzte Teil ist eine Datei, die den Text-Chat-Bereich enthält, einschließlich des Formulars zum Senden neuer Chat-Nachrichten.

Erstellen Sie eine Datei namens _chat.html.erb im gleichen Verzeichnis, deren Inhalt wie folgt aussieht:

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

In dem _chat.html.erb sehen Sie auch ein weiteres leeres Tag, diesmal ein <div> mit der Id von #history. Alle Textnachrichten werden automatisch in diesen Bereich übertragen, indem die Textnachrichtenfunktion der Vonage Video API innerhalb der Signal API verwendet wird. Wir werden das in Teil 2.

Definieren der Landing Page

Die Landing Page ist die Seite, auf die die Teilnehmer zuerst stoßen, wenn sie die Anwendung aufrufen. Sie dient dazu, die Teilnehmer nach ihrem Namen und dem Parteipasswort für den Zugang zur Website zu fragen.

Landing Page View

Erstellen Sie eine neue Datei innerhalb von /app/views/video mit dem Namen landing_html.erb und fügen Sie das Folgende hinzu:

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

Ähnlich wie die Teilbereiche nutzt die Landing Page View die Instanzvariablen, die in der ApplicationController erstellten Instanzvariablen, um die Willkommensnachricht und den Text für das Formular zu generieren.

Definieren der Video-Chat-Ansicht

Die Videochat-Ansicht ist der Ort, an dem die Teilnehmer mit ihren Videokameras und Mikrofonen miteinander chatten. Diese Ansicht ist neben der Screenshare-Ansicht der wichtigste Teil der Anwendung.

Video Chat Page View

Um diese Ansicht zu erstellen, erstellen Sie eine weitere neue Datei im gleichen Verzeichnis mit dem Namen index.html.erb mit folgendem Inhalt:

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

Diese Ansicht hat mehrere erwähnenswerte Komponenten.

Der erste ist das, was innerhalb der <script></script> Tags. Ähnlich wie beim Anwendungslayout werden auch hier weitere Daten in Form von neuen JavaScript-Variablen an das Frontend der Website übergeben. Um die Vorteile dieser Variablen innerhalb der Website nach dem Laden des JavaScript zu nutzen, fügen wir außerdem eine kleine Funktion zum Neuladen der Seite hinzu, wenn sie zum ersten Mal im Browser geladen wird.

Der andere Bereich, den wir erwähnen wollen, ist, dass der größte Teil der Ansicht aus leeren <div> Tags besteht. Der Grund dafür ist, dass diese dynamisch mit den Videos aus der Video-API gefüllt werden. Das Frontend-JavaScript sucht diese Tags anhand ihrer ID-Namen aus und fügt die Videos aller Teilnehmer innerhalb des #subscribers Element und fügt Ihr Video in das #publisher Element hinzu.

Definieren der Screenshare-Ansicht

Die letzte Ansicht, die wir für die Anwendung erstellen müssen, ist die Ansicht für die Video-Screenshare. In dieser Ansicht können die Teilnehmer über das Text-Chatfeld weiter chatten, während sie alle gemeinsam denselben Bildschirm sehen.

Screenshare View

Diese Ansicht muss nur die <div> Elemente für die API bereitstellen, um einen Publisher, nämlich das Screensharing-Video, und einen Audio-Feed zu liefern. Eine Bildschirmfreigabe an sich enthält keinen Ton, was es schwierig machen würde, ein Video gemeinsam anzusehen. Aus diesem Grund werden wir auch einen Audio-Feed vom Computer des Moderators veröffentlichen, um die Bildschirmfreigabe zu begleiten.

Fügen Sie eine Datei namens screenshare.html.erb in demselben Ordner mit folgendem Inhalt hinzu:

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

An diesem Punkt ist das Backend unserer App fertig! Glückwunsch, Sie haben Teil 1 der Erstellung der Video Watch Party abgeschlossen.

Nächste Schritte

Unter Teil 2 dieser Blogpost-Serie werden wir das Frontend der Anwendung erstellen. Während das Backend der Anwendung hauptsächlich in Ruby geschrieben wurde und das Vonage Video API Ruby SDK nutzte, wird das Frontend in JavaScript geschrieben sein und das JavaScript SDK nutzen.

Die Bereitstellung der Daten, die das JavaScript-SDK benötigt, ist bereits in dem von uns erstellten Backend erfolgt. Jetzt müssen wir die JavaScript-Klassen und -Funktionen erstellen, die mit diesen Informationen arbeiten. Dank der Fortschritte in Rails und der Integration von Webpack gibt es einen klaren Prozess für die Einbindung von JavaScript in eine Rails-Anwendung, und wir werden diesen Schritten folgen.

Weiter zu Teil 2 dieser Blogpost-Serie, um die Erstellung der Anwendung abzuschließen.