Vonage Video Express mit Ruby on Rails Teil 1

Seit 2004 ist Ruby on Rails bei Entwicklern und vor allem bei Startup-Gründern sehr beliebt, weil sich damit schnell umfassende Webanwendungen erstellen lassen. Kerry Doyle hat die "Convention Over Configuration"-Philosophie, die Ruby on Rails zugrunde liegt, perfekt auf den Punkt gebracht: "Es wird versucht, die Anzahl der Entscheidungen, die ein Entwickler, der das Framework verwendet, treffen muss, zu verringern, ohne dabei zwangsläufig die Flexibilität und die DRY-Prinzipien (Don't repeat yourself) zu verlieren". Diese Philosophie macht Rails ideal für das LEAN Gedanke.

Letztes Jahr veröffentlichte Vonage Video Express. Diese Javascript-Bibliothek, die auf der Vonage-eigenen Video API aufbaut, ist wie eine "Convention Over Configuration"-Erweiterung, die den Aufbau von Video Call Applications einfacher und schneller macht. Jeder Entwickler kann jetzt leistungsstarke, robuste Video-Meetings erstellen, ohne alle Details zu kennen.

In diesem Tutorial zeige ich Ihnen, wie Sie diese leistungsstarken Technologien kombinieren können, um eine moderne Fullstack-Anwendung mit allen Videokonferenzfunktionen zu erstellen, die Benutzer erwarten. Ich verwende Ruby on Rails, Vonage Video Express und das neue UI-Toolkit von Vonage Lebendig.

Dieser Beitrag ist inspiriert von Erstellen einer Party mit Ruby on Rails und der Vonage Video API. Ich werde die Funktionalität dieses Beitrags weitgehend nachbilden, und im Nachhinein können Sie sehen, dass viel weniger Code erforderlich war!

Was die App macht

Im Jahr 2020 hat Ben Greenberg eine App entwickelt, mit der sein Sohn Filme mit seinen Freunden ansehen kann. Diese App wird im Wesentlichen dasselbe sein. Nur schaue ich keine Filme online mit Freunden. Aber seit ich am anderen Ende der Welt wohne, ist es schwer, Fans meines Lieblingseishockeyteams, der Blues, zu finden. Anstatt also mit meinen Freunden Filme zu schauen, würde ich gerne die Blues oder Sport im Allgemeinen mit Freunden aus der Heimat sehen. Funktional ist die App gleich und lehnt sich stark an Bens Film-App an. Das macht es einfach, die Vor- und Nachteile der Verwendung von Video Express und der nativen Vonage Video API zu vergleichen.

Diese App wird zwei Seiten haben: eine Landing Page mit einem Anmeldeformular und eine "Party"-Seite. Wenn die Nutzer sich anmelden, werden sie in eine "Chill Zone" gebracht, wo sie in gleicher Größe angezeigt werden. Wenn das Spiel beginnt, löst der "Moderator", der die Sitzung leitet, eine Bildschirmfreigabe aus, um das Spiel anzuzeigen. Im "Zuschauermodus" dominiert der gemeinsame Bildschirm des Moderators und nimmt den größten Teil des Videoanrufs ein. Da das Beste am Sportschauen mit Freunden das Geplänkel ist, kann ich die anderen Teilnehmer immer noch sehen und hören. Aber wenn meine Freunde zu laut sind, möchte ich die Möglichkeit haben, sie stumm zu schalten. Wir werden den Teilnehmern auch die Möglichkeit geben, sich selbst stumm zu schalten, ihre Videokamera auszuschalten und ihre Video-/Audioeingänge und -ausgänge auszuwählen.

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

Im ersten Teil werden wir die Rails-Anwendung unter Verwendung einiger Vivid-Komponenten entwickeln und Video Express zum Laufen bringen. Im zweiten Teil werden wir die nächste Stufe erreichen, indem wir Komponenten entwickeln, die die Video Express-Funktionalität mit Vivid UI kombinieren.

Yalla! Los geht's!

Anforderungen

• ruby v3.0.0+

• Rails v6.1.6+

• Vonage Video API

• Vonage Video Express v1.2.3+

• Vivid v2.34.0+

Vonage Video API-Einrichtung

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 Funktion der App unerlässlich sind.

Berechtigungsnachweise

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.

• Öffnen Sie die Projekte in der linken Seitenleiste.

