Crear una fiesta con Ruby on Rails y la Video API de Vonage - Parte 1

Mi hijo celebró recientemente su 9º cumpleaños y, como muchos niños de su edad, estuvo esperando su fiesta de cumpleaños durante meses. En medio de la pandemia de Covid-19, sabíamos que teníamos que hacer algo diferente este año, ¡así que le construí una aplicación de fiesta para ver videos usando la Video API de Vonage!

Tú también puedes crear tu propia aplicación de video watch party con la API de Video de Vonage y Ruby on Rails, y te mostraré cómo. Esta serie de dos partes te guiará a través de los pasos necesarios para crear una aplicación Rails completa. La primera parte se centrará en el backend de la aplicación y la segunda en el frontend.

resumiendo Si desea saltar por delante y obtener derecho a desplegarlo, puede todo el código de la aplicación en GitHub.

¿Qué hará la aplicación?

Antes de empezar a crear la aplicación, hablemos de lo que hará.

La aplicación tendrá tres vistas distintas:

1. Una página de aterrizaje

2. Videochat de fiestas

3. Video Watch Party

La entrada a la aplicación se hará a través de la página de aterrizaje. En la página de aterrizaje, se pedirá a los participantes que faciliten su nombre y la contraseña de la fiesta. El nombre servirá para identificarlos en el chat de texto. La contraseña proporcionará una pequeña capa de seguridad a la aplicación.

Después de que los participantes introduzcan su nombre y la contraseña correcta de la fiesta, serán redirigidos a la vista de Videochat de la fiesta. En esta vista, cada participante verá y oirá a los demás en un formato de cuadrícula. También habrá un lugar para chatear por texto. Todos verán un recuento en tiempo real de los participantes en la barra de navegación. El moderador de la fiesta también verá un enlace para activar/desactivar el Modo Observación.

Una vez que el moderador active el Modo Observar, todos los participantes serán dirigidos a la tercera y última vista, que es la de Video Watch Party. En esta vista, el moderador compartirá su pantalla en el centro de la página. El audio del moderador también se publica en un lugar oculto <div> para que los participantes puedan escuchar el audio del Video compartido. El chat de texto será el medio de comunicación en esta vista. El audio y el Video de todos los participantes estarán desactivados.

El moderador puede mover a las personas entre los modos Party Video Chat y Video Watch Party siempre que lo desee pulsando el botón Activar/Desactivar modo Observar en su barra de navegación.

Ahora que ya tenemos una idea de lo que vamos a construir, ¡empecemos a construirlo!

Requisitos previos

Esta aplicación requiere lo siguiente:

• Ruby on Rails v6.0+

• Ruby v2.5.8+

• Cuenta Vonage Video API (antes TokBox OpenTok)

Crear una cuenta de Video API de Vonage es gratis. Debes hacerlo para obtener tu clave y secreto de API, que son esenciales para que la aplicación funcione.

Credenciales de Video API de Vonage

Después de haber creado una cuenta con la API de Video de Vonageverás una interfaz de panel de control. El primer paso para obtener las credenciales de la API es crear un nuevo proyecto.

• Seleccione el botón Crear nuevo proyecto en la barra lateral izquierda.

• Seleccione API cuando se le pregunta qué tipo de proyecto crear

• Proporcione cualquier nombre para el proyecto

• Elija el VP8 códec. (Los detalles sobre la diferencia entre VP8 y H.264 se detallan aquí)

Ahora tienes acceso a la clave API y al secreto de tu proyecto. Guárdalas en un lugar seguro, pronto las utilizaremos.

Instalación

Desde tu terminal inicia una nueva aplicación Rails ejecutando lo siguiente:

Una vez hecho esto, entra en el directorio del proyecto y ábrelo con tu editor de código preferido.

Dependencias de las gemas

Añadiremos la Video API de Vonage (antes TokBox OpenTok) Ruby SDK al Gemfilejunto con la gema dotenv-rails para gestionar las variables de entorno:

gem 'opentok'
gem 'dotenv-rails'

Una vez hecho esto, podemos ejecutar bundle install desde la línea de comandos para instalar nuestras dependencias.

Generación de modelos

A continuación, generaremos un modelo para contener y manipular la información de la sesión de Video. Desde la línea de comandos ejecute lo siguiente:

