Ruby on Railsを使ったVonage Video Express Part 1

2004年以来、Ruby on Railsは、本格的なウェブアプリケーションを素早く構築できることから、開発者や特に新興企業の創業者たちに愛されてきた。 ケリー・ドイルは、Ruby on Railsを支える「Convention Over Configuration」哲学を完璧に要約している。「柔軟性とDRY（Don't Repeat yourself）の原則を必ずしも失うことなく、フレームワークを使用する開発者が行う必要のある決定の数を減らそうとしています」。この哲学により、Railsは LEANマインドに最適です。

Vonageは昨年 Video Express.このJavascriptライブラリはVonageの Video APIは、Video通話アプリケーションの構築プロセスをより簡単かつ迅速にするための "Convention Over Configuration "エクステンションのようなものです。開発者であれば誰でも、すべてのコツとボルトを知らなくても、強力で堅牢な Video ミーティングを立ち上げることができます。

このチュートリアルでは、これらの強力な技術を組み合わせて、ユーザーが期待するすべてのビデオ会議機能を備えた最新のフルスタック・アプリケーションを構築する方法を紹介します。Ruby on Rails、Vonage Video Express、Vonage の新しい UI Toolkit を使用します。 Vivid.

この投稿は Ruby on RailsとVonage Video APIでパーティを作る.その投稿の機能をほぼ再現し、その後、必要なコードがかなり少なくなっていることがわかるでしょう！

アプリの機能

2020年、ベン・グリーンバーグは息子が友達と映画を見るためのアプリを作った。このアプリも本質的には同じだろう。ただ、私はオンラインで友人と映画を見ることはない。しかし、世界中に引っ越して以来、私の好きなアイスホッケーチーム、ブルースのファンを見つけるのは難しい。だから、友達と映画を観る代わりに、母国の友達とブルースやスポーツ全般を観たいんだ。機能的には同じで、ベンの映画アプリを大きく借りている。これで、Video Expressを使う場合と、ネイティブのVonage Video APIで書く場合の長所／短所を簡単に比較できるようになる。

このアプリには2つのページがあります：ログインフォームのあるランディングページと "パーティー "ページです。ログインすると、ユーザーはたむろするための「チルゾーン」に連れて行かれ、そこで等倍で表示される。そして、ゲームが始まると、セッションのオーナーである「モデレーター」がスクリーンシェアをトリガーしてゲームを表示する。観戦モード」では、モデレーターの共有画面が支配的となり、ビデオ通話の大半を占めることになる。友人たちとのスポーツ観戦の醍醐味は雑談なので、私は他の参加者を見たり聞いたりすることはできる。しかし、友人がうるさすぎる場合は、やはりミュートできるようにしたい。また、参加者自身がミュートをしたり、ビデオカメラをオフにしたり、ビデオ/オーディオの入出力を選択したりできるようにします。

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

前編では、いくつかの Vivid コンポーネントを使用して Rails アプリを構築し、Video Express を実行できるようにします。後編では、Video Express の機能と Vivid UI を組み合わせたコンポーネントを構築することで、次のレベルに進みます。

ヤラ！行くぞ

必要条件

• ルビー v3.0.0+

• Rails v6.1.6+

• ビデオAPI

• Vonage Video Express v1.2.3以上

• ビビッド v2.34.0+

Video APIセットアップ

Video APIアカウントを作成するのは無料です。アプリを機能させるために不可欠なAPIキーとシークレットを取得するために必要です。

資格証明書

以下の手順で Video APIでアカウントを作成するとでアカウントを作成すると、ダッシュボード・インターフェースが表示されます。API認証情報を取得する最初のステップは、新しいプロジェクトを作成することです。

• プロジェクトを開く プロジェクトタブを開きます。

• をクリックします。 新規プロジェクトの作成オプションをクリックします。

• 選択 ビデオAPIを選択してください； カスタムプロジェクトの作成

• プロジェクト名に任意の名前を記入

• VP8コーデックのオプションを選択します。(VP8とH.264の違いの詳細は こちら)

• これでプロジェクトのAPIキーとシークレットにアクセスできるようになりました。安全な場所に保管してください。

Video Expressを有効にする

Video Expressを使用するには、アカウントのVideo Expressアドオンを有効にしてください。

• あなたの Video API Accountにアクセスします。にアクセスし アカウント設定をクリックします。

