Realización de una secuencia de créditos virtuales para sus videollamadas con OBS y CodePen

Vi a Scott Hanselman hacer este tweet el otro día sobre agregar créditos al final de las reuniones:

¡Me encanta esta idea y decidí hacer una yo mismo!

El código

Primero, fui a CodePen y reuní una matriz de texto para desplazarme. solía una lista de publicaciones de blog que he escrito en el blog de Netlify.

let posts = [
  "An Incredibly Serious Discussion about Next.js at Reactathon",
  "Enabling AMP in your Next.js projects",
  "Adding Babel presets and plugins in Next.js",
  "React Children: The misunderstood prop",
  "Query an API at both build time and runtime with Next.js",
  "How to turn off telemetry in Next.js",
  "Add Web Monetization to your sites with Snippet Injection",
  "Logging in Next.js",
  ...
]
Entrar en modo de pantalla completaSalir del modo de pantalla completa

A partir de ahí, hice una pequeña función para agregar cada uno de estos en un <div>, que agrego a un existente container en mi página.

(() => {
  posts.map((p) => {
    document.querySelector('.container').innerHTML += `<div>${p}</div>`
  })
})()
Entrar en modo de pantalla completaSalir del modo de pantalla completa

En el CSS, hice el fondo limegreen e hice algunas animaciones para desplazarlo. También agregué una fuente personalizada y otras cosas, esta parte puede hacerla según lo desee.

Aquí está el lápiz final para que lo pruebes:

¡Siéntete libre de bifurcar esto si quieres personalizarlo!

OBS

OBS (software de transmisión abierta) es un programa gratuito que funciona en todos los sistemas operativos y que podemos utilizar para crear una “cámara virtual”.

Descarga OBS y crea una nueva escena. Hay un panel de escenas en la parte inferior derecha de la aplicación:

Agregar una escena

Haga clic en el + firma en la esquina inferior izquierda de y ponle el nombre que quieras. Como puede ver, llamé a la mía “Escena”, porque no soy inteligente.

En el panel junto a Escenas, hay un panel de Fuentes. Vamos a agregar dos fuentes a nuestra escena haciendo clic en ese + firmar de nuevo.

Primero, agregue un dispositivo de captura de video y elija su cámara web.

Elige una cámara

Luego, agregue un navegador e ingrese la URL de su CodePen. Yo personalmente usé mi lápiz en la Vista en vivo, pero también puede usar la Vista de página completa.

Agregar una pluma

El tuyo probablemente todavía tendrá el fondo verde. ¡Eliminemos eso! En el panel Fuentes, haga clic derecho en su navegador y haga clic en “Filtros”.

En Filtros de efectos, haga clic en el + y agregue un filtro Clave de color. Haga que el tipo de color clave sea verde y ajuste los niveles hasta que todo el verde sea transparente en su lápiz en la vista previa, así:

Selector de clave de color

Cierre esta ventana cuando esté satisfecho con ella y ahora es el momento de los ajustes finales.

Dentro de la ventana principal de vista previa en OBS, puede arrastrar la cámara y el texto hasta que esté satisfecho con ellos. Por ejemplo, hice mi navegador un poco más ancho que la vista previa en sí, para que la barra de desplazamiento no apareciera en el marco.

Ventana de vista previa

¡Y tu estas listo! Haga clic en “Iniciar cámara virtual” en la parte inferior derecha para que pueda usarla en otras aplicaciones:

Botón de cámara virtual

¡Úsalo!

Ahora, cuando esté en Zoom, Google Meet, una conferencia, transmisión en vivo o cualquier otra cosa, puede elegir esta cámara virtual que ha creado en lugar de su cámara web normal.

Cassidy bailando con créditos

También puede hacer algo más que una secuencia de créditos. Puede agregar diagramas, ventanas emergentes divertidas, animaciones y mucho más. ¡Ve y crea!