Cast SDK'sını Web Gönderen Uygulamanıza Entegre Edin

Bu geliştirici kılavuzunda, Cast SDK'sını kullanarak Web Sender uygulamanıza Google Cast desteğini nasıl ekleyeceğiniz açıklanmaktadır.

Terminoloji

Mobil cihaz veya tarayıcı, oynatmayı kontrol eden gönderendir. Google Cast cihazı ise oynatılacak içeriği ekranda gösteren alıcıdır.

Web Sender SDK, iki bölümden oluşur: Framework API (cast.framework) ve Base API (chrome.cast) Genel olarak, daha basit ve üst düzey olan Framework API'de çağrılar yaparsınız. Bu çağrılar daha sonra alt düzey Base API tarafından işlenir.

Gönderen çerçevesi, alt düzey işlevselliği sarmalayan bir sarmalayıcı sağlayan Framework API'yi, modülü ve ilişkili kaynakları ifade eder. Gönderen uygulaması veya Google Cast Chrome uygulaması, gönderen cihazdaki bir Chrome tarayıcısında çalışan bir web (HTML/JavaScript) uygulamasıdır. Web alıcı uygulaması, Chromecast'te veya Google Cast cihazda çalışan bir HTML/JavaScript uygulamasıdır.

Gönderen çerçevesi, gönderen uygulamasına etkinlikler hakkında bilgi vermek ve Cast uygulamasının yaşam döngüsünün çeşitli durumları arasında geçiş yapmak için eşzamansız bir geri çağırma tasarımı kullanır.

Kitaplığı yükleme

Uygulamanızın Google Cast özelliklerini uygulayabilmesi için Google Cast Web Sender SDK'sının konumunu bilmesi gerekir. Web Sender Framework API'yi de yüklemek için loadCastFramework URL sorgu parametresini ekleyin. Uygulamanızın tüm sayfalarında kitaplığa aşağıdaki şekilde referans verilmelidir:

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Çerçeve

Web Sender SDK'sı cast.framework.* ad alanını kullanır. Ad alanı aşağıdakileri temsil eder:

  • API'de işlemleri çağıran yöntemler veya işlevler
  • API'deki işleyici işlevleri için etkinlik işleyiciler

Çerçeve şu ana bileşenlerden oluşur:

  • CastContext, mevcut Cast durumu hakkında bilgi sağlayan ve Cast durumu ile Cast oturumu durumu değişiklikleri için etkinlikleri tetikleyen tekil bir nesnedir.
  • CastSession nesnesi oturumu yönetir. Durum bilgisi sağlar ve cihaz sesinde, sessize alma durumunda ve uygulama meta verilerinde yapılan değişiklikler gibi etkinlikleri tetikler.
  • HTML düğmesini genişleten basit bir HTML özel öğesi olan Yayın düğmesi öğesi. Sağlanan Cast düğmesi yeterli değilse Cast düğmesi uygulamak için Cast durumunu kullanabilirsiniz.
  • RemotePlayerController, uzak oynatıcının uygulanmasını kolaylaştırmak için veri bağlama sağlar.

Ad alanı hakkında eksiksiz bir açıklama için Google Cast Web Sender API Referansı'nı inceleyin.

Yayınla düğmesi

Uygulamanızdaki yayın düğmesi bileşeni tamamen çerçeve tarafından işlenir. Buna görünürlük yönetimi ve tıklama etkinliği işleme de dahildir.

<google-cast-launcher></google-cast-launcher>

Alternatif olarak, düğmeyi programatik olarak da oluşturabilirsiniz:

document.createElement("google-cast-launcher");

Gerekirse boyutu veya konumlandırma gibi ek stiller uygulayabilirsiniz. Bağlı Web Receiver durumu için rengi seçmek üzere --connected-color özelliğini, bağlantısı kesilmiş durum için ise --disconnected-color özelliğini kullanın.

Başlatma

Uygulama, çerçeve API'si yüklendikten sonra işleyiciyi çağırır window.__onGCastApiAvailable. Uygulamanın, gönderen kitaplığı yüklenmeden önce window üzerinde bu işleyiciyi ayarladığından emin olmanız gerekir.

Bu işleyici içinde, setOptions(options) yöntemini çağırarak Cast etkileşimini başlatırsınız. CastContext.

Örneğin:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

Ardından, API'yi aşağıdaki şekilde başlatırsınız:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

İlk olarak uygulama, çerçeve tarafından sağlanan CastContext nesnesinin tekil örneğini alır. Ardından, applicationID değerini ayarlamak için setOptions(options) hizmetini CastOptions nesnesiyle birlikte kullanır.

Kaydolmayı gerektirmeyen varsayılan medya alıcısını kullanıyorsanız applicationID yerine aşağıdaki örnekte gösterildiği gibi Web Sender SDK tarafından önceden tanımlanmış bir sabit kullanırsınız:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

Medya kontrolü

CastContext başlatıldıktan sonra uygulama, getCurrentSession() kullanarak mevcut CastSession değerini istediği zaman alabilir.

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

