Vonage Video Express con Ruby on Rails Parte 1

Desde 2004, Ruby on Rails ha sido muy apreciado por los desarrolladores y, especialmente, por los fundadores de startups por su capacidad para crear rápidamente aplicaciones web a gran escala. Kerry Doyle resume a la perfección la filosofía "Convention Over Configuration" que sustenta Ruby on Rails: "[intenta] reducir el número de decisiones que debe tomar un desarrollador que utilice el framework sin perder necesariamente flexibilidad y los principios de no repetirse (DRY)". Esta filosofía hace que Rails sea ideal para la metodología LEAN mindest.

El año pasado Vonage lanzó Video Express. Esta biblioteca Javascript que se asienta sobre la Video API de Vonage es como la extensión de "Convención sobre configuración" para que el proceso de creación de Video Call Applications sea más fácil y rápido. Cualquier desarrollador ahora puede crear poderosas y sólidas reuniones de Video sin conocer todos los detalles.

En este tutorial, te mostraré cómo combinar estas poderosas tecnologías para crear una aplicación moderna y completa con todas las funciones de videoconferencia que los usuarios esperan. Utilizaré Ruby on Rails, Vonage Video Express y el nuevo kit de herramientas de interfaz de usuario de Vonage Vivid.

Este post está inspirado en Crea una fiesta con Ruby on Rails y la Video API de Vonage. Recrearé en gran medida la funcionalidad de ese post y después, ¡podrás ver que se requirió mucho menos código!

Qué hará la aplicación

En 2020 Ben Greenberg creó una aplicación para que su hijo pudiera ver películas con sus amigos. Esta aplicación será esencialmente lo mismo. Solo que yo no veo películas online con amigos. Pero desde que me mudé al otro lado del mundo, es difícil encontrar seguidores de mi equipo favorito de hockey sobre hielo, los Blues. Así que en vez de ver películas con mis amigos, me encantaría ver a los Blues o los deportes en general con amigos de mi país. Funcionalmente, la aplicación es la misma y toma prestado en gran medida de la aplicación de películas de Ben. Esto facilitará la comparación de los pros y los contras entre usar Video Express y escribir en la API de Video nativa de Vonage.

Esta aplicación tendrá dos páginas: una página de aterrizaje con un formulario de inicio de sesión y una página de "fiesta". Cuando los usuarios inicien sesión, se les llevará a una "Chill Zone" para pasar el rato; en ella se mostrarán en igual tamaño. A continuación, cuando empiece la partida, el "moderador" dueño de la sesión activará un "screenshare" para mostrar la partida. En el "Modo Ver", la pantalla compartida del moderador será dominante y ocupará la mayor parte de la videollamada. Como lo mejor de ver deportes con amigos son las bromas, seguiré viendo y oyendo a los demás participantes. Pero si mis amigos hacen demasiado ruido, quiero poder silenciarlos. También permitiremos que los participantes se silencien a sí mismos, apaguen su cámara de vídeo y seleccionen sus entradas y salidas de vídeo/audio.

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

En la primera parte crearemos la aplicación Rails utilizando algunos componentes Vivid y haremos funcionar Video Express. En la segunda parte, pasaremos al siguiente nivel creando componentes que combinen la funcionalidad de Video Express con Vivid UI.

¡Yalla! ¡Adelante!

Requisitos

• ruby v3.0.0+

• Rails v6.1.6+

• API de Video de Vonage

• Vonage Video Express v1.2.3+

• Vivid v2.34.0+

Configuración de Video API de Vonage

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

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.

• Abrir Proyectos de la barra lateral izquierda.

• Haga clic en el botón Crear nuevo proyecto .

• Selecciona API de Video de Vonage cuando se te pregunte qué tipo de proyecto crear; Crear proyecto personalizado

• Proporcione cualquier nombre para el nombre del proyecto

