In the previous post (https://www.brightcove.com/ja/resources/blog/live_stream_chat_1/ “previous”), we introduced how to set up <a href=“https://chatroll.com/” target=“_blank” title=“Chatroll”>Chatroll</a>. This time, we will introduce the integration between our products [Brightcove Gallery](https://www.brightcove.com/ja/products/gallery/ “Brightcove Gallery”) (video portal site construction function) and [Brightcove Live](https://www.brightcove.com/ja/solutions/live-streaming/ “Brightcove Live”).
Índice
- 1. Acerca de Brightcove Gallery](#1-brightcove-gallery)
- [2. Cómo configurar Brightcove Gallery](#2-brightcove-gallery)
- [3. Cómo configurar Video ID](#3-video-id)
- [4. Ajustes de reflejo](#4-)
## 1. Acerca de Brightcove Gallery
Brightcove Gallery es una función que permite crear fácilmente un sitio de portal de vídeo. Puede crear un sitio de portal de vídeos que se ajuste a la imagen de marca de su empresa a partir de las plantillas siguientes.
Además de esta plantilla "Portal", en 2017 también se lanzó una nueva plantilla "In-Page", que le permite incrustar listas de reproducción de vídeo en su sitio web existente. (Para más detalles, consulte [aquí](https://www.brightcove.com/ja/resources/blog/gallery-inpage-part1/ "aquí").
Puede utilizar Chatroll con las funciones 'Portal' o 'In-Page'. En este ejemplo, le mostraremos cómo utilizar la función 'In-Page' para implementar una función de chat al retransmitir en directo.
*Brightcove Gallery dispone de varios ajustes, pero en esta ocasión presentaremos los ajustes mínimos. Para obtener información sobre las especificaciones de Brightcove Gallery y cómo realizar los ajustes, consulte [aquí](https://ja.gallery.support.brightcove.com/get-started/getting-started-brightcove-gallery.html "aquí"). Si tiene alguna duda, póngase en contacto con nuestro servicio de asistencia técnica según las condiciones de asistencia de su contrato.
## 2. Cómo configurar Brightcove Gallery
Inicie sesión en Video Cloud y seleccione el módulo Galería. Tras la transición, haga clic en "Nueva experiencia" en la esquina superior izquierda de la pantalla superior del módulo Galería.
)
Tras la transición, haga clic en la tercera pestaña de la izquierda, "In-Page". Esto mostrará varias plantillas, así que por favor seleccione "Live Event In-Page".
Introduzca el "Título de la experiencia" y la "Descripción de la experiencia", etc., y establezca el "Idioma de la experiencia" en japonés. Una vez completados los ajustes, haga clic en "Crear experiencia". (Puede cambiar estos ajustes más adelante).
En este ejemplo, lo configuraremos para que la pantalla de chat Chatrol configurada en la primera parte se muestre a la derecha del reproductor de vídeo donde se está emitiendo el vídeo en directo. Si hace clic en el botón "+" que aparece a la derecha, aparecerá una pantalla llamada "Seleccionar componente", así que haga clic en "Chat".
A continuación, aparecerá la siguiente ventana emergente. Introduzca la etiqueta de incrustación de Chatroll (etiqueta iframe) en la sección "Código HTML del chat". Recomendamos cambiar el "width" (ancho) al 100% y el "height" (alto) a 500px en este momento.
En este ejemplo, configuraremos la ventana de chat para que se muestre desde antes del evento en directo hasta después del evento. Marque todas las casillas que aparecen debajo de "¿Cuándo desea que se muestre este chat?", "Antes del evento", "En directo" y "Después del evento" y, a continuación, haga clic en el botón Guardar.
Si hace clic en "Vista previa" en la parte superior derecha después de la transición, la pantalla de chat que configuró en la sección anterior se mostrará de la siguiente manera. (A continuación, el "estado de reproducción" que aparece en la parte superior derecha de la vista previa está configurado como "En directo".
## 3. Cómo configurar el ID de vídeo
A continuación te explicamos cómo obtener el Video ID del vídeo que quieres emitir en directo.
En este artículo, no vamos a cubrir el método de transmisión en vivo (cómo crear un evento en vivo) en sí. Para más detalles, por favor consulte [aquí](https://ja.live.support.brightcove.com/live-module/creating-and-managing-live-events-using-live-module.html "aquí"). Después de crear un evento con el módulo Live, por favor copie el "Video ID" mostrado en la "Sala de Control" del evento.
Después de copiar, vuelve al módulo Galería y haz clic en la pestaña "Vídeo" de la izquierda. Tras hacer clic, aparecerán las opciones "Antes del evento", "En directo" y "Después del evento", así que haz clic en "En directo". A continuación, a la derecha, aparecerá una pantalla llamada "Seleccionar vídeo", así que asegúrate de que el botón de opción "ID de vídeo" está seleccionado y pega el ID de vídeo que has copiado antes.
## 4. Reflejar los ajustes
Por último, para aplicar los ajustes realizados en Galería, haga clic en "Publicar e incrustar" en la parte superior derecha del módulo Galería, y aparecerá la siguiente pantalla.
Al poco tiempo, el "Estado público" mostrará "Esta experiencia está actualizada. Por favor, instala el JavaScript que aparece en "Recomendado" en tu sitio web. Entonces, el reproductor de vídeo no debería mostrarse como se muestra a continuación, y sólo la ventana de chat debería mostrarse a la derecha.
Esto no es un error, sino que se debe a que los ajustes del módulo Galería están configurados en el estado anterior al inicio de la retransmisión en directo (antes del evento). Tras confirmar que la retransmisión en directo ha comenzado en el módulo En directo, haga clic en "Cambiar" junto a "Antes del evento" en la parte superior izquierda del módulo Galería, y aparecerá la ventana emergente "Cambiar lo que ven los espectadores". Tras seleccionar el botón de opción "En directo", haga clic en "Continuar".
Todos los ajustes se han completado. El reproductor de vídeo para la retransmisión en directo debería aparecer ahora en su sitio web, con la ventana de chat a la derecha. Al igual que en la sección anterior, introduzca el nombre del invitado (en este caso, hemos introducido "Brightcove Guest") en el campo "Invitado" de la ventana de chat e inicie sesión.
Ahora puede introducir sus mensajes de chat mientras ve la retransmisión en directo, como se muestra a continuación.
In this case, we have used Chatroll and Brightcove Gallery to enable chat during live streaming. In addition to this, there are also other ways to implement chat and surveys, such as using <a href=“https://sendbird.com/” target=“_blank” title=“Sendbird”>Sendbird</a> in the US and <a href=“https://pigeonholelive.com/” target=“_blank” title=“Pigeonhole”>Pigeonhole</a> in Singapore. Please feel free to use these services according to your company’s needs.