Este comando creará un archivo de modelo dentro de /app/models/ y un archivo de migración de base de datos dentro de /db/migrate/. Abramos el archivo de migración de base de datos en nuestro editor de código. Necesitamos añadir valores por defecto a las columnas antes de migrarlo.

Encontrará el archivo de migración dentro de la carpeta /db/migrate/ carpeta. Será el único archivo dentro de la carpeta, y se verá similar a esto:

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 asegurarnos de que session_id nunca sea nulo y también queremos asegurarnos de que el booleano expired sea false por defecto. Para ello, modifique su archivo de migración añadiendo , null: false y , default: false a las etiquetas :session_id y :expired respectivamente.

Ahora puede confirmar esta migración de base de datos en el esquema ejecutando rake db:create desde la línea de comandos. Este comando creará la base de datos PostgreSQL y la tabla sessions con las etiquetas session_id y expired columnas.

Definición de rutas

La aplicación necesita que las rutas HTTP a las que se accederá estén definidas y apunten a los métodos correctos del controlador. Abra el archivo /config/routes.rb y añade lo siguiente:

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 las rutas apuntan a métodos dentro de VideoController. Crearemos el controlador en el siguiente paso.

• La ruta GET ruta raíz dirige a la #landing acción. Esta es la ruta para la página de destino.

• La ruta GET /screenshare apunta a la #screenshare acción. Esta es la ruta para la vista watch party.

• La ruta GET /party apunta a la #index acción. Esta es la ruta para la vista de chat de Video.

• La ruta POST /name apunta a la #name acción. Aquí es donde el formulario de la página de destino enviará sus datos.

• La ruta POST /chat/send apunta a la #chat acción. Aquí es donde se enviarán los mensajes de chat de texto.

Por último, en este paso crearemos el archivo VideoController.

Generación de controladores

En el siguiente paso, crearemos métodos para el controlador. En este último paso de Instalación, generaremos el archivo del controlador. Desde la línea de comandos ejecute lo siguiente:

Se creará un archivo video_controller.rb dentro de la carpeta /app/controllers/ con métodos vacíos para cada una de las acciones especificadas en el comando. También creará la estructura básica de vistas para la aplicación dentro de la carpeta /app/views/video.

Creación de los métodos de modelo y controlador

Ahora que toda la estructura de archivos necesaria y el esquema de base de datos se ha creado, es el momento de crear los métodos para la aplicación. Necesitaremos crear métodos tanto en el Controlador de Video como en el modelo de Sesión. Vamos a empezar con el modelo de sesión en primer lugar.

Definición de los métodos del modelo

Cada sesión de Vonage Video tiene su propio ID de sesión. Este ID de sesión es lo que permite que diferentes participantes se unan al mismo videochat. Además, a cada participante del videochat se le otorga un token que les permite participar. A un token se le pueden otorgar permisos especiales, como capacidades de moderación.

En el modelo Session vamos a crear tres métodos de clase que se utilizarán para crear un nuevo ID de sesión o cargar el anterior, y generar tokens para cada participante.

El método Session#create_or_load_session_id comprobará si ya existe un ID de sesión. Si hay un ID, lo utilizará. Si no, generará uno nuevo. Los identificadores de sesión pueden expirar, pero para los propósitos de este tutorial, vamos a trabajar sólo con identificadores de sesión activos:

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

El método anterior también hace referencia a un método adicional que necesitamos crear llamado Session#create_new_session que se encarga de crear una nueva sesión si no existe ninguna:

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 último, crearemos un método que asignará el token adecuado 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

En la parte superior de la definición del modelo, también necesitamos instanciar una instancia del SDK de la Video API de Vonage (antes conocida como TokBox OpenTok) y asignarla a una variable de instancia para utilizarla en todo el modelo. En conjunto, el archivo tendrá el siguiente aspecto:

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

Ahora estamos listos para pasar a construir nuestros métodos controladores que gestionarán las rutas de la aplicación.

Definición de los métodos del controlador

El controlador de Video tendrá un método para cada ruta, y algunos métodos de ayuda para construir el sitio. El primer método que vamos a construir proporcionará a todos los métodos posteriores acceso a la información de las credenciales de la Video API.

Abra el archivo video_controller.rb en /app/controllers y después de la definición de la clase añade el siguiente 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 verá en Parte 2 de esta serie cuando construyamos el frontend de la aplicación, estas variables de instancia también serán críticas para pasar los datos del backend al frontend del sitio.

