Chromecast / Smart TV

1¿Qué es la compatibilidad con Chromecast?#

La compatibilidad con Chromecast permite a los usuarios transmitir video o audio desde tu app a una TV o pantalla inteligente. La app ofrece un puente JavaScript que tu sitio web puede llamar para iniciar la transmisión.

Ideal para:

• Sitios web de video en streaming
• Plataformas de música
• Galerías de fotos
• Herramientas de presentación
• Apps de control de señalización digital

2Cómo funciona#

La app generada inyecta un puente JavaScript (window.WebToApk) en tu WebView. Tu sitio web puede llamar a este puente para activar la transmisión nativa de Android.

Flujo:

1. El usuario toca un botón 'Cast' en tu sitio web
2. Tu JS llama a window.WebToApk.castMedia(url)
3. Android abre el selector nativo para compartir o transmitir contenido
4. El usuario selecciona su dispositivo Chromecast
5. El contenido se reproduce en la TV

3Añade un botón de transmisión a tu sitio web#

Añade a tu sitio web un botón Transmitir que llame al puente JS:

<!-- Add a Cast button -->
<button id="castBtn" onclick="castToTV()">
  📺 Cast to TV
</button>

<script>
function castToTV() {
  var videoUrl = document.querySelector('video')?.src
    || 'https://yoursite.com/video.mp4';
  
  if (window.WebToApk && window.WebToApk.castMedia) {
    window.WebToApk.castMedia(videoUrl);
  } else {
    alert('Casting is only available in the app');
  }
}
</script>

4Tipos de medios compatibles#

El puente de transmisión admite estos tipos de medios:

✅ URLs de video directas (MP4, WebM)
✅ URLs de audio (MP3, AAC, OGG)
✅ Transmisiones HLS (.m3u8)
✅ Transmisiones DASH (.mpd)

⚠️ El contenido protegido con DRM requiere una configuración adicional de la app receptora de Chromecast

⚠️ Las páginas web (HTML) no se pueden transmitir directamente, solo URLs de medios

5Detecta el entorno de la app#

Tu sitio web puede detectar si se está ejecutando dentro de la app generada para mostrar u ocultar el botón de transmisión:

// Check if running inside WebToApk app
if (window.WebToApk) {
  // Running in the app — show cast button
  document.getElementById('castBtn')
    .style.display = 'block';
} else {
  // Running in a browser — hide cast button
  document.getElementById('castBtn')
    .style.display = 'none';
}

6Alternativa para el navegador#

Si tu sitio web también se abre desde un navegador normal, el objeto window.WebToApk no existirá. Comprueba siempre antes de llamarlo:

✅ Usa detección de funciones: if (window.WebToApk)
✅ Ofrece un mensaje alternativo para los usuarios del navegador
✅ Considera mostrar un banner 'Descarga nuestra app para transmitir'