Receta: crear un canal de live shopping
WebRTC de sub-segundo desde un teléfono o webcam, chat en vivo y reacciones flotantes sobre el data channel, un contador de espectadores, un botón de compra y toda la sesión grabada. El armado completo de compraventa en vivo.
Por qué el live shopping
La venta en vivo achica la distancia entre "lo vi" y "lo compré". Un presentador muestra el producto, responde preguntas en el chat, y la audiencia paga sin salir del stream. Las dos cosas que lo hacen o lo rompen son la latencia (un retraso de dos segundos arruina una ronda de preguntas) y la interacción (chat, reacciones, un conteo en vivo). StreamHub te da las dos desde una sola app.
La arquitectura en palabras
El presentador publica por WebRTC para latencia sub-segundo de cámara a pantalla. Los espectadores se suscriben con un play-token anónimo, así cualquiera con el enlace puede mirar. El chat y las reacciones viajan por data channels de LiveKit (temas chat y reaction); el contador de espectadores lee suscriptores reales. Un sample listo, live-shopping.html, empaqueta el reproductor de baja latencia, el chat, las reacciones y un botón de compra, y la sesión se graba en tu S3 para repeticiones.
1. Crear la app y encender las funciones interactivas
Chat, reacciones y contador de espectadores vienen apagados por defecto — encendelos primero:
export BASE="https://your-server.example.com/api/v1"
export TOKEN="sk_...."
curl -s -X POST $BASE/apps -H "Authorization: Bearer $TOKEN" \
-H 'Content-Type: application/json' \
-d '{"name":"shop","displayName":"Live Shop"}'
curl -s -X PATCH $BASE/apps/shop -H "Authorization: Bearer $TOKEN" \
-H 'Content-Type: application/json' \
-d '{"features":{"chat":true,"reactions":true,"viewerCounter":true}}'
2. Darle al presentador un token de publicación
El presentador sale en vivo desde el navegador (webcam + micrófono) con un token de publicación:
curl -s -X POST $BASE/apps/shop/tokens -H "Authorization: Bearer $TOKEN" \
-H 'Content-Type: application/json' \
-d '{"room":"friday-drop","canPublish":true,"canSubscribe":true}'
# → data.token / data.wsUrl — conectá y publicá
La respuesta incluye token, wsUrl y playUrl / embedUrl / iframe copiables.
3. Poner a la audiencia frente al sample
El sample llave en mano live-shopping.html se sirve público y ya cablea el reproductor WebRTC, el chat, las reacciones y un botón de "Comprar". Autentica a los espectadores con el play-token público por sala, así no hace falta login. Mandá a los compradores directo a tu checkout con el parámetro buyUrl:
https://your-server.example.com/samples/shop/live-shopping.html?buyUrl=https://tienda.example.com/checkout
Gestioná o regenerá los samples con GET /apps/shop/samples y POST /apps/shop/samples/regenerate.
4. Chat, reacciones y el conteo
El chat normal de los espectadores fluye directo por el data channel de LiveKit desde la página del sample — sin llamada a la API. Cuando querés que el servidor inyecte un mensaje (un "20% off por los próximos 10 minutos" fijado, un aviso del sistema, o para garantizar que dispare un callback), lo posteás:
curl -s -X POST "$BASE/apps/shop/streams/friday-drop%2Fhost/data" \
-H "Authorization: Bearer $TOKEN" -H 'Content-Type: application/json' \
-d '{"topic":"chat","message":"Envio gratis en la proxima hora","from":"Tienda"}'
El conteo de espectadores está en el detalle del stream — GET /apps/shop/streams/<id> devuelve data.viewers (suscriptores reales; el presentador y los monitores ocultos quedan excluidos) siempre que viewerCounter esté activo, y también se exporta como el gauge Prometheus streamhub_stream_viewers.
5. Grabar la sesión
Capturá todo el show en tu bucket para una repetición o clips. Para un solo presentador, grabá solo ese publicador con ffmpeg (sin Chrome headless):
curl -s -X POST $BASE/apps/shop/recording/start -H "Authorization: Bearer $TOKEN" \
-H 'Content-Type: application/json' \
-d '{"roomName":"shop-friday-drop","recordMode":"track"}'
Cuando egress termina, el VOD pasa a ready y dispara vod_ready.
Qué deberías ver
El presentador está en vivo con latencia sub-segundo. En la página del sample, los mensajes del chat y las reacciones flotantes aparecen al instante, el número de espectadores sube a medida que entra gente, y el botón de compra abre tu checkout. Después del show, un VOD de la sesión queda en tu S3.
Resolución de problemas
- El chat o las reacciones no hacen nada — son funciones por app y vienen apagadas por defecto. Confirmá que el
PATCHdel paso 1 haya quedado; un post dereactiona una app deshabilitada devuelve 404. - La latencia se siente como difusión, no como vivo — asegurate de que los espectadores estén en el reproductor WebRTC (el sample), no en una URL HLS. HLS cambia latencia por escala; para venta interactiva querés WebRTC.
- Sin checkout — StreamHub no incluye backend de pagos. El botón de compra es un lanzador; conectá
buyUrla tu propia tienda o link de pago.
Cierre
Todo esto corre sobre infraestructura tuya, sin una factura de streaming por minuto comiéndote el margen. Si querés un reproductor de tienda con tu marca, herramientas de moderación, o la integración de checkout construida alrededor de este flujo, es un servicio de consultoría natural sobre el core open source.