Chromecast / Smart TV

1Apa itu Dukungan Chromecast?#

Dukungan Chromecast memungkinkan pengguna melakukan cast video/audio dari aplikasi Anda ke TV atau smart display. Aplikasi menyediakan JavaScript bridge yang bisa dipanggil situs web Anda untuk memulai casting.

Cocok untuk:

• Situs streaming video
• Platform musik
• Galeri foto
• Alat presentasi
• Aplikasi kontrol digital signage

2Cara Kerjanya#

Aplikasi yang dibuat menyisipkan JavaScript bridge (window.WebToApk) ke WebView Anda. Situs web Anda bisa memanggil bridge ini untuk memicu casting Android bawaan.

Alur:

1. Pengguna mengetuk tombol 'Cast' di situs web Anda
2. JS Anda memanggil window.WebToApk.castMedia(url)
3. Android membuka pemilih berbagi/casting media bawaan
4. Pengguna memilih perangkat Chromecast mereka
5. Media diputar di TV

3Tambahkan Tombol Cast ke Situs Web Anda#

Tambahkan tombol Cast ke situs web Anda yang memanggil JS bridge:

<!-- 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>

4Jenis Media yang Didukung#

Cast bridge mendukung jenis media berikut:

✅ URL video langsung (MP4, WebM)
✅ URL audio (MP3, AAC, OGG)
✅ Stream HLS (.m3u8)
✅ Stream DASH (.mpd)

âš ï¸ Konten yang dilindungi DRM memerlukan penyiapan aplikasi receiver Chromecast tambahan

âš ï¸ Halaman web (HTML) tidak bisa di-cast langsung - hanya URL media

5Deteksi Lingkungan Aplikasi#

Situs web Anda bisa mendeteksi apakah sedang berjalan di dalam aplikasi yang dibuat, untuk menampilkan/menyembunyikan tombol cast:

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

6Alternatif untuk Browser#

Jika situs web Anda juga dibuka dari browser biasa, objek window.WebToApk tidak akan ada. Selalu periksa sebelum memanggil:

✅ Gunakan deteksi fitur: if (window.WebToApk)
✅ Sediakan pesan alternatif untuk pengguna browser
✅ Pertimbangkan menampilkan banner 'Unduh aplikasi kami untuk casting'