Google Cast w Chrome na Androida

Wyobraź sobie, że możesz użyć aplikacji internetowej na telefonie, aby pokazać pokaz slajdów projektorowi konferencyjnemu albo udostępnić zdjęcia, grać w gry lub oglądać filmy na ekranie telewizora, używając aplikacji mobilnej jako kontrolera.

Najnowsza wersja Chrome na Androida umożliwia witrynom prezentowanie urządzeń Google Cast przy użyciu pakietu SDK Cast Web SDK. Oznacza to, że teraz możesz tworzyć aplikacje nadawcy przesyłających za pomocą pakietu SDK internetowego w Chrome na Androidzie lub iOS (lub na komputerach z rozszerzeniem), a także tworzyć aplikacje, które korzystają z natywnego pakietu SDK Cast na Androida i iOS. Wcześniej aplikacja nadawcy Google Cast wymagała rozszerzenia Google Cast do Chrome, więc na Androidzie można było obsługiwać urządzenia przesyłające tylko z poziomu aplikacji natywnych.

Poniżej znajdziesz krótkie wprowadzenie do tworzenia aplikacji nadawcy przesyłających za pomocą internetowego pakietu SDK. Bardziej szczegółowe informacje znajdziesz w przewodniku po tworzeniu aplikacji dla nadawców aplikacji Chrome.

Wszystkie strony korzystające z funkcji Cast muszą zawierać bibliotekę przesyłania:

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

Dodaj wywołanie zwrotne do obsługi dostępności interfejsu API i zainicjowania sesji przesyłania (pamiętaj, aby dodać moduł obsługi przed załadowaniem interfejsu 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);
}

Jeśli używasz domyślnej aplikacji Styled Media Recipient (Odbiornik multimediów ze stylem), a nie zarejestrowany Niestandardowy odbiornik, możesz utworzyć SessionRequest w ten sposób:

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

Powyższe wywołanie zwrotne receiverListener jest wykonywane, gdy co najmniej jedno urządzenie stanie się dostępne:

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

Uruchom sesję przesyłania, gdy użytkownik kliknie ikonę Cast, zgodnie ze wskazówkami dotyczącymi wygody użytkowników:

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

Użytkownik zobaczy selektor urządzenia:

Okno wyboru urządzenia przesyłającego.

Okno szczegóły trasy wyświetla się, gdy strona jest już połączona i wywołuje metodę requestSession():

Okno ze szczegółami trasy przesyłania.

Po zakończeniu sesji przesyłania możesz wczytać multimedia dla wybranego urządzenia i dodać odbiornik zdarzeń odtwarzania multimediów:

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);
}

Zmienna currentMedia to obiekt chrome.cast.media.Media, którego można używać do sterowania odtwarzaniem:

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


    // ...

Podczas odtwarzania multimediów wyświetla się powiadomienie o odtwarzaniu/wstrzymywaniu:

Przesyłaj powiadomienia o odtwarzaniu/wstrzymaniu.

Jeśli nic nie odtwarzam, w powiadomieniu znajdziesz tylko przycisk zatrzymania, który pozwala zatrzymać przesyłanie:

Powiadomienie o zatrzymaniu przesyłania.

Wywołanie zwrotne sessionListener dla zasobu chrome.cast.ApiConfig() (patrz wyżej) umożliwia aplikacji dołączenie do istniejącej sesji przesyłania lub zarządzanie nią:

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

Jeśli Chrome na Androidzie zezwala na przesyłanie multimediów z Twojej strony, ale chcesz wyłączyć tę funkcję, tak aby domyślny interfejs przesyłania nie zakłócał działania Twojego urządzenia, użyj atrybutu disableRemotePlayback (dostępne w Chrome 49 i nowszych):

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

Alternatywne urządzenia nadawcy i odbiorcy

Przewodnik po pakiecie Cast Web SDK zawiera linki do przykładowych aplikacji oraz informacje o funkcjach przesyłania takich jak zarządzanie sesjami, ścieżki tekstowe (do napisów i napisów) oraz informacje o aktualizacjach stanu.

Obecnie możesz prezentować treści w aplikacji odbierającej Cast tylko przy użyciu pakietu SDK Cast Web SDK, ale trwają prace nad umożliwieniem użycia interfejsu Presentation API bez pakietu SDK Cast (na komputerach i urządzeniach z Androidem), by umożliwić wyświetlanie stron internetowych na urządzeniu przesyłającym bez rejestracji w Google. W przeciwieństwie do pakietu SDK Cast przeznaczonego tylko do Chrome korzystanie ze standardowego interfejsu API umożliwi działanie strony z innymi klientami użytkownika i urządzeniami, które obsługują ten interfejs.

Interfejs Prezentacja API wraz z interfejsem Remote Playback API jest częścią Second Screen Working Groupgrupy roboczej, która umożliwi stronom internetowym korzystanie z drugich ekranów do wyświetlania treści internetowych.

Te interfejsy API wykorzystują szeroką gamę urządzeń dostępnych online – w tym podłączone wyświetlacze, na których uruchamia się klienta użytkownika – aby umożliwić działanie wielu różnych aplikacji za pomocą urządzenia „kontrolnego” i „wyświetlacza”.

Będziemy Cię informować o postępach w implementacji.

Jeśli w międzyczasie natrafisz na błędy lub będziesz mieć prośbę o dodanie funkcji, daj nam znać: crbug.com/new.

Więcej informacji