• アカウントアドオン Accountアドオンを見つけ Video Expressを見つけ アカウントに追加.その後、残りの指示に従ってアドオンを有効にします。

Railsアプリのセットアップ

Video Express と Vivid でフロントエンドのマジックを追加する前に、Rails アプリを作成し、バックエンドで Vonage Video API を実行するために少し作業する必要があります。

インストール

データベースとしてpostgresqlを使用して新しいrailsアプリを作成します。

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

プロジェクトに参加する： cd video-express-rails

次に、お気に入りのテキストエディタでプロジェクトを開く。

ジェムの依存関係

2つのgemを追加する必要がある： VonageビデオAPI Ruby SDK(旧称 OpenTok) と dotenv-railsを追加する必要があります。

を開き Gemfileを開き、宝石を追加する：

gem 'opentok'
gem 'dotenv-rails'

これが終わったら、コマンドラインから bundle installをコマンドラインから実行して、依存関係をインストールすることができる。

Javascriptライブラリ

フロントエンドでは2つのJavascriptライブラリを使う：Video Express と Vivid です。使用する前に、これらについてもう少し知っておきましょう。

ビデオ・エクスプレス

Video Expressは開発者の生活を楽にすると約束した。主に2つの方法がある： パフォーマンスそして デザイン.

パフォーマンス

ビデオエクスプレス クオリティ・マネージャーは、ストリームの解像度、フレームレート、レンダリングサイズを継続的に最適化します。これは、従来のビデオ会議セッションのストリーム数が2次関数的に増加するため、非常に重要です！たとえば、ビデオ通話で 2 人が 1 つのストリームを作成します。ビデオ通話の6人は36ストリームを作成します。しかし、25人のビデオ通話では、625のストリームが同時にアクティブになります！

クオリティマネージャーは、ネットワークやCPUが許す限り解像度をアップグレードしたりダウングレードしたり、表示されないビデオストリームやミュートされたオーディオストリームを一時停止したり、表示されるビデオが小さくなったときにメディアサーバーに小さいビデオストリームを要求したりする。

その結果 60%減少の使用量が60% 減少します。 80%減少します。の使用率が80%減少します！

デザイン

COVIDの登場以来、世界はビデオ会議に慣れ親しんできた。この時点で、誰もがビデオ会議に何を期待すればよいかを多かれ少なかれ知っており、ほとんどのアプリケーションでは、車輪を再発明する必要はない。Video Expressは、次のような機能を備えている。 レイアウトマネージャーと エクスペリエンス・マネージャー.

Layout Managerはビデオ通話の応答性を管理し、参加者の退出、参加、スクリーンシェアに応じてビデオウィンドウを自動的に調整し、レンダリングサイズに基づいてビデオ解像度とフレームレートを最適化します。

エクスペリエンス マネージャーは、スピーカーの優先順位を動的に設定し、大規模な会議では参加者を自動的にミュートします。

Video Expressには、UIに接続するだけで使用できる機能がたくさん搭載されています。Video Expressは、これらの機能をすべて備えている：

• 参加/退出、カメラ/オーディオの起動など、ユーザーのアクションを検知

• さまざまなレイアウト・オプション：グリッド vs アクティブ・スピーカー

• アクティブ・スピーカー検出

• 使用するカメラとマイクの変更

• 音声出力機器の設定

• プレビューパブリッシャーの作成

• スクリーン共有パブリッシャーのオーディオ/ビデオへのアクセス

• 他のクライアントが画面共有ストリームを公開したときの検出

• 画面共有契約者のオーディオとビデオの有効化と無効化

ビビッド

Video Expressはフロントエンドの機能をすべて備えている。Vonageはそれを行います！私たちはVividと呼ばれるゴージャスなUIツールキットを開発し、通信機能を持つアプリケーションをより速く構築できるようにしています。

Vivid は Web Components を使って構築されているので、どんなフレームワークでも、あるいは Rails のようなバニラ HTML/JS でも動作します。そして見た目も素晴らしい！そして ウェブ・アクセシブル!

ビビッドについてもっと知る

ビビッド・インストール

さっそくVividをインストールしよう：

yarn add @vonage/vivid

モデル・ジェネレーション

次に、ウォッチ・パーティーの情報を保持し、操作するためのモデルを生成する。また、関連する watch_partiesテーブルを作成します。同じビデオ通話にユーザを接続するには、Vonage Video API に session_id.コマンドラインから以下を実行する：