• Klicken Sie auf die Schaltfläche Neues Projekt erstellen Option.

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

• Geben Sie einen beliebigen Namen für den Projektnamen an

• Wählen Sie die Option VP8-Codec. (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.

Video Express einschalten

Um Video Express nutzen zu können, müssen Sie das Video Express Add-on für Ihren Account aktivieren.

• Gehen Sie zu Ihrem Video API Account und klicken Sie auf Account-Einstellungen im Menü auf der linken Seite.

• In der Liste der Account-Erweiterungenfinden Sie Video Express und klicken Sie auf Zum Account hinzufügen. Folgen Sie dann den weiteren Anweisungen, um das Add-on zu aktivieren.

Einrichten der Rails-App

Bevor wir die Magie des Frontends mit Video Express und Vivid hinzufügen können, müssen wir ein wenig Arbeit leisten, um unsere Rails-App zu erstellen und mit der Vonage Video API im Backend zu arbeiten.

Einrichtung

Erstellen Sie eine neue Rails-App mit postgresql als Datenbank.

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

Ziehen Sie in das Projekt ein: cd video-express-rails

Öffnen Sie nun das Projekt mit Ihrem bevorzugten Texteditor.

Gem-Abhängigkeiten

Wir müssen zwei Edelsteine hinzufügen: Vonage Video API Ruby SDK (früher bekannt als OpenTok) und dotenv-rails um unsere Umgebungsvariablen zu verwalten.

Öffnen Sie die Gemfile und fügen Sie die Edelsteine hinzu:

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.

Javascript-Bibliotheken

Wir werden zwei Javascript-Bibliotheken im Front-End verwenden: Video Express und Vivid. Bevor wir sie verwenden, sollten wir ein wenig mehr über sie erfahren.

Video-Express

Ich habe versprochen, dass Video Express das Leben eines Entwicklers einfacher macht, aber wie? In erster Linie auf zwei Arten: Leistung und Entwurf.

Leistung

Video Express'. Qualitätsmanager optimiert kontinuierlich die Stream-Auflösung, die Framerate und die Rendering-Größen. Dies ist sehr wichtig, da die Anzahl der Streams in einer klassischen Videokonferenzsitzung quadratisch schnell wächst! Zum Beispiel erzeugen 2 Personen in einem Videoanruf 1 Stream. 6 Personen in einem Videoanruf erzeugen 36 Streams. Aber 25 Personen in einem Videoanruf bedeuten, dass 625 Streams gleichzeitig aktiv sind!

Der Qualitätsmanager aktualisiert und verringert die Auflösung, wenn Netzwerke und CPUs dies zulassen, hält nicht sichtbare Videoströme und stummgeschaltete Audioströme an und fordert kleinere Videoströme von Medienservern an, wenn die angezeigten Videos kleiner werden.

Dies kann zu folgenden Ergebnissen führen 60% verringerte Bandwith Nutzung für 10 Teilnehmer-Sitzungen und 80% verringerte Bandwith Nutzung bei 25 Teilnehmersitzungen!

Gestaltung

Seit den Anfängen von COVID hat sich die Welt mit Videokonferenzen vertraut gemacht. Jeder weiß inzwischen mehr oder weniger, was er von einer Videokonferenz erwarten kann, und für die meisten Applikationen muss das Rad nicht neu erfunden werden. Video Express übernimmt die schwere Arbeit mit seinem Layout-Manager und Erlebnis-Manager.

Der Layout-Manager steuert die Reaktionsfähigkeit des Videoanrufs und passt die Videofenster automatisch an, wenn die Teilnehmer die Sitzung verlassen, ihr beitreten oder einen Screenshare durchführen, und optimiert die Videoauflösungen und Bildraten auf der Grundlage der Renderinggröße.

Der Experience Manager legt die Priorität der Sprecher dynamisch fest und schaltet die Teilnehmer bei größeren Meetings automatisch stumm.

All dies bedeutet, dass Video Express über eine Vielzahl von Funktionen verfügt, die nur noch mit einer Benutzeroberfläche verbunden werden müssen. Video Express bietet Ihnen all diese Funktionen sofort nach dem Auspacken:

• Erkennung von Benutzeraktionen wie Beitritt/Austritt, Aktivierung der Kamera/Audio

• Verschiedene Layout-Optionen: Raster vs. aktiver Lautsprecher

• Aktive Lautsprechererkennung

• Wechsel der verwendeten Kamera und des Mikrofons

• Einstellen des Audioausgabegeräts

• Erstellen eines Vorschauverlags

• Zugriff auf die Audio-/Videodaten des Herausgebers der Bildschirmfreigabe

• Erkennen, wenn andere Clients Streams zur Bildschirmfreigabe veröffentlichen

• Aktivieren und Deaktivieren der Audio- und Videofunktionen eines Teilnehmers für die Bildschirmfreigabe

Lebendig

Wie ich schon sagte, hat Video Express die gesamte Front-End-Funktionalität eingebaut, es braucht nur noch einen Entwickler, der eine Benutzeroberfläche für den Endbenutzer erstellt. Vonage macht das! Wir haben ein großartiges UI-Toolkit namens Vivid entwickelt, mit dem sich Anwendungen mit Kommunikationsfunktionen viel schneller erstellen lassen.

Vivid ist mit Web Components aufgebaut, so dass sie in jedem Framework oder sogar in Vanilla HTML/JS wie Rails funktionieren. Und sie sehen großartig aus! Und sie sind webfähig!

Erfahren Sie mehr über Vivid

Lebendige Installation

Installieren wir Vivid und legen los:

yarn add @vonage/vivid

Erzeugung von Modellen

Als Nächstes erstellen wir ein Modell, das die Informationen der Watch Party enthält und bearbeitet. Dadurch wird auch eine zugehörige watch_parties Tabelle in unserer Datenbank. Um zwei Benutzer mit demselben Videoanruf zu verbinden, müssen wir der Vonage Video API die session_id. Führen Sie in der Befehlszeile Folgendes aus:

rails g model WatchParty session_id:string

Bevor wir die Migration durchführen, um diese Spalte in unserer Datenbank zu erstellen, müssen wir sie in der Migration aktualisieren, um sicherzustellen, dass Sitzungen nicht standardmäßig auf null gesetzt werden, wenn sie abgerufen werden müssen.

Öffnen Sie das db/migrate Verzeichnis und suchen Sie die Datei mit dem Namen: 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

Sie können diese Datenbankmigration nun in das Schema übernehmen, indem Sie den Befehl run aus der Befehlszeile ausführen:

rails db:create db:migrate

Dieser Befehl erstellt die PostgreSQL-Datenbank und die Tabelle sessions mit der Spalte session_id.

Erstellen der Klassenmethoden

Implementieren wir nun unsere Watch-Party-Logik, die die Vonage Video API verwendet, um Benutzer mit einer Videoanrufsitzung zu verbinden.

Jede Vonage Video-Sitzung hat eine eigene, eindeutige Sitzungs-ID. Diese Sitzungs-ID ermöglicht es verschiedenen Teilnehmern, demselben Video-Chat beizutreten. Außerdem benötigt jeder Teilnehmer des Video-Chats ein Token das ihm die Teilnahme ermöglicht. Einem Token können spezielle Berechtigungen, wie z. B. Moderationsfunktionen, zugewiesen werden.

Im Sitzungsmodell 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.

Erfahren Sie mehr über Vonage Video API-Sitzungen.

Öffnen Sie app/models/watch_party.rb

Zunächst müssen wir auf unsere Vonage Video API-Funktionalität zugreifen, indem wir eine Instanz des OpenTok Ruby SDK instanziieren. Wir übergeben unseren API_KEY und API_SECRET aus dem obigen Abschnitt "Credentials" über ENV-Umgebungsvariablen

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

Jetzt können wir diese Klassenmethoden hinzufügen. Die Methode Session#create_or_load_session_id prüft, ob bereits eine Session-ID vorhanden ist. Wenn eine ID vorhanden ist, wird sie diese verwenden. Wenn nicht, wird eine neue ID erzeugt.

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

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

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

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

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

Ihr vollständiges WatchParty-Modell sollte wie folgt aussehen:

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

Setzen unserer ENV-Variablen

Wir haben gesehen, dass unsere Video API Logik die Verwendung einiger geheimer Umgebungsvariablen erfordert. Lassen Sie uns diese jetzt setzen.

Erstellen Sie die .env Datei aus dem Stammverzeichnis des video-express Projekts:

touch .env

Darin definieren wir unsere ENV-Variablen:

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

Hier müssen Sie Ihre Video API-Anmeldeinformationen von oben hinzufügen. In einer echten App würden Sie Informationen über Moderatoren und Passwörter für die Überwachungsgruppe in Ihrer Datenbank speichern wollen, aber für diese Demo reicht die Speicherung in einer ENV-Variable aus!

Vergessen Sie nicht, ein MODERATOR_NAME und PARTY_PASSWORDauf der Anmeldeseite zu verwenden.

Festlegen der Routen

Der Benutzer wird zwei Seiten sehen: Home und Party. Aber wir müssen auch die Informationen aus dem Anmeldeformular abfangen, um zu überprüfen, ob das Passwort korrekt ist und ob der Benutzer der Moderator ist. Wir werden also zwei Get-Anfragen und einen Post erstellen:

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

Den Controller erstellen

Mit Rails "Convention over Configuration" wissen wir bereits, welche Aktionen wir für unseren Controller benötigen, genau wie die Routen!

Erzeugen Sie über die Kommandozeile den WatchParty-Controller mit Home-, Login- und Party-Aktionen.

rails g controller WatchParty home login party

• Der Rails-Generator erzeugt einige zusätzliche Dinge, die wir nicht wollen. Löschen Sie also jetzt die Routen, die er in app/config/routes.rb. Und löschen Sie die Login-View-Datei vollständig; app/views/watch_party/login.html.erb

Wenn die Hauptkonfiguration und -einrichtung abgeschlossen ist, gehe ich gerne ein Aktions-/Ansichtspaar nach dem anderen durch, bis ich eine Anwendung abgeschlossen habe.

Aufbau der Homepage

Die Homepage, die wir erstellen wollen, wird wie folgt aussehen:

Watch Party Home Page

Wenn wir uns die Vivid-Dokumentation ansehen, sehen wir, dass wir alle Komponenten haben, die wir brauchen:

• Karte

• Text

• Formulare

• Buttons

Mit ein bisschen Rails-Magie und etwas Vivid-Magie haben wir also alles, was wir brauchen. Es gibt hier nur zwei knifflige Dinge. Erstens: Sie werden feststellen, dass Karten in Vivid Titel und Untertitel haben können. Warum müssen wir also die Komponente vwc-text verwenden? Weil Vivid in seinen Webkomponenten Slots verwendet, und wenn wir die slot="main" um Inhalte in der Karte zu haben, überschreibt dies die Slots des Titels und Untertitels.

Zweitens hilft uns das Formular nicht dabei, die Daten tatsächlich an den Server zu übergeben. Wir müssen also den Rails-Helper verwenden form_with. Alles in allem sieht es so aus:

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

Wenn wir nun unseren Server laufen lassen, sollten wir eine schöne Homepage wie auf dem Bild haben, oder? Also probieren Sie es aus! Führen Sie rails s von Ihrer Kommandozeile aus und öffnen Sie localhost:3000 in Ihrem Browser.

Oh nein, das funktioniert nicht!

Denn obwohl wir Vivid in unserem Projekt haben, haben wir es nicht wirklich in den Code importiert, um es zu verwenden. Das werden wir jetzt in unserem Javascript nachholen. In app/javascript/packs/application.js fügen Sie diese Zeile unter import "channels:

import '@vonage/vivid';

Wenn Sie die Seite jetzt öffnen, funktioniert sie. Aber sie ist immer noch ziemlich hässlich. Also lassen Sie uns die Seite umgestalten. In app/assets/stylesheets/watch_party.scss fügen wir etwas css hinzu:

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

Bevor wir weitermachen, fügen wir den schönen Vonage-Hintergrund in app/assets/stylesheets/application.scss

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

Definieren des Logins

Wir haben ein Formular, aber wir wollen sicherstellen, dass nur echte Fans, also unsere Freunde, an unserer Watch Party teilnehmen können! Also werden wir einige Rails Strong Parameters Logik hinzufügen, um die name und password aus den Parametern, die im Formular auf der Homepage gesendet werden, abzufangen.

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

Erfolgreiche Anmeldungen leiten auf die Seite party_path. Dieser Pfad führt die Nutzer zur Partyseite, dem Herzstück der App, in dem sich unser Video Express-Raum befindet. Lasst uns bauen!

Die Party-Seite aufbauen

Werfen wir zunächst einen Blick auf das, was wir bauen. Dies ist die Party-Seite im "Chill-Modus" als Nicht-Moderator. Aber für Teil 1 werden wir uns nicht um die Kopfzeile oder die Symbolleisten-Komponenten kümmern, so dass wir eigentlich nur noch den Video-Chat ausbauen müssen.

Party Page: Chill Mode, Non Moderator

Beginnen wir mit dem Grundgerüst der Seite, dem HTML. Wir haben 3 Komponenten: eine Kopfzeile, den Videoaufruf und eine Symbolleiste. Aber für den Moment lassen wir einfach Kommentare da, wo die header und toolbar hingehen werden: Fügen Sie dies zu Ihrem 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>

Jetzt müssen wir auf der Party-Seite nur noch unseren Videoanruf mit Video Express hinzufügen. Lassen Sie uns das jetzt aufbauen.

Einen Raum mit Video Express aufbauen

Die Vonage Video API gibt Entwicklern die volle Kontrolle über die Anpassung des Videolayouts durch Manipulation publisher und subscriber Elemente. In Video Express werden diese durch das Konzept eines room. Das Hinzufügen ist so einfach wie 1, 2, 3.

1. Binden Sie die Bibliothek ein. Fügen Sie dieses Skript an den Anfang der Datei: <script src="https://static.opentok.com/v1/js/video-express.js"></script>

2. Starten Sie nun die Erstellung des Raums mit dem Beispielcode aus der Video Express-Dokumentation. Beachten Sie, dass wir den zusätzlichen Parameter participantName. Video Express ist leichtgewichtig, bietet aber einige Optionen, lesen Sie die Dokumentation!

<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. Wir können sehen, dass der roomContainer nach dem Einstiegspunkt in der html-Datei sucht, an dem er den Raum einklinken und einbetten kann. Also müssen wir ein Element mit einer id von roomContainter.

Der endgültige Code der party.html.erb sieht wie folgt aus:

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

Jetzt sollten wir also in der Lage sein, unseren Server laufen zu lassen und eine schöne Seite für Videoanrufe zu sehen, richtig? Sie sollten wissen, dass die Antwort "nein" lautet 😆. Was fehlt uns noch? Nun, wir haben nichts von der OpenTok-Logik aus der Video API verwendet, um an Video Express zu senden.

Wir müssen also unsere OpenTok-Variablen in der WatchParty Controller setzen und sie an unser Frontend weitergeben.

Im WatchParty Controller müssen wir die set_opentok_vars Aktion"

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

Wir verwenden die before_action die die Methode aufruft, bevor wir die party Aktion aufruft. Der vollständige Controller sieht also so aus:

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

Wenn wir jetzt aktualisieren... sehen wir, dass sich die Kamera einschaltet und der Ton ganz komisch wird. Aber auf dem Bildschirm wird nichts angezeigt. Warum?! Video Express funktioniert und wir sind über die Video API mit einer Videositzung verbunden. Aber wir haben dem Video-Bildschirm keinen Platz gegeben, um zu existieren!

Fügen wir nun einige CSS aus der Video Express Boilerplate für den Videobildschirm hinzu. Wir zielen auf den #roomContainer und geben ihm die volle Breite und Höhe, abzüglich der Kopfzeile. Wir fügen auch ein wenig CSS hinzu, um Video Express mitzuteilen, wo die lokale Selbstansicht und die Bildschirmfreigabe platziert werden sollen, wenn sie ausgelöst wird.

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

Bumm! Jetzt haben wir eine Video-Sitzung. Versuchen Sie, von mehreren Registerkarten/unter verschiedenen Namen zu verbinden. Bumm! Sie haben Videokonferenzen in Rails!

Nächste Schritte

In Teil 2 werden wir einige der Funktionen hinzufügen, die Sie bei modernen Videokonferenzen erwarten:

• Screensharing: wird so eingeschränkt, dass nur unser Moderator es nutzen kann

• Alle anderen Teilnehmer stumm schalten

• Sich selbst stummschalten

• Verstecken Sie sich (schalten Sie die Kamera aus)

• Eingänge auswählen: Mikrofon und Kamera

• Audioausgang auswählen

Dazu fügen wir weitere Vivid-Komponenten und Video Express Javascript hinzu.

Wenn Sie so weit gekommen sind, gute Arbeit! Melden Sie sich bei mir auf Twitter und lass mich wissen, wie du das Tutorial findest.