A continuación, crearemos un método para cada una de las rutas de nuestra aplicación:

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 puede ver arriba, el método #name asigna el valor de la variable @name tomada del formulario de bienvenida de la página de destino. También proporciona una pequeña capa de control para la aplicación, redirigiendo al participante a la página de videochat sólo si la contraseña que ha proporcionado coincide con la establecida en la variable de entorno. Si la contraseña no coincide, se les redirige a la página de destino y se les pide que vuelvan a intentarlo.

El resto de los métodos son definiciones vacías, sólo lo mínimo para proporcionar a Rails la información necesaria para buscar la plantilla de vista correspondiente al nombre de la acción. La única excepción es el método #screenshare que establece una variable de instancia @darkmode que se utilizará para poner el sitio en modo oscuro durante la vista de pantalla compartida.

El método #name también hace referencia a name_paramsque aprovecha los parámetros fuertes de Rails. Necesitamos construir un método privado llamado name_params que defina con precisión qué parámetros debe incluir el formulario de la página de destino. Hagámoslo ahora:

private

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

Con ese método privado, hemos construido nuestro controlador. Todo junto tendrá el siguiente aspecto:

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 seguir adelante y crear nuestros archivos ERB para nuestras vistas, podemos tomarnos un momento y definir un archivo personalizado YAML que servirá como fuente de información sobre el sitio.

Esta información se utilizará para rellenar datos en el sitio como el nombre del partido, el mensaje de bienvenida, el idioma y la dirección lingüística del sitio, etc. Poner esta información en un solo lugar nos permitirá cambiarla fácilmente en el futuro sin necesidad de modificar varios archivos.

Configuración personalizada del sitio

El lugar en Rails para colocar ficheros de configuración personalizados es dentro de la carpeta /config así que vamos a añadir un fichero site_info.yml dentro de ella. Vamos a leer los datos de este archivo para crear el contexto de nuestro sitio, cosas como el nombre del partido y el idioma del sitio:

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'

En el ejemplo anterior se proporcionan valores por defecto. No dude en modificarlos para adaptarlos a las necesidades de su aplicación.

Para poder utilizar esta información, necesitamos cargarla y leerla en algún sitio. Añadiremos varios :before_action a la aplicación ApplicationController que recogerán toda esta información y la pondrán a disposición de toda la aplicación.

Abra el archivo application_controller.rb dentro del directorio /app/controllers y añada lo siguiente:

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

Ahora esas variables de instancia que contienen los datos del archivo site_info.yml están disponibles para ser usadas dentro de los archivos de vista, que crearemos ahora.

Creación de las vistas

Definición del diseño de la aplicación

La primera vista con la que trabajaremos es el diseño por defecto de la aplicación. Este archivo se encuentra en /app/views/layouts/application.html.erb. Dentro de la vista vamos a añadir la información sobre el idioma de nuestro sitio, si ir al modo oscuro o no, y también cargar el script de Video API JS:

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

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

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

Un punto interesante que habrás notado en el ejemplo anterior es que también hemos creado tres variables JavaScript dentro de la etiqueta <script> de la etiqueta Hemos pasado los datos de la correspondiente variable de instancia Ruby a esas variables JavaScript recién instanciadas. De esta manera, hemos empezado a hacer que nuestro backend hable con nuestro frontend.

El resto de los archivos de vista con los que trabajaremos serán las vistas particulares de la aplicación: la página de destino, el chat de vídeo y las vistas de visualización de vídeo. Sin embargo, antes de construirlos, vamos a crear algunos parciales que utilizaremos en el resto de las vistas.

Definición de los parciales

Los parciales son una forma estupenda de reutilizar componentes ERB en toda la estructura de vistas de una aplicación Rails. En lugar de definir el mismo contenido varias veces, podemos ponerlo en un archivo y simplemente invocar ese archivo cada vez que queramos utilizar ese contenido. Esta aplicación tendrá tres parciales: un parcial para la cabecera, un parcial para el chat de texto y un parcial para el icono del botón de chat de texto.

Cree un archivo llamado _header.html.erb dentro de /app/viws/video/ y añádele lo siguiente

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

La cabecera parcial lee los datos de la variable de instancia @navbar_title para proporcionar el nombre de la aplicación. También verás una etiqueta <p> vacía con un id #participant-count. Que se rellenará con los datos del JavaScript que crearemos en Parte 2 de esta serie de entradas de blog. Por último, el encabezado tiene una etiqueta <button> que sólo será visible para el moderador y le permitirá cambiar entre las vistas de chat y de pantalla compartida para todos los participantes.