CastSession, loadMedia(loadRequest) kullanılarak bağlı yayın cihazına medya yüklemek için kullanılabilir. Öncelikle contentId ve contentType ile içeriğe ilişkin diğer bilgileri kullanarak bir MediaInfo oluşturun. Ardından, istek için ilgili tüm bilgileri ayarlayarak bu verilerden bir LoadRequest oluşturun. Son olarak, loadMedia(loadRequest) uygulamasını CastSession cihazınızda arayın.

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

loadMedia yöntemi, başarılı bir sonuç için gerekli tüm işlemlerin gerçekleştirilmesinde kullanılabilecek bir Promise döndürür. Promise reddedilirse işlev bağımsız değişkeni chrome.cast.ErrorCode olur.

Oynatıcı durumu değişkenlerine RemotePlayer bölümünden erişebilirsiniz. Medya etkinliği geri çağırmaları ve komutlar dahil olmak üzere RemotePlayer ile tüm etkileşimler RemotePlayerController ile işlenir.

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController, yüklü medya için uygulamaya OYNAT, DURAKLAT, DURDUR ve SARMA gibi tam medya kontrolü sağlar.

  • OYNAT/DURAKLAT: playerController.playOrPause();
  • STOP: playerController.stop();
  • SEEK: playerController.seek();

RemotePlayer ve RemotePlayerController, Polymer veya Angular gibi veri bağlama çerçeveleriyle birlikte kullanılarak uzaktan oynatıcı uygulanabilir.

Angular için kod snippet'i:

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

Medya durumu

Medya oynatma sırasında, RemotePlayerController nesnesinde çeşitli cast.framework.RemotePlayerEventType etkinlikleri için dinleyiciler ayarlayarak yakalanabilecek çeşitli etkinlikler gerçekleşir.

Medya durumu bilgilerini almak için oynatma değiştiğinde ve CastSession.getMediaSession().media değiştiğinde tetiklenen cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED etkinliğini kullanın.

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

Duraklatma, oynatma, devam ettirme veya arama gibi etkinlikler gerçekleştiğinde uygulamanın bu etkinliklere göre hareket etmesi ve kendisi ile Cast cihazındaki Web Receiver uygulaması arasında senkronizasyon yapması gerekir. Daha fazla bilgi için Durum güncellemeleri başlıklı makaleyi inceleyin.

Oturum yönetiminin işleyiş şekli

Cast SDK, Cast oturumu kavramını sunar. Bu oturumun oluşturulması için bir cihaza bağlanma, Web Receiver uygulamasını başlatma (veya uygulamaya katılma), bu uygulamaya bağlanma ve medya kontrol kanalını başlatma adımları birleştirilir. Cast oturumları ve Web Alıcı yaşam döngüsü hakkında daha fazla bilgi için Web Alıcı Uygulama yaşam döngüsü rehberine bakın.

Oturumlar, uygulamanızın cast.framework.CastContext.getInstance() aracılığıyla alabileceği CastContext sınıfı tarafından yönetilir. Ayrı oturumlar, Session sınıfının alt sınıflarıyla temsil edilir. Örneğin, CastSession yayın cihazlarıyla yapılan oturumları gösterir. Uygulamanız, CastContext.getCurrentSession() aracılığıyla şu anda etkin olan Cast oturumuna erişebilir.

Oturum durumunu izlemek için CastContextEventType.SESSION_STATE_CHANGED etkinlik türü için CastContext öğesine bir işleyici ekleyin.

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

Kullanıcı, Yayın iletişim kutusunda "yayınlamayı durdur" düğmesini tıkladığında bağlantının kesilmesi gibi durumlarda, dinleyicinize RemotePlayerEventType.IS_CONNECTED_CHANGED etkinlik türü için bir dinleyici ekleyebilirsiniz. Dinleyicinizde RemotePlayer bağlantısının kesilip kesilmediğini kontrol edin. Bu durumda, yerel oynatıcı durumunu gerektiği gibi güncelleyin. Örneğin:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

Kullanıcı, Cast düğmesi aracılığıyla yayın sonlandırmayı doğrudan kontrol edebilirken gönderen, mevcut CastSession nesnesini kullanarak yayını durdurabilir.

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

Akış aktarma

Oturum durumunu koruma, kullanıcıların sesli komutları, Google Home uygulaması veya akıllı ekranları kullanarak mevcut ses ve video akışlarını cihazlar arasında taşıyabildiği akış aktarımının temelini oluşturur. Medya, bir cihazda (kaynak) oynatmayı durdurur ve başka bir cihazda (hedef) oynatmaya devam eder. En yeni donanım yazılımına sahip tüm Cast cihazlar, akış aktarımında kaynak veya hedef olarak kullanılabilir.

Akış aktarımı sırasında yeni hedef cihazı almak için CastSession#getCastDevice() cast.framework.SessionState.SESSION_RESUMED etkinliği çağrıldığında .SESSION_RESUMED işlevini çağırın.

Daha fazla bilgi için Web alıcısında akış aktarımı başlıklı makaleyi inceleyin.

Önceki
Kurulum
Sonraki
Gelişmiş Özellikler Ekleme