Bu sayfa, Cloud Translation API ile çevrilmiştir.

Cast SDK'sını Web Gönderen Uygulamanıza entegre etme

Bu geliştirici kılavuzunda, Cast SDK'sını kullanarak Web Gönderen uygulamanıza Google Cast desteğinin nasıl ekleneceği açıklanmaktadır.

Terminoloji

Mobil cihaz veya tarayıcı, oynatmayı kontrol eden gönderendir. Google Cast cihazı ise oynatma için ekrandaki içeriği görüntüleyen alıcıdır.

Web Gönderen SDK'sı iki bölümden oluşur: Framework API (cast.framework) ve Temel API (chrome.cast) Genel olarak, daha basit ve daha üst düzey Framework API'si üzerinde çağrıda bulunursunuz. Daha sonra bu API, alt düzey Base API tarafından işlenir.

Gönderen çerçevesi, Framework API'si, modül ve alt düzey işlevlerle ilgili bir sarmalayıcı sunan ilişkili kaynakları ifade eder. Gönderen uygulaması veya Google Cast Chrome uygulaması, gönderenin cihazındaki Chrome tarayıcıda çalışan bir web (HTML/JavaScript) uygulamasını ifade eder. Web Alıcısı uygulaması, Chromecast veya Google Cast cihazında çalışan bir HTML/JavaScript uygulamasını belirtir.

Gönderen çerçevesi, gönderenleri etkinlikler konusunda bilgilendirmek ve Cast uygulama 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 kullanabilmesi için aşağıda gösterildiği gibi Google Cast Web Gönderen SDK'sının konumunu bilmesi gerekir. Web Gönderen Çerçevesi API'sini de yüklemek için loadCastFramework URL sorgu parametresini ekleyin. Uygulamanızın tüm sayfaları, kitaplığa aşağıdaki şekilde atıfta bulunmalıdır:

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

Çerçeve

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

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

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

CastContext, geçerli Yayın durumu hakkında bilgi sağlayan ve yayın durumu ile yayınlama oturumu durumu değişikliklerini tetikleyen tek bir nesnedir.
CastSession nesnesi oturumu yönetir. Bu nesne, durum bilgileri sağlar ve cihaz hacmi, sesi kapatma durumu ve uygulama meta verileri gibi etkinlikleri tetikler.
HTML düğmesini genişleten basit bir HTML özel öğesi olan Yayınla düğmesi öğesi. Sağlanan Yayın düğmesi yeterli değilse Yayın düğmesini uygulamak için Yayınlama durumunu kullanabilirsiniz.
RemotePlayerController, uzaktan oynatıcının uygulanmasını kolaylaştırmak için veri bağlantıları sağlar.

Ad alanının tam açıklaması için Google Cast Web Gönderen API Referansı'nı inceleyin.

Yayınla düğmesi

Uygulamanızdaki Yayınla düğmesi bileşeni, tamamen çerçeve tarafından işlenir. Bu, görünürlük yönetimini ve tıklama etkinliği işlemeyi içerir.

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

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

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

Boyuta veya boyuta göre konumlandırma gibi gerekli ek stil öğelerini uygulayabilirsiniz. Bağlı Web Alıcısı durumunun rengini seçmek için --connected-color özelliğini ve bağlantısı kesilmiş durumu için --disconnected-color özelliğini kullanın.

Başlatma

Framework API'yi yüklendikten sonra uygulama window.__onGCastApiAvailable işleyicisini çağırır. Gönderici kitaplığını yüklemeden önce window uygulamasının bu işleyiciyi ayarladığından emin olmalısınız.

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

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

Uygulama ilk olarak çerçeve tarafından sağlanan CastContext nesnesinin singleton örneğini alır. Daha sonra, applicationID değerini ayarlamak için bir CastOptions nesnesi setOptions(options) kullanır.

Kayıt gerektirmeyen Varsayılan Medya Alıcısı'nı kullanıyorsanız aşağıda gösterildiği gibi applicationID yerine Web Gönderen SDK'sı tarafından önceden tanımlanmış bir sabit değer 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, kullanarak istediği zaman mevcut CastSession öğesini alabilir.getCurrentSession()

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

