Crie uma festa com Ruby on Rails e a Video API da Vonage – Parte 1

Meu filho comemorou recentemente seu 9º aniversário e, como muitas crianças da idade dele, estava ansioso pela festa de aniversário há meses. Em meio à pandemia da Covid-19, sabíamos que precisávamos fazer algo diferente este ano, então criei para ele um aplicativo para assistir à festa em vídeo usando a Video API da Vonage!

Você também pode criar seu próprio aplicativo para festas de exibição de vídeos com a Video API da Vonage e o Ruby on Rails, e eu vou mostrar como. Esta série de duas partes irá guiá-lo pelas etapas para criar seu aplicativo Rails full-stack. A primeira parte se concentrará no back-end do aplicativo e a segunda parte, no front-end.

Resumo Se você quiser pular essa parte e ir direto para a implantação, pode encontrar todo o código do aplicativo no GitHub.

O que o aplicativo fará?

Antes de começarmos a desenvolver o aplicativo, vamos dedicar um momento para discutir o que ele fará.

O aplicativo terá três telas distintas:

1. Uma página de destino

2. Chat com Video em grupo

3. Encontro para assistir a vídeos

O acesso ao aplicativo será feito pela página inicial. Nessa página, os participantes deverão informar seu nome e a senha da festa. O nome será usado para identificá-los no chat de texto. A senha proporcionará uma pequena camada de segurança ao aplicativo.

Depois que os participantes digitarem seus nomes e a senha correta da festa, eles serão redirecionados para a tela do bate-papo por Video da festa. Nessa tela, cada participante poderá ver e ouvir os demais em um formato de grade. Haverá também um espaço para conversar por texto. Todos verão uma contagem em tempo real dos participantes na barra de navegação. O moderador da festa também verá um link para ativar ou desativar o ativar ou desativar o Modo de Observação.

Assim que o moderador ativar o Modo de Visualização, todos os participantes serão direcionados para a terceira e última tela, que é a Sessão de Visualização em Grupo. Nessa tela, o moderador compartilhará sua tela no centro da página. O áudio do moderador também será transmitido em um canal oculto <div> para que os participantes possam ouvir o áudio do Video compartilhado. O chat de texto será o meio de comunicação nessa tela. Os feeds de áudio e vídeo de todos os participantes serão desativados.

O moderador pode alternar entre os modos “Bate-papo em vídeo em grupo” e “Sessão de vídeo em grupo” sempre que quiser, pressionando o botão botão “Ativar/Desativar Modo de Exibição” na barra de navegação.

Agora que já temos uma ideia do que vamos construir, vamos começar a construir!

Pré-requisitos

Este aplicativo requer o seguinte:

• Ruby on Rails v6.0 ou superior

• Ruby v2.5.8 ou superior

• Account da Video API da Vonage (anteriormente TokBox OpenTok)

A criação de um Account na Video API da Vonage é gratuita. É necessário criar esse Account para obter sua chave e seu segredo de API, que são essenciais para que o aplicativo funcione.

Credenciais da Video API da Vonage

Depois de criar um Account na Video API da Vonage, você verá uma interface de painel de controle. O primeiro passo para obter as credenciais da API é criar um novo projeto.

• Selecione o link “Criar novo projeto” na barra lateral esquerda.

• Selecionar API quando for perguntado que tipo de projeto você deseja criar

• Escreva qualquer nome para o projeto

• Escolha o opção de codec como codec. (Mais detalhes sobre a diferença entre VP8 e H.264 estão disponíveis aqui)

Agora você tem acesso à chave e ao segredo da API do seu projeto. Guarde-os em um local seguro, pois vamos usá-los em breve.

Instalação

No seu terminal, inicie uma nova aplicação Rails executando o seguinte:

Depois de fazer isso, acesse o diretório do projeto e abra-o com seu editor de código preferido.

Dependências do Gem

Vamos adicionar a Video API da Vonage (anteriormente TokBox OpenTok) ao SDK do Ruby Gemfile, juntamente com o dotenv-rails gem para gerenciar variáveis de ambiente:

gem 'opentok'
gem 'dotenv-rails'

Depois de fazer isso, podemos executar bundle install a partir da linha de comando para instalar nossas dependências.

Geração de modelos

A seguir, vamos gerar um modelo para armazenar e manipular as informações da sessão de Video. Na linha de comando, execute o seguinte:

Este comando criará um arquivo de modelo dentro de /app/models/ e um arquivo de migração de banco de dados dentro de /db/migrate/. Vamos abrir o arquivo de migração do banco de dados em nosso editor de código. Precisamos adicionar valores padrão às colunas antes de fazer a migração.

Você pode encontrar o arquivo de migração dentro da /db/migrate/ pasta. Será o único arquivo na pasta e terá uma aparência semelhante a esta:

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

Queremos garantir que o session_id nunca seja nulo e também queremos garantir que o expired valor padrão do booleano seja false. Para isso, modifique seu arquivo de migração adicionando , null: false e , default: false ao :session_id e :expired , respectivamente.

Agora você pode aplicar essa migração do banco de dados ao esquema executando rake db:create na linha de comando. Esse comando criará o banco de dados PostgreSQL e a sessions tabela com o session_id e expired .

Definição de rotas

The application needs the HTTP routes by which it will be accessed to be defined and pointed to the correct controller methods. Open the /config/routes.rb arquivo e adicione o seguinte:

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

Todas as rotas apontam para métodos dentro do VideoController. Vamos criar o controlador na próxima etapa.

• A GET rota raiz direciona para a #landing ação. Essa é a rota para a página de destino.

• A GET /screenshare rota aponta para a #screenshare ação. Esta é a rota para a visualização da festa de assistir.

• A GET /party rota aponta para a #index ação. Esta é a rota para a visualização do chat por Video.

• A POST /name rota aponta para a #name ação. É para lá que o formulário da página de destino enviará seus dados.

• A POST /chat/send rota aponta para a #chat ação. É para lá que as mensagens de chat de texto serão enviadas.

Por fim, nesta etapa, vamos criar o VideoController.

Geração de controladores

Na próxima etapa, criaremos métodos para o controlador. Nesta última etapa da instalação, geraremos o arquivo do controlador. Na linha de comando, execute o seguinte:

Isso criará um video_controller.rb arquivo dentro da /app/controllers/ pasta com métodos vazios para cada uma das ações que especificamos no comando. Também criará a estrutura básica da visualização do aplicativo dentro de /app/views/video.

Criação dos métodos do modelo e do controlador

Agora que toda a estrutura de arquivos e o esquema do banco de dados necessários já foram criados, é hora de criar os métodos para o aplicativo. Precisaremos criar métodos tanto no Controlador de Vídeo quanto no modelo Session. Vamos começar pelo modelo Session.

Definindo os métodos do modelo

Cada sessão do Vonage Video possui um ID de sessão exclusivo. Esse ID de sessão é o que permite que diferentes participantes entrem no mesmo bate-papo por vídeo. Além disso, cada participante do bate-papo por vídeo recebe um token que permite que ele participe. Um token pode receber permissões especiais, como recursos de moderação.

No Session modelo, vamos criar três métodos de classe que serão usados para criar um novo ID de sessão ou carregar o anterior, além de gerar tokens para cada participante.

O Session#create_or_load_session_id método verificará se já existe um ID de sessão. Se houver um ID, ele será utilizado. Caso contrário, será gerado um novo. Os IDs de sessão podem expirar, mas, para os fins deste tutorial, trabalharemos apenas com IDs de sessão ativos:

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

O método acima também faz referência a um método adicional que precisamos criar, chamado Session#create_new_session que se encarrega de criar uma nova sessão caso ainda não exista uma:

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

Por fim, vamos criar um método que atribuirá o token correto a cada participante:

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

No início da definição do modelo, também precisamos instanciar uma instância do SDK da Video API do Vonage (anteriormente conhecida como TokBox OpenTok) e atribuí-la a uma variável de instância para utilizá-la em todo o modelo. No total, o arquivo ficará da seguinte forma:

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

Agora estamos prontos para passar à criação dos métodos do controlador que irão gerenciar as rotas do aplicativo.

Definindo os métodos do controlador

O controlador de vídeo terá um método para cada rota e alguns métodos auxiliares para construir o site. O primeiro método que vamos criar fornecerá a todos os métodos subsequentes acesso às informações de credenciais da Video API.

Abra o video_controller.rb arquivo em /app/controllers e, após a definição da classe, adicione o seguinte método:

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

Como você verá na Parte 2 desta série, quando criarmos o front-end do aplicativo, essas variáveis de instância também serão fundamentais para passar os dados do back-end para o front-end do site.