• Elija la opción de códec VP8. (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.

Activar Video Express

Para utilizar Video Express, asegúrese de activar el complemento Video Express para su Account.

• Vaya a su Video API Account y haga clic en Configuración de la Account en el menú de la izquierda.

• En la lista de Complementos de Accountbusque Video Express y haz clic en Añadir a la Account. A continuación, siga las instrucciones restantes para habilitar el complemento.

Configuración de la aplicación Rails

Antes de que podamos añadir la magia del frontend con Video Express y Vivid, tenemos que trabajar un poco para crear nuestra aplicación Rails y ejecutarla con la Video API de Vonage en el backend.

Instalación

Crear una nueva aplicación rails usando postgresql como base de datos.

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

Muévete dentro del proyecto: cd video-express-rails

Ahora abre el proyecto con tu editor de texto favorito.

Dependencias de las gemas

Necesitaremos añadir dos gemas: Vonage Video API Ruby SDK (antes conocido como OpenTok) y dotenv-rails para manejar nuestras variables de entorno.

Abre el Gemfile y añade las gemas:

gem 'opentok'
gem 'dotenv-rails'

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

Bibliotecas Javascript

Utilizaremos dos librerías Javascript en el front-end: Video Express y Vivid. Antes de usarlas, conozcamos un poco más sobre ellas.

Video Express

Prometí que Video Express facilitaría la vida de los desarrolladores, pero ¿cómo? Principalmente de dos maneras: Rendimiento y Diseño.

Rendimiento

Video Express Gestor de calidad optimiza continuamente la resolución de los flujos, la velocidad de fotogramas y los tamaños de renderización. Esto es muy importante, ya que el número de secuencias en una sesión de videoconferencia clásica crece cuadráticamente rápido. Por ejemplo, 2 personas en una videollamada crean 1 flujo. 6 personas en una videollamada crean 36 flujos. Pero 25 personas en una videollamada significan que 625 flujos están activos simultáneamente.

El gestor de calidad trabaja para aumentar y reducir la resolución según lo permitan las redes y las CPU, pausar los flujos de vídeo no visibles y los flujos de audio silenciados, y solicitar flujos de vídeo más pequeños a los servidores multimedia cuando los vídeos visualizados se hacen más pequeños.

El resultado puede ser 60% menos de uso de banda con para sesiones de 10 participantes y 80% menos de uso de para sesiones de 25 participantes.

Diseño

Desde el inicio de COVID, el mundo se ha familiarizado íntimamente con las videoconferencias. A estas alturas, todo el mundo sabe más o menos qué esperar de una videoconferencia y, para la mayoría de las aplicaciones, no hay necesidad de reinventar la rueda. Video Express hace el trabajo pesado con su Gestor de diseño y Gestor de experiencias.

El Layout Manager gestiona la capacidad de respuesta de la videollamada, ajustando automáticamente las ventanas de vídeo a medida que los participantes se van, se unen o comparten pantalla, y optimiza las resoluciones de vídeo y la velocidad de fotogramas en función del tamaño de la representación.

El Experience Manager establece dinámicamente la prioridad de los oradores y silencia automáticamente a los participantes en las reuniones más grandes.

Todo este trabajo significa que Video Express tiene un montón de características incorporadas que sólo necesitan ser conectadas a una interfaz de usuario. Video Express te ofrece todas estas funciones desde el primer momento:

• Detección de acciones de los usuarios, como entrar/salir o activar sus cámaras/audio.

• Diferentes opciones de disposición: rejilla frente a altavoz activo

• Detección activa de altavoces

• Cambiar la cámara y el micrófono utilizados

• Configuración del dispositivo de salida de audio

• Creación de un editor de previsualización

• Acceso al audio/vídeo del editor de pantalla compartida

• Detectar cuándo otros clientes publican flujos de pantalla compartida

• Activar y desactivar el audio y el vídeo de un abonado que comparte pantalla

Vivid

Como ya he dicho, Video Express tiene toda la funcionalidad de front-end, sólo necesita un desarrollador para crear una interfaz de usuario para el usuario final. ¡Vonage hace eso! Hemos estado creando un magnífico conjunto de herramientas de interfaz de usuario llamado Vivid que hace que la creación de aplicaciones con funciones de comunicaciones sea mucho más rápida.

Vivid está construido utilizando Web Components, por lo que funcionará en cualquier framework o incluso en HTML/JS como Rails. Y tienen un aspecto estupendo. Y son accesibles desde la web¡!

Más información sobre Vivid

Instalación vívida

Instalemos Vivid y pongámonos en marcha:

yarn add @vonage/vivid

Generación de modelos

A continuación, generaremos un modelo que contenga y manipule la información de la watch party. Esto también creará una tabla watch_parties en nuestra base de datos. Para conectar a los usuarios a la misma videollamada, tendremos que pasar a la Video API de Vonage el código session_id. Desde la línea de comandos ejecuta lo siguiente:

rails g model WatchParty session_id:string

Antes de ejecutar la migración para crear esta columna en nuestra base de datos, tendremos que actualizar en la migración para asegurarnos de que las sesiones no sean nulas por defecto cuando necesitemos recuperarlas.

Abra el directorio db/migrate directorio y encuentre el archivo llamado 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

Ahora puede confirmar esta migración de base de datos en el esquema ejecutando desde la línea de comandos ejecutar:

rails db:create db:migrate

Este comando creará la base de datos PostgreSQL y la tabla sessions con la columna session_id.

Creación de los métodos de la clase

Ahora implementemos nuestra lógica de watch party que utilizará la Video API de Vonage para conectar a los usuarios a una sesión de videollamada.

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, cada participante del chat de video requiere 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.

Más información sobre Sesiones de Video API de Vonage.

Abrir app/models/watch_party.rb

En primer lugar, necesitamos acceder a nuestra funcionalidad de Video API de Vonage instanciando una instancia del SDK Ruby de OpenTok. Pasaremos nuestra API_KEY y API_SECRET de la sección de credenciales anterior a través de las variables de entorno ENV

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

Ahora podemos añadir los métodos de la clase. El método Session#create_or_load_session_id comprobará si ya existe un ID de sesión. Si hay un ID, usará ese ID. Si no, generará uno nuevo.

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

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

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

Por último, crearemos un método que asignará el token adecuado a cada participante:

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

Su modelo completo de WatchParty debería tener este aspecto :

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

Configuración de las variables ENV

Vimos que nuestra lógica de Video API requiere el uso de algunas variables de entorno secretas. Vamos a establecerlas ahora.

Cree el .env archivo desde la raíz del video-express proyecto:

touch .env

Dentro definimos nuestras variables ENV:

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

Aquí tendrás que añadir tus credenciales de la Video API. En una aplicación real, querrás almacenar la información sobre los moderadores y las contraseñas de los watch parties en tu base de datos, pero para esta demostración, almacenar en una variable ENV es suficiente.

No olvide añadir un MODERATOR_NAME y PARTY_PASSWORDpara utilizarlos en la página de inicio de sesión.

Definición de las rutas

El usuario verá dos páginas: home y party. Pero también necesitamos coger la información del formulario de login para comprobar que la contraseña es correcta y si el usuario es el moderador. Así que crearemos dos peticiones get y un post:

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

Creación del controlador

Con Rails "Convention over Configuration" ya sabemos qué acciones necesitaremos para nuestro controlador, ¡lo mismo que las rutas!

Desde la línea de comandos genere el controlador WatchParty con las acciones home, login y party.

rails g controller WatchParty home login party

• El generador de rutas hará algunas cosas extra que no queremos. Así que ahora ve y borra las rutas que generó en app/config/routes.rb. Y borrar completamente el archivo de vista de inicio de sesión; app/views/watch_party/login.html.erb

En este punto con toda la configuración principal y la configuración hecha, me gusta ir una acción / vista par a la vez hasta que termine una aplicación.

Construir la página de inicio

La página de inicio que queremos construir tendrá este aspecto:

Watch Party Home Page

Si echamos un vistazo a la documentación de Vivid, veremos que tenemos todos los componentes que necesitamos:

• Tarjeta

• Texto

• Formularios

• Botones

Así que con un poco de magia Rails con un poco de magia Vivid, tenemos todo lo que necesitamos. Sólo hay dos cosas complicadas aquí. Una, te darás cuenta de que las tarjetas pueden tener títulos y subtítulos en Vivid. Entonces, ¿por qué necesitamos usar el componente vwc-text? Porque Vivid hace uso de ranuras en sus componentes web y cuando se utiliza el componente slot="main" para tener contenido en la tarjeta, esto anula las ranuras del título y subtítulo.

En segundo lugar, el formulario no nos ayuda a pasar los datos al servidor. Así que tenemos que utilizar la ayuda de Rails form_with. En conjunto queda así:

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

Así que ahora si ejecutamos nuestro servidor deberíamos tener una hermosa página de inicio como en la imagen ¿verdad? ¡Pruébalo! Ejecute rails s desde tu línea de comandos y abre localhost:3000 en tu navegador.

Uh oh, ¡no funciona!

Porque aunque tenemos Vivid en nuestro proyecto, en realidad no lo hemos importado en el código para usarlo. Así que ahora lo haremos en nuestro Javascript. En app/javascript/packs/application.js añadimos esta línea bajo import "channels:

import '@vonage/vivid';

Ahora si abres la página funcionará. Pero sigue siendo bastante fea. Así que vamos a darle estilo. En app/assets/stylesheets/watch_party.scss agreguemos algo de 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;
}