rails g model WatchParty session_id:string

マイグレーションを実行してデータベースにこのカラムを作成する前に、マイグレーションを更新して、セッションを取得する必要があるときにセッションのデフォルトがnullにならないようにする必要があります。

ディレクトリを開き db/migrateディレクトリを開いて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

コマンドラインから実行することで、このデータベース移行をスキーマにコミットできる：

rails db:create db:migrate

このコマンドはPostgreSQLデータベースとsession_idカラムを持つsessionsテーブルを作成します。

クラスメソッドの作成

それでは、Vonage Video API を使用してユーザをビデオ通話セッションに接続するウォッチパーティロジックを実装してみましょう。

各Vonage Videoセッションには、固有のセッションIDがあります。このセッションIDにより、異なる参加者が同じVideoチャットに参加することができます。さらに、Videoチャットの各参加者は トークンが必要です。トークンには、モデレーション機能などの特別な権限を与えることができます。

Sessionモデルでは、新しいセッションIDを作成するか、以前のセッションIDをロードし、各参加者のトークンを生成するために使われる3つのクラスメソッドを作成します。

詳細について Vonage Video API セッション.

オープン app/models/watch_party.rb

まず、OpenTok Ruby SDK のインスタンスを作成して、Vonage Video API の機能にアクセスします。上記のクレデンシャル・セクションで設定した API_KEY と API_SECRET を ENV 環境変数で渡します。

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

次に、これらのクラスメソッドを追加します。Session#create_or_load_session_idメソッドは、すでにセッションIDがあるかどうかをチェックします。もしIDがあれば、そのIDを使います。なければ、新しいIDを生成します。

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

上記のメソッドは、次のメソッドも参照する。 create_new_sessionという追加メソッドも参照します：

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

最後に、各参加者に適切なトークンを割り当てるメソッドを作成します：

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

WatchPartyの完全なモデルは次のようになるはずです：

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

ENV変数の設定

Video APIロジックでは、秘密の環境変数を使用する必要があることがわかりました。それらを設定しましょう。

ファイルを作成する .envファイルを video-expressプロジェクトのルートからファイルを作成する：

touch .env

内部でENV変数を定義する：

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

ここで、上記の Video API 認証情報を追加する必要があります。実際のアプリでは、モデレータや監視パーティのパスワードに関する情報をデータベースに保存したいところですが、このデモでは ENV 変数に保存すれば十分です！

と MODERATOR_NAMEと PARTY_PASSWORDを追加することをお忘れなく。

ルートの定義

ユーザーにはホームとパーティーの2つのページが表示されます。しかし、パスワードが正しいかどうか、ユーザーがモデレーターであるかどうかをチェックするために、ログインフォームからの情報をキャッチする必要もあります。そこで、2つの取得リクエストと1つの投稿を作成します：

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

コントローラーの作成

Railsの「設定よりも規約」を使えば、コントローラに必要なアクションはルートと同じようにすでに決まっています！

コマンドラインから、ホーム、ログイン、パーティアクションを持つ WatchParty コントローラを生成する。

rails g controller WatchParty home login party

• railsジェネレーターは余計なものを生成する。そこで、生成されたルートを app/config/routes.rb.ログインビューファイルも完全に削除します； app/views/watch_party/login.html.erb

この時点で主要なコンフィグとセットアップはすべて終わっているので、アプリケーションを完成させるまで、アクションとビューのペアを1つずつ進めていくのが好きなんだ。

ホームページの作成

私たちが作りたいホームページはこのようになる：

Watch Party Home Page

ビビッドのドキュメントを見ると、必要なコンポーネントはすべて揃っている：

• カード

• テキスト

• フォーム

• ボタン

というわけで、RailsマジックとVividマジックを少し使えば、必要なものはすべて揃う。ここで2つだけ厄介なことがある。ひとつは、Vividではカードにタイトルやサブタイトルをつけることができることです。では、なぜvwc-textコンポーネントを使う必要があるのでしょうか？Vivid は Web コンポーネントでスロットを使用します。 slot="main"を使用すると、タイトルとサブタイトルのスロットが上書きされます。

次に、フォームでは実際にデータをサーバーに渡すことはできません。そこで、Railsヘルパーの form_with.まとめるとこのようになります：

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