A seguir, vamos criar um método para cada uma das rotas do nosso aplicativo:

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

Como você pode ver acima, o #name método atribui o valor da @name variável obtida do formulário de boas-vindas da página de destino. Ele também oferece uma pequena camada de controle de acesso para o aplicativo, redirecionando o participante para a página de videochamada somente se a senha fornecida corresponder à definida na variável de ambiente. Se a senha não corresponder, o participante é redirecionado para a página de destino e solicitado a tentar novamente.

Os demais métodos são definições vazias, apenas o mínimo necessário para fornecer ao Rails as informações necessárias para localizar o modelo de visualização correspondente ao nome da ação. A única outra exceção é o #screenshare método que define uma @darkmode variável de instância, que será usada para colocar o site no modo escuro durante a exibição do compartilhamento de tela.

O #name método também faz referência name_params, que utiliza o Strong Parameters do Rails. Precisamos criar um método privado chamado name_params que defina exatamente quais parâmetros o formulário na página de destino deve incluir. Vamos fazer isso agora:

private

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

Com esse método privado, concluímos a construção do nosso controlador. No total, ficará assim:

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

Antes de prosseguirmos e criarmos nossos arquivos ERB para nossas visualizações, podemos reservar um momento agora para definir um arquivo personalizado YAML que servirá como fonte de referência para as informações sobre o site.

Essas informações serão usadas para preencher dados no site, como o nome do usuário, a mensagem de boas-vindas, o idioma e a direção de idioma do site, entre outros. Reunir essas informações em um único local nos permitirá alterá-las facilmente no futuro, sem precisar modificar vários arquivos.

Fornecimento de configuração personalizada do site

No Rails, o local para colocar arquivos de configuração personalizados é dentro da /config pasta; então, vamos adicionar um site_info.yml arquivo lá dentro. Vamos ler os dados desse arquivo para criar o contexto do nosso site, como o nome do partido e o idioma do 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'

No exemplo acima, há valores padrão. Fique à vontade para editá-los e alterá-los de acordo com as necessidades da sua aplicação.

Para utilizar essas informações, precisamos carregá-las e lê-las em algum lugar. Vamos adicionar várias :before_action configurações ao ApplicationController que irá receber todas essas informações e disponibilizá-las em todo o aplicativo.

Abra o application_controller.rb arquivo dentro do /app/controllers diretório e adicione o seguinte:

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

Agora, essas variáveis de instância que contêm os dados do site_info.yml estão disponíveis para serem usadas nos arquivos de visualização, que vamos criar agora.

Criação das visualizações

Definindo o layout do aplicativo

A primeira visualização com a qual vamos trabalhar é o layout padrão do aplicativo. Esse arquivo pode ser encontrado em /app/views/layouts/application.html.erb. Dentro da visualização, vamos adicionar as informações sobre o idioma do nosso site, se devemos ativar o modo escuro ou não, e também carregar o script JS da 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>

Um ponto interessante que você deve ter notado no exemplo acima é que também criamos três variáveis JavaScript dentro da <script> tag. Passamos os dados das variáveis de instância correspondentes do Ruby para essas variáveis JavaScript recém-instanciadas. Dessa forma, começamos a fazer com que nosso backend se comunique com nosso frontend.

Os demais arquivos de visualização com os quais trabalharemos serão as visualizações específicas do aplicativo: a página inicial, o chat por vídeo e a visualização de vídeos. Antes de criá-las, porém, vamos criar alguns partials que usaremos nas demais visualizações.

Definindo os parciais

Os partials são uma ótima maneira de reutilizar componentes ERB em toda a estrutura de visualização de uma aplicação Rails. Em vez de definir o mesmo conteúdo várias vezes, podemos colocá-lo em um único arquivo e simplesmente chamá-lo sempre que quisermos usar esse conteúdo. Esta aplicação terá três parciais: um parcial para o cabeçalho, um parcial para o chat de texto e um parcial para o ícone do botão do chat de texto.

Crie um arquivo chamado _header.html.erb dentro /app/viws/video/ e adicione o seguinte a ele:

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

O parcial de cabeçalho lê os dados da @navbar_title variável de instância para fornecer o nome do aplicativo. Você também notará uma <p> com um id de #participant-count. Ela será preenchida com dados do JavaScript que criaremos na Parte 2 desta série de posts. Por fim, o cabeçalho possui uma <button> que só ficará visível para o moderador e permite que ele alterne entre as visualizações de bate-papo e compartilhamento de tela para todos os participantes.

