Ejecuta tus videos y transmisiones en vivo desde tu propio sitio con la API de DCAST

Si tu producto ya tiene sus propias páginas, usuarios y base de datos, enviar a las personas a un panel de video aparte es un paso atrás. Lo que quieres es que tu propio código agregue videos, los liste e inicie transmisiones mientras los visitantes se quedan en tu sitio. Este artículo te guía por esa configuración con la API de DCAST, las decisiones que debes tomar primero y los fallos que conviene revisar antes del lanzamiento.

Conecta tu sitio a DCAST una sola vez mediante la API; a partir de ahí, tu propio código agrega nuevos videos y crea transmisiones en vivo, sin visitar el panel de DCAST.

Mantén la clave en tu servidor y decide quién es dueño de qué

Antes de escribir cualquier código de subida, decide dónde vive la clave de la API. Mantén la clave de la API en tu servidor y nunca la coloques en una página que carguen tus visitantes. Cualquiera que abra el código fuente de la página o el registro de red puede copiar una clave enviada al navegador, y desde ese momento puede actuar como tu cuenta. Guárdala en una variable de entorno, mantenla fuera del control de versiones y haz que tu navegador se comunique solo con rutas de tu propio backend. Esas rutas deben comprobar que el visitante tiene permiso para subir antes de llamar a la API de video.

Un video agregado mediante la API pertenece a la cuenta propietaria de la clave de la API. Si varios proyectos comparten una clave, todos sus videos terminan en una sola biblioteca y no puedes saber de quién es cada contenido. Siempre que puedas, usa una clave distinta para cada proyecto, de modo que puedas rotar una sin romper las demás y que una filtración tenga menor alcance.

Sube un video desde tu propio código

Cuando agregas un video mediante la API, le asignas un título, un nombre de archivo, un tamaño de archivo y una visibilidad, como pública.

Cada solicitud de subida devuelve la dirección a la que tu sitio envía el archivo de video y una dirección de estado que le indica a tu sitio cuándo el video está listo para mostrarse.

El archivo en sí se envía a la dirección de subida devuelta mediante una solicitud PUT.

Decide quién envía los bytes. Enviar desde tu servidor es el camino más sencillo para registrar y reintentar. Enviar directamente desde el navegador del visitante evita que tu backend tenga que retransmitir archivos grandes, pero entonces debes asegurarte de que la dirección de subida sea segura de exponer a ese visitante y debes manejar una pestaña que se cierra a medio camino. Elige un enfoque por proyecto, anota por qué lo elegiste y pruébalo con una conexión limitada.

El espacio de almacenamiento para el archivo se reserva para tu cuenta en el momento en que se solicita la subida, antes de que se mueva el primer byte del archivo.

Lee la respuesta a la solicitud de subida antes de empezar a enviar bytes y detente si es un error. Enviar un archivo grande a una dirección que nunca confirmaste hace perder el tiempo de tu visitante y tu ancho de banda. Muestra un mensaje claro cuando se rechace la solicitud y evita reintentar en un bucle cerrado, que solo repite el mismo rechazo.

Mide el tamaño del archivo de tu lado y envía ese número exacto. Una discrepancia entre el tamaño declarado y el archivo real es el tipo de error que aparece solo con subidas grandes, así que prueba un archivo pequeño y un archivo de varios gigabytes antes de confiar en el flujo.

Espera a la dirección de estado antes de mostrar un video

Tu sitio no debe mostrar un reproductor en cuanto termina el PUT. La dirección de estado de la solicitud de subida es la forma en que tu sitio sabe que el video está listo para mostrarse, así que guárdala junto al registro del video en tu propia base de datos.

Consulta con intervalos crecientes, por ejemplo cada pocos segundos al principio y luego cada treinta segundos, y detente tras un límite razonable. Guarda el último estado conocido con una marca de tiempo para que un reinicio del servidor no pierda el rastro de un video. Cuando se agote el límite, marca el video como retrasado en tu interfaz en lugar de mostrar un indicador de carga que nunca termina.

Cada video de la lista muestra su estado, por ejemplo listo, junto con la dirección de su página de reproductor.

Usa esa lista como red de seguridad. Una tarea nocturna que compare tu base de datos con la lista detecta cualquier video cuya comprobación de estado se haya omitido, por ejemplo porque tu servidor estaba caído durante la espera. Corrige la discrepancia actualizando tu propio registro, no volviendo a subir el archivo.

Crea una galería a partir de tu biblioteca