これでサーバーを起動すれば、写真のような美しいホームページができるはずだ。では試してみましょう！コマンドラインから rails sコマンドラインから localhost:3000をブラウザで開いてください。

ああ、うまくいかない！

というのも、プロジェクトにVividはあるのですが、それを使うためのコードにインポートしていないからです。そこで、Javascriptでインポートすることにします。で app/javascript/packs/application.jsの下に次の行を追加します。 import "channels:

import '@vonage/vivid';

これでページを開けば動く。しかし、まだかなり醜い。そこで、スタイルを変えてみましょう。で app/assets/stylesheets/watch_party.scssに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;
}

次に進む前に、美しいVonageの背景を app/assets/stylesheets/application.scss

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

ログインの定義

フォームがありますが、本当のファン、つまり友人だけがウォッチパーティーに参加できるようにしたいのです！そこで、RailsのStrong Parametersロジックを追加して nameと passwordをキャッチするロジックを追加します。

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

ログインに成功すると party_path.このパスは、Video Expressルームがあるアプリの中心であるパーティーページにユーザーを導きます。作りましょう！

パーティーページの作成

まず、今作っているものを見てみましょう。これは "チルモード "のパーティーページです。しかし、パート 1 では、ヘッダーやツールバー コンポーネントについては心配しません。

Party Page: Chill Mode, Non Moderator

ページの骨となるHTMLから始めましょう。ヘッダー、ビデオ通話、ツールバーの3つのコンポーネントがあります。しかし、今のところは headerと toolbarが入るところにコメントを残しておきます：これを 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>

パーティページで残っているのは、Video Expressを使ってビデオ通話を追加することだけです。さあ、作りましょう。

ビデオ・エクスプレスで部屋を作る

Vonage Video API は、開発者がビデオのレイアウトをカスタマイズするための完全なコントロールを提供します。 publisher要素と subscriber要素を操作することで、動画のレイアウトを自由にカスタマイズできます。Video Express では、これらの概念を room.これを追加するのは、1, 2, 3と簡単です。

1. ライブラリをインクルードする。このスクリプトをファイルの先頭に追加する： <script src="https://static.opentok.com/v1/js/video-express.js"></script>

2. Video Expressのドキュメントにあるサンプルコードで部屋を作成します。追加パラメータ participantName.Video Expressは軽量ですが、いくつかのオプションがあります！

<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. roomContainerは、Roomを埋め込むために、htmlのエントリー・ポイントを探していることがわかります。そこで、idが roomContainter.

最終的な party.html.erbの最終的なコードは次のようになる：

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

さて、これでサーバーを起動して、美しいビデオ通話サイトを見ることができるはずですよね？答えは "ノー "です😆。何が足りないのか？Video API から Video Express に送信する OpenTok ロジックを使用していないのです。

そこで、OpenTokの変数を WatchParty Controllerで設定し、フロントエンドに渡す必要があります。

WatchParty コントローラーに set_opentok_varsアクション"

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

ここでは before_actionアクションに入る前にメソッドを呼び出します。 partyアクションに入る前にメソッドを呼び出します。つまり、完全なコントローラーは次のようになります：

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

さて、リフレッシュしてみると...カメラの電源が入り、音声が変になるのがわかる。しかし、画面には何も表示されない。なぜでしょう？Video Expressは動作しており、Video APIを通じてビデオセッションに接続しています。しかし、Video画面には何も表示されていません！

Video Expressの定型文から、ビデオ画面用のCSSを追加してみましょう。ここでは、#roomContainer をターゲットとし、ヘッダーを除いて幅と高さをフルにします。また、Video Express がトリガーされたときに、ローカルのセルフビューとスクリーンシェアをどこに置くかを Video Express に伝える CSS も追加します。

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

ブーム！これでビデオセッションができました。複数のタブ/異なる名前から参加してみてください。 ドーン！Railsでビデオ会議ができます！

次のステップ

パート2では、最新のビデオ会議に求められる機能を追加します：

• スクリーン共有：司会者だけが使用できるようにスコープされます。

• 他の参加者全員をミュートする

• 自分自身をミュートする

• 身を隠す（カメラをオフにする）

• 入力を選択：マイクとカメラ

• オーディオ出力の選択

さらにVividコンポーネントを追加し、Video Express Javascriptを追加する。

ここまで来たら、上出来だ！声をかけてください ツイッターでチュートリアルの感想を教えてください。