Agora, crie outro arquivo chamado _button-chat.html.erb na mesma pasta e adicione o seguinte:

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

O código HTML acima gera um ícone de bate-papo por texto no qual os participantes podem clicar para exibir ou ocultar a janela de bate-papo.

O último partial é um arquivo que conterá a área da caixa de bate-papo de texto, incluindo o formulário para enviar novas mensagens de bate-papo.

Crie um arquivo chamado _chat.html.erb no mesmo diretório, e seu conteúdo ficará assim:

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

Na _chat.html.erb trecho, você também verá outra tag vazia, desta vez uma <div> com o id #history. Todas as mensagens de texto serão inseridas nessa área automaticamente, utilizando a funcionalidade de mensagens de texto da Video API do Vonage dentro da API do Signal. Discutiremos isso na Parte 2.

Definindo a página de destino

A página de destino será a primeira tela que os participantes verão ao acessarem o aplicativo. Seu objetivo é solicitar aos participantes que informem seu nome e a senha do evento para acessarem o site.

Crie um novo arquivo dentro de /app/views/video chamado landing_html.erb e adicione o seguinte:

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

Assim como os partials, a visualização da página de destino utiliza as variáveis de instância criadas no ApplicationController para gerar a mensagem de boas-vindas e o texto do formulário.

Definindo a visualização do chat por vídeo

A tela de videoconferência será o local onde os participantes conversarão entre si usando suas câmeras e microfones. Essa tela, juntamente com a tela de compartilhamento de tela, constitui as duas partes essenciais do aplicativo.

Para criar essa visualização, crie outro arquivo novo no mesmo diretório chamado index.html.erb com o seguinte conteúdo:

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

Essa visão possui vários componentes que merecem destaque.

O primeiro é o que está acontecendo dentro das <script></script> tags. Da mesma forma que no layout do aplicativo, continuamos a passar mais dados para o front-end do site na forma de novas variáveis JavaScript. Além disso, para aproveitar essas variáveis dentro do site após o carregamento do JavaScript, também adicionamos uma pequena função para recarregar a página caso seja a primeira vez que ela está sendo carregada no navegador.

Outro ponto que vamos mencionar é que você vai perceber que a maior parte da visualização é composta por <div> . O motivo é que elas serão preenchidas dinamicamente pelos vídeos da Video API. O JavaScript do front-end localizará essas tags por seus nomes de ID e adicionará os vídeos de todos os participantes dentro do #subscribers elemento e adicionará seu Video ao #publisher elemento.

Definindo a visualização do compartilhamento de tela

A última tela que precisamos criar para o aplicativo é a de compartilhamento de tela com Video. Nessa tela, os participantes podem continuar conversando pela caixa de bate-papo, enquanto todos assistem à mesma tela juntos.

Essa visualização precisará fornecer apenas os <div> elementos necessários para que a API forneça um canal de transmissão, ou seja, o vídeo do compartilhamento de tela, e um feed de áudio. O compartilhamento de tela, por si só, não inclui áudio, o que dificultaria a exibição conjunta de um vídeo. É por isso que também publicaremos um feed de áudio do computador do moderador para acompanhar o compartilhamento de tela.

Adicione um arquivo chamado screenshare.html.erb na mesma pasta com o seguinte conteúdo:

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

Nesse ponto, o backend do nosso aplicativo já está pronto! Parabéns, você concluiu a Parte 1 da criação da sessão de exibição de vídeo em grupo.

Próximos passos

Em Parte 2 desta série de posts do blog, vamos construir o front-end do aplicativo. Enquanto o back-end do aplicativo foi escrito principalmente em Ruby e utilizou o SDK Ruby da Video API da Vonage, o front-end será escrito em JavaScript e utilizará o SDK de JavaScript.

O trabalho de fornecer os dados de que o SDK do JavaScript precisará já foi realizado no backend que criamos. Agora, precisamos criar as classes e funções em JavaScript que irão trabalhar com essas informações. Graças aos avanços no Rails e à incorporação do Webpack, existe um processo claro para integrar JavaScript a uma aplicação Rails, e seguiremos essas etapas.

Continue para Parte 2 desta série de posts para concluir a criação do aplicativo.