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

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

Bu geliştirici kılavuzunda, Cast SDK'yı 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 içeriği oynatmak için 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). Genellikle, 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şlevlerin etrafında 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ını ifade eder. 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ını etkinlikler hakkında bilgilendirmek 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 geri çağırma tasarımı kullanır.

Kitaplığı yükleme

Uygulamanızın Google Cast özelliklerini uygulayabilmesi için aşağıdaki örnekte gösterildiği gibi 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 bilgileri sağlar ve cihaz ses seviyesi, sessize alma durumu ve uygulama meta verilerindeki 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 öğeye boyut 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şleyicide, 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 gibi 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'ı ayarlamak için setOptions(options)'ı CastOptions nesnesiyle birlikte kullanır.

Kaydolmayı gerektirmeyen varsayılan medya alıcıyı 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 istediği zaman mevcut CastSession değerini 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 açı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 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 aramaları ve komutlar dahil olmak üzere RemotePlayer ile yapılan tüm etkileşimler RemotePlayerController ile işlenir.

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

RemotePlayerController, yüklenen 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 Alıcı 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ı, bir cihaza bağlanma, Web Alıcı uygulamasını başlatma (veya uygulamaya katılma), bu uygulamaya bağlanma ve medya kontrol kanalını başlatma adımlarını birleştirir. 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ü kılavuzu'na bakın.

Oturumlar, uygulamanızın cast.framework.CastContext.getInstance() aracılığıyla alabileceği CastContext sınıfı tarafından yönetilir. Bireysel 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 CastContext öğesine CastContextEventType.SESSION_STATE_CHANGED etkinlik türü için 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 simgesinin 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 button çerçevesi aracılığıyla yayın sonlandırmayı doğrudan kontrol edebilirken gönderen de 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, akış aktarımının temelini oluşturur. Bu özellik sayesinde kullanıcılar, sesli komutları, Google Home uygulaması veya akıllı ekranları kullanarak mevcut ses ve video akışlarını cihazlar arasında taşıyabilir. 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 çağrı yapın.

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

Kurulum

Gelişmiş Özellikler Ekleme