Tu sitio lee la lista de tus videos con el estado de cada uno y obtiene el código del reproductor listo para cualquiera de ellos, de modo que puede construir su propia galería de videos a partir de tu biblioteca de DCAST.

La lista de tus videos contiene solo los videos de la cuenta propietaria de la clave, nunca los videos de otra cuenta.

La lista está paginada e indica el número total de tus videos, de modo que tu sitio puede recorrer una biblioteca grande por páginas.

No obtengas toda la biblioteca en cada visita a una página. Guarda la lista en caché en tu servidor durante un tiempo corto, muestra a los visitantes solo los videos cuyo estado sea listo y usa el conteo total para dibujar los enlaces de página. Limpia la caché cuando tu propio código agregue un video, para que el nuevo elemento aparezca de inmediato.

Solicitar el código del reproductor de un video que pertenece a otra cuenta se responde como no encontrado. Trata esa respuesta como un caso normal en tu código. Cuando aparezca para un identificador que guardaste tú mismo, primero revisa qué clave está usando tu entorno, porque una clave equivocada es una causa más probable que una caída del servicio.

Coloca el reproductor en tu página

El código del reproductor viene como una dirección simple, como un fragmento iframe y como una versión adaptable que se ajusta a la página.

El código del reproductor es un iframe que colocas en tu propia página.

Elige según el diseño. Usa la versión adaptable en páginas de artículos y cuadrículas de tarjetas, donde el ancho cambia con la pantalla. Usa la dirección simple cuando quieras construir tú mismo el iframe, por ejemplo para agregar un atributo title que ayude a los lectores de pantalla. Revisa la página en un teléfono real antes del lanzamiento, porque un marco de tamaño fijo es la razón más común por la que un video insertado se ve roto en el celular.

Puedes colocar el reproductor de tus videos y transmisiones en tu propio sitio web con un código de inserción corto.

De forma predeterminada, el reproductor insertado funciona en cualquier sitio web, así que un socio o un fan puede compartir tu contenido sin pedirte permiso antes.

Si quieres tener control, indica los dominios donde puede aparecer tu reproductor y todos los demás sitios web serán rechazados.

Decide la lista según tu objetivo. Restringe la lista cuando vendas acceso a través de tu propio sitio y quieras que el reproductor aparezca solo ahí. Deja la lista vacía cuando tu objetivo sea el alcance, porque entonces cada copia del código de inserción funciona para quien la pegue.

Inicia transmisiones en vivo desde tu código

Tu sitio crea una transmisión en vivo mediante la API y recibe las direcciones a las que publicar, junto con el código del reproductor para la página que muestra la transmisión.

Una transmisión nueva viene con una dirección RTMP, una dirección SRT y, cuando está disponible, una dirección HTTPS para WHIP.

Una transmisión en vivo creada mediante la API se almacena para tu cuenta y tiene su propia dirección de inserción para el reproductor.

Elige la dirección de publicación que corresponda a tu codificador. RTMP lo aceptan casi todos los codificadores de escritorio y equipos de hardware, SRT se comporta mejor en una red con pérdidas cuando tu codificador lo admite, y WHIP permite que un navegador publique sin software adicional. Si no tienes una razón de peso para elegir otra cosa, empieza con RTMP y pasa a las demás cuando tu primera transmisión funcione.

Antes de un evento real, haz un ensayo de diez minutos creado con el mismo camino de código que usarás el día del evento. Comprueba que el reproductor de tu página muestra la imagen, que hay sonido y que tu codificador se reconecta después de desconectar la red unos segundos. Luego guarda el identificador de la transmisión para que tu equipo de soporte pueda encontrarla más tarde.

Haz estas comprobaciones antes del lanzamiento

Recorre esta lista corta en orden. Primero, busca la clave de la API en tus páginas compiladas y en el registro de red del navegador; no debe aparecer en ningún lado. Segundo, sube un archivo pequeño, un archivo grande y un archivo no compatible, y confirma que cada uno termina en un estado que tu interfaz pueda explicar. Tercero, abre la galería como visitante sin sesión iniciada y comprueba que los videos sin terminar estén ocultos. Cuarto, solicita un reproductor para un identificador que no existe y confirma que tu página se degrada con elegancia en lugar de mostrar un marco vacío.

Cuando estas comprobaciones pasen, tus visitantes verán un solo sitio, tu código será dueño del flujo de trabajo y la plataforma de video quedará en segundo plano. Empieza con una subida y una página de galería, y luego agrega transmisiones cuando la primera parte funcione sin problemas.