Chromecast / Smart TV

1Qu'est-ce que la prise en charge de Chromecast ?#

La prise en charge de Chromecast permet aux utilisateurs de diffuser de la vidéo ou de l'audio de votre application vers une TV ou un écran connecté. L'application fournit une passerelle JavaScript que votre site web peut appeler pour lancer la diffusion.

Idéal pour :

• Sites de streaming vidéo
• Plateformes musicales
• Galeries de photos
• Outils de présentation
• Applications de contrôle d'affichage dynamique

2Comment ça marche#

L'application générée injecte une passerelle JavaScript (window.WebToApk) dans votre WebView. Votre site web peut appeler cette passerelle pour déclencher la diffusion Android native.

Déroulement :

1. L'utilisateur appuie sur un bouton « Diffuser » sur votre site web
2. Votre JS appelle window.WebToApk.castMedia(url)
3. Android ouvre le sélecteur natif de partage/diffusion de médias
4. L'utilisateur sélectionne son appareil Chromecast
5. Le média est lu sur la TV

3Ajouter un bouton de diffusion à votre site web#

Ajoutez à votre site web un bouton Diffuser qui appelle la passerelle 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>

4Types de médias pris en charge#

La passerelle de diffusion prend en charge ces types de médias :

✅ URL de vidéo directes (MP4, WebM)
✅ URL audio (MP3, AAC, OGG)
✅ Flux HLS (.m3u8)
✅ Flux DASH (.mpd)

⚠️ Le contenu protégé par DRM nécessite une configuration supplémentaire de l'application réceptrice Chromecast

⚠️ Les pages web (HTML) ne peuvent pas être diffusées directement - seulement les URL de médias

5Détecter l'environnement de l'application#

Votre site web peut détecter s'il s'exécute dans l'application générée afin d'afficher ou de masquer le bouton de diffusion :

// 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';
}

6Solution de repli pour le navigateur#

Si votre site web est aussi consulté depuis un navigateur classique, l'objet window.WebToApk n'existera pas. Vérifiez toujours avant d'appeler :

✅ Utilisez la détection de fonctionnalité : if (window.WebToApk)
✅ Prévoyez un message de repli pour les utilisateurs de navigateur
✅ Envisagez d'afficher une bannière « Téléchargez notre application pour la diffusion »