Antes de continuar, vamos a añadir el bonito fondo de Vonage en app/assets/stylesheets/application.scss

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

Definición del inicio de sesión

Tenemos un formulario, pero queremos asegurarnos de que sólo los verdaderos fans, es decir, nuestros amigos, pueden unirse a nuestra fiesta. Así que añadiremos algo de lógica Rails Strong Parameters para capturar los parámetros name y password de los parámetros enviados en el formulario de la página de inicio.

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

Los inicios de sesión correctos redirigirán a la página party_path. Esta ruta llevará a los usuarios a la página de la fiesta, el corazón de la aplicación donde vivirá nuestra sala Video Express. ¡Vamos a construirla!

Creación de la página de la fiesta

Primero, echemos un vistazo a lo que estamos construyendo. Esta es la página de la fiesta en el "modo relajado" como no moderador. Pero para la Parte 1 no nos preocuparemos de la cabecera ni de los componentes de la barra de herramientas, así que sólo nos queda el Video Chat por construir.

Party Page: Chill Mode, Non Moderator

Empecemos con los huesos de la página, el HTML. Tenemos 3 componentes: una cabecera, la videollamada y una barra de herramientas. Pero por ahora sólo dejaremos comentarios donde el header y toolbar irán: Añade esto a tu 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>

