End Credits
Descripción
Un widget de créditos de fin de stream que se desplaza automáticamente con todos los contribuyentes del directo (moderadores, follows, subs, cheers, raids, etc.).
Está construido en una página HTML simple, con HTML, CSS y vanilla JS.
Instalación y Configuración
Configure sus créditos y grupos en streamer bot
Los créditos son una función nativa de streamer bot. El widget se encarga de recibir y mostrar la información.
Consulte directamente la documentación oficial de streamer bot para saber cómo configurar sus créditos.
Active el servidor WebSocket de streamer bot
Este paso es crucial para que streamer bot pueda comunicarse con el widget y enviar la información registrada durante el directo.
Configure el widget
Abra la página del widget con el editor de código de su elección. Cada sección editable está comentada para poder ser encontrada fácilmente. Los detalles están en la sección de personalización más abajo.
Añada una nueva fuente de navegador en OBS
- Marque la casilla
local file - Navegue hacia el archivo .html
- Ajuste la altura y el ancho como desee según las dimensiones de su overlay.
Para usar los créditos simplemente hay que activar la fuente en OBS. Para refrescar los créditos puede usar el botón "refresh browser source" desde las propiedades de la fuente, o desactivar y luego reactivar la fuente.
Personalización
Modificar los textos
Los grupos deben estar configurados en Streamer.bot previamente.
Modificar la velocidad de desplazamiento
La velocidad de desplazamiento se calcula en la const duration del script a partir de la altura de su fuente de navegador OBS. Modifique el factor por el cual la función se multiplica para aumentar o disminuir la velocidad de desplazamiento hasta que corresponda a lo que desea.
Modificar los estilos
Los estilos de este widget se han mantenido muy simples para permitirle modificarlos como desee. El CSS está incluido directamente en la página.
| Selector | Descripción |
|---|---|
| .wrapper | Contenedor de créditos. |
| h1 | Títulos de secciones (Eventos y Usuarios Presentes). |
| h2 | Títulos de grupos. |
| .name | Nombres de usuarios. |
| #license | Información de licencia de esta página. |
Modo de prueba
Modifique el valor de request para activar el modo de prueba.
Use el modo de prueba para:
- Probar la velocidad de desplazamiento
- Verificar el diseño y los títulos de sus secciones
- Verificar y ajustar los estilos
GetCredits antes de iniciar su directo!Solución de Problemas
Los créditos no se inician
- Verifique que Streamer.bot esté conectado
- Consulte los logs de Streamer.bot para errores
- Pruebe la fuente directamente en su navegador y mire la consola para ver la causa del error.
Algunas secciones no se muestran
- Si no se reciben datos para una sección, se oculta automáticamente. Verifique su configuración de streamer bot.
- Verifique que no haya cometido un error al editar el código. El valor marcado en "key" debe ser exactamente el mismo que en streamer bot.