Chromecast / Smart TV

1Что такое поддержка Chromecast?#

Поддержка Chromecast позволяет пользователям транслировать видео и аудио из вашего приложения на ТВ или умный дисплей. Приложение предоставляет мост JavaScript, который ваш сайт может вызвать, чтобы начать трансляцию.

Отлично подходит для:

• Сайты видеостриминга
• Музыкальные платформы
• Фотогалереи
• Инструменты для презентаций
• Приложения для управления цифровыми вывесками

2Как это работает#

Созданное приложение добавляет в ваш WebView мост JavaScript (window.WebToApk). Ваш сайт может вызывать этот мост, чтобы запустить встроенную трансляцию Android.

Порядок действий:

1. Пользователь нажимает на сайте кнопку «Транслировать»
2. Ваш JS вызывает window.WebToApk.castMedia(url)
3. Android открывает встроенное окно выбора для передачи и трансляции медиа
4. Пользователь выбирает своё устройство Chromecast
5. Медиа воспроизводится на ТВ

3Добавьте кнопку трансляции на сайт#

Добавьте на сайт кнопку трансляции, которая вызывает мост 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>

4Поддерживаемые типы медиа#

Мост трансляции поддерживает следующие типы медиа:

✅ Прямые ссылки на видео (MP4, WebM)
✅ Ссылки на аудио (MP3, AAC, OGG)
✅ Потоки HLS (.m3u8)
✅ Потоки DASH (.mpd)

⚠️ Для контента с защитой DRM требуется дополнительная настройка приложения-приёмника Chromecast

⚠️ Веб-страницы (HTML) нельзя транслировать напрямую — только ссылки на медиа

5Определение среды приложения#

Ваш сайт может определить, запущен ли он внутри созданного приложения, чтобы показать или скрыть кнопку трансляции:

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

6Запасной вариант для браузера#

Если ваш сайт открывают и в обычном браузере, объекта window.WebToApk там не будет. Всегда проверяйте перед вызовом:

✅ Используйте определение возможностей: if (window.WebToApk)
✅ Предусмотрите запасное сообщение для пользователей браузера
✅ Подумайте о баннере «Скачайте наше приложение для трансляции»