Uno de los problemas principales a la hora de gestionar el chat cuando realizas emisiones en directo es que debes tener varias pestañas del navegador cada una para cada plataforma, por ejemplo Twitch y Youtube y eso ocupa espacio en la pantalla. Así como otro de los problemas a resolver es cuando alguien te hace una pregunta o un comentario que quieres destacar en pantalla cómo lo seleccionas y lo presentas. En esta entrada hablaremos de cómo resolver estos dos problemas usando Social Stream.

¿Qué es Social Stream?

Repositorio: https://github.com/steveseguin/social_stream?tab=readme-ov-file#to-install

Social Stream es una extensión de Chrome (principalmente) que ofrece URL’s para incluir en OBS tanto el chat en sí mismo como cuando destacamos un mensaje. Y está creado por la misma persona que Crea el VDO Ninja que usamos para la producción de entrevistas y podcast para incluir feeds de video/webcam y audio de personas que participan en el OBS.

¿Cómo lo instalo?

De cara a instalar la extensión primero debemos descargar, por ejemplo en formato zip, desde el apartado Releases del repositorio: https://github.com/steveseguin/social_stream/releases

Deberemos descargar el Source Code en formato zip

Después debes descomprimir el fichero zip donde quieras por ejemplo en Descargas

El siguiente paso es pedirle a Chrome que use este directorio como extensión

Abrimos Chrome y vamos a la url: chrome://extensions/

Como vemos deberemos cambiar el Toggle para activar el modo desarrollador

El siguiente paso será pulsar el botón de Cargar Descromprimida y seleccionar la carpeta donde hemos descomprimido la extensión Social Stream.

Entonces debería aparecer una nueva extensión llamada Social Stream Ninja

Con esta extensión activada podemos pinearla de la manera habitual

Configuración de los chats de cada plataforma

Si queremos que los chats de cada plataforma estén incluidos en el chat conjunto de Social Stream necesitaremos colocarlos como ventanas independientes.

Por ejemplo en Twitch se hace desde el apartado de Gestor del stream en el panel de Mi chat pulsando en los tres puntos y luego en Mostrar chat en una ventana emergente

Esto debería abrir una ventana nueva del navegador sólo con el chat

En el caso de Youtube pasa de manera parecida desde la pantalla de gestión del Stream en el apartado de Chat, pulsamos en los tres puntos y luego en abrir en otra ventana

Con esto deberíamos tener una nueva venta sólo con el chat de Youtube

Y Con todas aquellas plataformas que hayamos hecho este proceso Social Stream ya estará capturando los mensajes enviados

Para probar que funciona la captura vete a la extensión

Copia la URL del Streaming chat (dockable) y abrelo en una nueva pestaña del navegador y si escribes mensajes en cada chat debería aparecer en la url conjunta

Configuración de los enlaces y en OBS

Una vez pineada, colocadas los chat en ventanas y comprobado que funciona presentando los mensajes ya podemos configurar las URL’s desde la configuración de la extensión

El enlace del Streaming Chat (dockable) es el que nos permitirá disponer de un chat conjunto visible por pantalla gracias a una fuente de tipo Navegador en OBS pero podemos configurarlo a nuestro gusto.

El enlace irá cambiando según vayamos añadiendo opciones, por ejemplo si le ponemos un fondo verde, para que luego podamos quitarlo con el OBS, la url será así

Recuerda que cada vez que cambias alguna configuración la URL cambia y deberás actualizarla en OBS, lo bueno es que como la guardas en OBS no deberás configurarla antes de cada stream

Yo por ejemplo uso las opciones: &darkmode&fadeout&notime&split&swipeleft&twolines

Ahora ya con la URL generada podemos añadirla al OBS como una fuente de tipo Navegador

Como he usado un fondo dark puedo configurar el css personalizado para que quite el fondo del body de la página que pilla del Social Stream

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

Coloca las dimensiones que quieras al frame en mi caso le he puesto 1024×768

Respecto a la URL del mensaje destacado pasa algo parecido, también se puede configurar de la misma manera, usando la url de featured chat.

Que se incluye de la misma manera con la fuente de tipo navegador

Cuando quieras destacar un mensaje bastará con que lo selecciones con el botón izquierdo del ratón para que se destaque y volver a pulsar sobre él para quitarlo, o bien pulsar en otro diferente. Debería aparecer con el fondo en verde (como que ya lo has visto) en la ventana del chat.

Si un mensaje está destacado se vería de esta manera en el directo (sin la parte del reproductor y el logo de chrome claro XDD)

Conclusiones

Aunque hemos visto las funcionalidades más básicas del Social Stream tiene muchísimas funcionalidades y van añadiendo más, así como más plataformas con el tiempo. Con esto esperamos que mejores en la calidad de tus streams y producciones con este software libre 🙂