CastSession, loadMedia(loadRequest) ile bağlı Cast cihazına medya yüklemek için kullanılabilir. İlk olarak, contentId ve contentType işaretlemelerinin yanı sıra içerikle ilgili diğer bilgileri kullanarak bir MediaInfo oluşturun. Ardından, istekten ilgili tüm bilgileri ayarlayarak bir LoadRequest oluşturun. Son olarak, CastSession cihazınızda loadMedia(loadRequest) numaralı telefonu 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 işlemleri gerçekleştirmek üzere kullanılabilecek bir Vaat döndürür. Vaat reddedilirse işlev bağımsız değişkeni bir chrome.cast.ErrorCode olur.

Oynatıcı durumu değişkenlerine RemotePlayer üzerinden 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, uygulamanın yüklenen medya için PLAY, DURAKLAT, DURDUR ve SEEK üzerinde tam medya kontrolü sağlar.

ÇAL/OYUN: playerController.playOrPause();
DURDUR: playerController.stop();
SEEK: playerController.seek();

RemotePlayer ve RemotePlayerController, bir uzak oynatıcı uygulamak için Polymer veya Angular gibi veri bağlama çerçeveleriyle kullanılabilir.

Angular için kod snippet'ini aşağıda görebilirsiniz:

<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 nesnesindeki çeşitli cast.framework.RemotePlayerEventType etkinlikleri için işleyiciler ayarlayarak yakalanabilecek çeşitli etkinlikler oluşur.

Medya durumu bilgilerini almak için oynatma 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 bunlar üzerinde işlem yapması ve yayın cihazı üzerinde kendisi ile web alıcısı uygulaması arasında senkronizasyon yapması gerekir. Daha fazla bilgi için Durum güncellemeleri bölümüne bakın.

Oturum yönetiminin işleyiş şekli

Google Cast SDK'sı, bir Cihaza bağlanma, bir Web Alıcısı uygulaması başlatma (ya da birleştirme), bu uygulamaya bağlanma ve medya kontrol kanalı başlatma adımlarını birleştiren Yayın oturumu kavramını tanımlar. Yayınlama oturumları ve Web Alıcı yaşam döngüsü hakkında daha fazla bilgi için Web Alıcısı'na Uygulama yaşam döngüsü kılavuzuna bakın.

Oturumlar, uygulamanızın cast.framework.CastContext.getInstance() üzerinden alabileceği CastContext sınıfı tarafından yönetilir. Her oturum, Session sınıfının alt sınıflarıyla temsil edilir. Örneğin, CastSession, Yayın cihazlarıyla yapılan oturumları temsil eder. Uygulamanız şu anda etkin olan Yayın oturumuna CastContext.getCurrentSession() üzerinden erişebilir.

Oturum durumunu izlemek amacıyla CastContextEventType.SESSION_STATE_CHANGED etkinlik türü için CastContext'ne bir dinleyici 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;
    }
  })

Örneğin, kullanıcı Yayın iletişim kutusundaki "yayını durdur" düğmesini tıkladığında dinleyicinize RemotePlayerEventType.IS_CONNECTED_CHANGED etkinlik türü için bir dinleyici ekleyebilirsiniz. İşleyiciniz RemotePlayer bağlantısının kesilip kesilmediğini kontrol eder. 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 Cast düğmesini kullanarak Yayınlamayı sonlandırmayı doğrudan kontrol edebilir. Ancak gönderenin kendisi 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 korumak, kullanıcıların ses komutlarını, Google Home uygulamasını veya akıllı ekranları kullanarak mevcut ses ve video akışlarını cihazlar arasında taşıyabileceği akış aktarımının temelini oluşturur. Medya, bir cihazda (kaynak) oynamayı durdurur ve başka bir cihazda (hedef) devam eder. En son donanım yazılımına sahip tüm Yayın cihazları, akış aktarımında kaynak veya hedef işlevi görebilir.

Akış aktarımı sırasında yeni hedef cihazı almak için cast.framework.SessionState.SESSION_RESUMED etkinliği arandığında CastSession#getCastDevice() değerini arayın.

Daha fazla bilgi için Web Alıcısı üzerinden akış aktarma bölümüne göz atın.

Kurulum

Gelişmiş Özellikler Ekleme