Ahora, crea otro archivo llamado _button-chat.html.erb en la misma carpeta y añade lo siguiente:

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

El HTML anterior genera un icono de chat de texto en el que los participantes pueden hacer clic para mostrar u ocultar el cuadro de chat de texto.

El último parcial es un archivo que contendrá el área de la caja de chat de texto, incluyendo el formulario para enviar nuevos mensajes de chat.

Cree un archivo llamado _chat.html.erb en el mismo directorio y su contenido tendrá el siguiente aspecto:

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

En la etiqueta _chat.html.erb parcial también verás otra etiqueta vacía, esta vez una <div> con el id #history. Todos los mensajes de texto irán a esa área automáticamente usando la funcionalidad de mensajes de texto de la API de Video de Vonage dentro de la API de señales. Hablaremos de eso en Parte 2.

Definición de la página de destino

La página de aterrizaje será el lugar que los participantes encontrarán por primera vez cuando lleguen a la aplicación. Su propósito es pedir a los participantes su nombre, y la contraseña del partido para entrar en el sitio.

Cree un nuevo archivo dentro de /app/views/video llamado landing_html.erb y añade lo siguiente:

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

De forma similar a las parciales, la vista de la página de destino aprovecha las variables de instancia creadas en el módulo ApplicationController para generar el mensaje de bienvenida y el texto del formulario.

Definición de la vista de Video Chat

La vista de Videochat será el lugar en el que los participantes chatearán entre sí con sus cámaras de video y micrófonos. Esta vista, además de la vista de pantalla compartida, son las dos partes esenciales de la aplicación.

Para hacer esta vista, cree otro archivo nuevo en el mismo directorio llamado index.html.erb con lo siguiente dentro de él:

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

Este punto de vista tiene varios componentes que merece la pena mencionar.

La primera es lo que ocurre dentro de las etiquetas <script></script> etiquetas. De forma similar al diseño de la aplicación, seguimos pasando más datos al frontend del sitio en forma de nuevas variables JavaScript. Por otra parte, con el fin de aprovechar estas variables dentro del sitio después de cargar el JavaScript, también añadimos una pequeña función para recargar la página si es la primera vez que se está cargando en el navegador.

La otra área que mencionaremos es que notará que la mayor parte de la vista consiste en etiquetas vacías <div> vacías. El motivo es que se rellenarán con los vídeos de la Video API de forma dinámica. El frontend JavaScript buscará esas etiquetas por sus nombres de ID y añadirá los vídeos de todos los participantes dentro del elemento #subscribers y añadirá su vídeo al elemento #publisher elemento.

Definición de la vista de pantalla compartida

La última vista que tenemos que crear para la aplicación es la de la pantalla compartida de vídeo. En esta vista, los participantes pueden seguir chateando a través del cuadro de chat de texto, mientras ven todos juntos la misma pantalla.

Esta vista sólo tendrá que proporcionar los elementos <div> para que la API proporcione un editor, a saber, el vídeo de pantalla compartida, y una fuente de audio. Un screenshare por sí mismo no incluye audio, lo que dificultaría la visualización conjunta de un vídeo. Por ello, también publicaremos una fuente de audio desde el ordenador del moderador para acompañar al screenshare.

Añade un archivo llamado screenshare.html.erb dentro de la misma carpeta con lo siguiente

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

En este punto, ¡el backend de nuestra aplicación está listo! Enhorabuena, has terminado la Parte 1 de la creación de la fiesta de visualización de Video.

Próximos pasos

En Parte 2 de esta serie de publicaciones de blog, construiremos la interfaz de la aplicación. Mientras que el backend de la aplicación se escribió principalmente en Ruby y aprovechó el SDK de Ruby de la API de Video de Vonage, el frontend se escribirá en JavaScript y utilizará el SDK de JavaScript.

El trabajo de proporcionar los datos que necesitará el SDK de JavaScript ya se ha realizado en el backend que hemos creado. Ahora necesitamos construir las clases y funciones JavaScript que trabajarán con esa información. Gracias a los avances en Rails y su incorporación de Webpack, existe un proceso claro para incorporar JavaScript a una aplicación Rails, y nosotros seguiremos esos pasos.

Continúa en Parte 2 de esta serie de entradas de blog para terminar de crear la aplicación.