Así que ahora todo lo que queda en la página de la fiesta es añadir nuestra videollamada con Video Express. Vamos a construir eso ahora.

Construir una sala con Video Express

La Video API de Vonage ofrece a los desarrolladores un control total de la personalización de su diseño de vídeo mediante la manipulación de publisher y subscriber elementos. En Video Express, éstos se reemplazan con el concepto de un room. Agregar esto es tan fácil como 1, 2, 3.

1. Incluye la biblioteca. Añade este script en la parte superior del archivo: <script src="https://static.opentok.com/v1/js/video-express.js"></script>

2. Ahora ejecute crear la habitación con el código de ejemplo de la documentación de Video Express. Observe que pasamos el parámetro adicional participantName. Video Express es ligero pero viene con algunas opciones, ¡explora la documentación!

<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. Podemos ver que el roomContainer está buscando el punto de entrada en el html donde enganchar e incrustar el Room. Así que tenemos que crear un elemento con un id de roomContainter.

El código final del party.html.erb tiene el siguiente aspecto:

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

Así que ahora deberíamos ser capaces de ejecutar nuestro servidor y ver un hermoso sitio de videollamadas, ¿verdad? Ya deberías saber que la respuesta es "no" 😆. ¿Qué nos falta? Bueno, no hemos usado nada de esa lógica OpenTok de la Video API para enviar a Video Express.

Así que tenemos que establecer nuestras variables OpenTok en el WatchParty Controller y pasarlas a nuestro frontend.

En el controlador WatchParty tenemos que añadir la acción set_opentok_vars acción"

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

Utilizaremos el método before_action que llamará al método antes de entrar en la party acción. Así que el Controlador completo se ve como:

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

Ahora si refrescamos... vemos que nuestra cámara se enciende y el audio se pone raro. Pero no aparece nada en la pantalla. ¿Por qué? Video Express está funcionando y estamos conectados a una sesión de Video a través del Video API. ¡Pero no le hemos dado a la pantalla de Video ningún espacio para existir!

Vamos a añadir algo de CSS de la plantilla de Video Express para la pantalla de vídeo. Apuntamos al #roomContainer y le damos anchura y altura completas, menos la cabecera. También añadimos un poco de CSS para decirle a Video Express dónde poner la auto-vista local y la pantalla compartida cuando se activa.

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

¡Boom! Ahora tenemos una sesión de Video. Prueba a unirte desde varias pestañas/diferentes nombres. ¡Pum! Ya tenemos videoconferencia en Rails.

Próximos pasos

En la Parte 2 añadiremos algunas de las funciones que cabría esperar de una videoconferencia moderna:

• Compartir pantalla: se delimitará para que sólo nuestro moderador pueda utilizarlo.

• Silenciar a los demás participantes

• Silenciarse

• Escóndete (apaga la cámara)

• Seleccionar entradas: micrófono y cámara

• Seleccionar salida de audio

Lo haremos añadiendo más componentes Vivid y añadiendo algo de Javascript de Video Express.

Si has llegado hasta aquí, ¡buen trabajo! Un saludo en Twitter y cuéntame qué te ha parecido el tutorial.