Эта страница переведена с помощью Cloud Translation API.

Google Cast для Chrome на Android

Sam Dutton

Представьте себе, что вы можете использовать веб-приложение на своем телефоне, чтобы презентовать слайды на проекторе конференции или обмениваться изображениями, играть в игры или смотреть видео на экране телевизора, используя мобильное веб-приложение в качестве контроллера.

Последняя версия Chrome для Android позволяет сайтам выполнять презентацию на устройствах Google Cast с помощью Cast Web SDK . Это означает, что теперь вы можете создавать приложения Cast Sender с помощью Web SDK с Chrome на Android или iOS (или на настольном компьютере с расширением), а также создавать приложения, использующие собственный Cast SDK для Android и iOS. (Раньше приложению-отправителю Google Cast требовалось расширение Google Cast Chrome, поэтому на Android можно было взаимодействовать с устройствами Cast только из собственных приложений.)

Ниже приведено краткое введение в создание приложения Cast Sender с использованием Web SDK. Более подробную информацию можно найти в Руководстве по разработке приложений Chrome Sender .

Все страницы, использующие Cast, должны включать библиотеку Cast:

<script
  type="text/javascript"
  src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>

Добавьте обратный вызов для обработки доступности API и инициализации сеанса Cast (обязательно добавьте обработчик до загрузки API!):

window['__onGCastApiAvailable'] = function (isLoaded, error) {
  if (isLoaded) {
    initializeCastApi();
  } else {
    console.log(error);
  }
};

function initializeCastApi() {
  var sessionRequest = new chrome.cast.SessionRequest(applicationID);
  var apiConfig = new chrome.cast.ApiConfig(
    sessionRequest,
    sessionListener,
    receiverListener
  );
  chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}

Если вы используете приложение Styled Media Receiver по умолчанию, а не самостоятельное зарегистрированное приложение Custom Receiver , вы можете создать SessionRequest следующим образом:

var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
  DEFAULT_MEDIA_RECEIVER_APP_ID);

Обратный вызов receiverListener , описанный выше, выполняется, когда одно или несколько устройств становятся доступными:

function receiverListener(e) {
  if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
    // update UI
  }
}

Запускайте сеанс трансляции, когда пользователь нажимает значок трансляции, как того требует Руководство по взаимодействию с пользователем :

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

Пользователю будет представлен выбор устройства:

Диалоговое окно сведений о маршруте отображается, когда страница уже подключена и вызывает requestSession() :

Диалоговое окно с подробностями маршрута трансляции.

После создания сеанса Cast вы можете загрузить медиафайлы для выбранного устройства Cast и добавить прослушиватель событий воспроизведения мультимедиа:

var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
  request,
  onMediaDiscovered.bind(this, 'loadMedia'),
  onMediaError
);

function onMediaDiscovered(how, media) {
  currentMedia = media;
  media.addUpdateListener(onMediaStatusUpdate);
}

Переменная currentMedia здесь представляет собой объект chrome.cast.media.Media , который можно использовать для управления воспроизведением:

function playMedia() {
  currentMedia.play(null, success, error);
}


    // ...

Уведомление о воспроизведении/паузе отображается во время воспроизведения мультимедиа:

Если медиафайлы не воспроизводятся, в уведомлении есть только кнопка «Стоп», позволяющая остановить трансляцию:

Обратный вызов sessionListener для chrome.cast.ApiConfig() (см. выше) позволяет вашему приложению присоединяться к существующему сеансу Cast или управлять им:

function sessionListener(e) {
  session = e;
  if (session.media.length !== 0) {
    onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
  }
}

Если Chrome на Android позволяет транслировать мультимедиа с вашего веб-сайта, но вы хотите отключить эту функцию, чтобы пользовательский интерфейс кастинга по умолчанию не мешал вашему собственному, используйте атрибут DisableRemotePlayback , доступный в Chrome 49 и более поздних версиях:

<video disableRemotePlayback src="..."></video>

Альтернативные устройства-отправители и получатели

В руководстве Cast Web SDK есть ссылки на примеры приложений и информацию о функциях Cast, таких как управление сеансами, текстовые дорожки (для субтитров и подписей) и обновления статуса.

В настоящее время вы можете выполнять презентацию в приложении-приемнике Cast только с помощью Cast Web SDK, но ведется работа над тем, чтобы можно было использовать Presentation API без Cast SDK (на настольных компьютерах и Android) для представления любой веб-страницы на устройстве Cast. без регистрации в Google. В отличие от Cast SDK, предназначенного только для Chrome, использование стандартного API позволит странице работать с другими пользовательскими агентами и устройствами, поддерживающими API.

API презентации, наряду с API удаленного воспроизведения , является частью усилий Рабочей группы по второму экрану, направленных на то, чтобы веб-страницы могли использовать вторые экраны для отображения веб-контента.

Эти API используют преимущества ряда устройств, подключаемых к сети, включая подключенные дисплеи, на которых работает пользовательский агент, чтобы обеспечить возможность запуска широкого спектра приложений с помощью устройства «управления» и устройства «отображения».

Мы будем держать вас в курсе хода реализации.

А пока, пожалуйста, сообщите нам, если вы обнаружите ошибки или у вас есть пожелания по улучшению: crbug.com/new .

Google Cast для Chrome на Android

Узнать больше