Documentación Streaming Live

Revise detenidamente la siguiente guía para el correcto funcionamiento de su servicio. La guía es exclusivo solo para planes streaming live de Prosandoval.

Configurar OBS Studio para transmisión de video

Paso 1: Descargar e Instalar OBS Studio

1. Descargar OBS Studio

2. Instalar OBS Studio

  • Abre el archivo de instalación descargado.
  • Sigue las instrucciones en pantalla para completar la instalación.

Paso 2: Configurar OBS Studio para Transmitir en vivo

1. Abrir OBS Studio

  • Inicia OBS Studio desde el menú de inicio o el escritorio de tu ordenador

2. Configurar los Ajustes de Transmisión en OBS

  • Ve a «Ajustes» (Settings) en la esquina inferior derecha de OBS

3. Configurar clave de transmisión

En la ventana de ajustes vaya a emisión y realice los ajustes. Para configurar la transmisión, necesitarás dos datos que recibirás al activar tu cuenta: el servidor y la clave de retransmisión.

Servidor: La URL del servidor de streaming al que te conectarás para comenzar a transmitir.
Clave de retransmisión: La clave que se te proporciona al activar tu cuenta, necesaria para autenticar tu transmisión.

4. Configurar bitrate de video

Dentro de la misma ventana de ajustes vaya a salida y realice los ajustes con los datos enviados del servicio.

Tasa de bits: Ingrese los datos del bitrate al que deseas transmitir. Los 1200 kbps que se ve en la imagen es solo un ejemplo, recuerda respetar el límite de bitrate asignado a tu plan de video streaming contratado. Revisa los datos enviados de tu cuenta.

5. Configurar bitrate de audio

El bitrate de audio es la calidad del audio del video en la transmisión, para configurar el bitrate de audio vaya dentro del panel de ajustes a Audio y selecciona el bitrate de audio al que deseas transmitir. Por defecto es 44,1 khz.

6. Configurar resolución de salida de video

La resolución de salida será el tamaño máximo que nuestro video podrá ser visualizado por el espectador. La resolución colocada en la imagen de 1280×720 es solo un ejemplo. usted deberá colocar la resolución según el plan contratado y debe respetar el mismo, caso contrario el servicio tendrá problema de transmisión y será cancelada.

Para la configuración vaya dentro de ajustes a video y coloque su resolución de su plan. El FPS dejarlo en 24 al menos que su plan indique lo contrario.

7. Iniciar transmisión de video en vivo con OBS Studio

Configurado OBS Studio siguiendo los pasos detallados anteriormente ya es hora de transmitir en vivo, para ello solo hacemos clic en Iniciar Transmisión y si todo ha sido configurado correctamente podrá ver el live en su sitio web o landing TV.

Nota Importante

La configuracion dada en esta guía es lo necesario para transmitir en vivo y usted puede ajustar según las características de su equipo tanto en hardware y software, siempre y cuando respetando los datos del streaming de su plan adquirido.

Incrustar en su sitio web el video live

Incrustar video iframe

Nuestro servicio de streaming video le permite incrustar su transmisión de video directamente en cualquier otro sitio web o fuente sin tener que configurar un reproductor.

La URL exclusiva de video de tu contenido de transmisión se encuentra en: https://your.host/embed/video

A continuación se muestra un ejemplo de HTML que puedes utilizar, solo cambie el link o URL (color rojo) por el enviado a su correo, el título de su canal y ajuste medidas de ancho y alto según sus necesidades.

<iframe
  src="https://your.host/embed/video"
  title="PROSANDOVAL TV"
  height="350px" width="550px"
  referrerpolicy="origin"
  allowfullscreen>
</iframe>

Los videos incrustados no comenzarán a reproducirse antes de que el usuario presione el botón de reproducción. Esto significa que no se escuchará ningún sonido cuando se cargue una página con un video incrustado. Si desea que el reproductor se silencie adicionalmente una vez que comience a reproducirse, puede agregar ?initiallyMuted=true a la URL (para que se vea algo como https://your.host/embed/video?initiallyMuted=true). Los usuarios aún podrán reactivar el video manualmente una vez que se esté reproduciendo.

Incrustrar video con  HLS HTTP Live Streaming

Para un player mejor optimizado, siempre que el reproductor lo admita, se recomienda abrir la página de inicio de su instancia Streaming live directamente. El reproductor encontrará automáticamente la lista de reproducción correcta y comenzará a reproducir. Sin embargo, si necesita la fuente HLS (es decir, para compartir su transmisión con un reproductor de terceros), puede acceder a la fuente HLS directamente a través de esta URL: https://your.host/hls/stream.m3u8

Descarga este código listo para usar en una página html, solo debes  cambiar tu URL de HLS. Descargar ahora

Si deseas incrustrar en una sección de wordpress sea elementor o html usa el código a continuación y reemplaza el link m3u8

<div style="position: relative; width: 100%; padding-top: 56.25%; max-width: 800px; margin: auto;">
    <video id="videoPlayer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" controls>
        <source src="https://live.prosandoval.com/hls/stream.m3u8" type="application/x-mpegURL">
        Tu navegador no soporta la reproducción de videos HLS.
    </video>
</div>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    if (Hls.isSupported()) {
        var video = document.getElementById('videoPlayer');
        var hls = new Hls();
        hls.loadSource('https://live.prosandoval.com/hls/stream.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play();
        });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = 'https://live.prosandoval.com/hls/stream.m3u8';
        video.addEventListener('loadedmetadata', function() {
            video.play();
        });
    }
</script>

Incrustar Chat en su sitio web

Streaming Live permite integrar su chat directamente en cualquier otro sitio web o fuente. Hay dos tipos de chats integrados: un chat de solo lectura que solo muestra los mensajes y un chat independiente que tiene la misma funcionalidad que el de la interfaz web principal de su consola Streaming Live.

Incorporar un chat independiente

La URL del chat independiente se encuentra en: https://your.host/embed/chat/readwrite

Incorporar chat de solo lectura

La URL del chat de solo lectura se encuentra en: https://your.host/embed/chat/readonly

Incrustar Chat en OBS Studio

1. Haga clic en el botón + o haga clic con el botón derecho del mouse para agregar una nueva fuente. Elija una Browser o Navegador de las opciones de la lista.

2. Para crear una nueva fuente, deberá agregar el nombre. Escriba “ Chat ”.

3. En la configuración de origen del navegador, deberá cambiar la URL a https://your.host/embed/chat/readonly de su instancia Streaming Live.

4. Puede utilizar el CSS personalizado para modificar la forma en que el navegador muestra su video. El siguiente ejemplo agregará algo de espacio alrededor del cuadro, le dará un fondo oscuro semitransparente y aumentará el tamaño general de la fuente a una unidad base de 24 píxeles. Puede cambiar cualquiera de estas configuraciones para que se adapten al diseño de su presentación. Tenga en cuenta que el color general del texto del mensaje es blanco.

html {
  margin: 0px;
  padding: 20px;
  background-color: rgba(0,0,0,0);
  font-size: 24px;
}

#chat-container {
  background-color: rgba(0,0,0,0.5);
}

5. Haga clic en «Aceptar» para guardar la configuración de chat y reposicionar la nueva fuente de chat en su escena.

¿No encuentras lo que buscas?

Después de leer y si aun tiene duda sobre el manejo de su servicio en Prosandoval, por favor cree un ticket de soporte con el tema de su preferencia y le ayudaremos encontrar una respuesta lo antes posible.

Solicitar soporte