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'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önderen, Google Cast cihazı ise oynatılmak üzere içeriği ekranda gösteren alıcı'dır.

Web Gönderen SDK'sı iki bölümden oluşur: Framework API (cast.framework) ve Base API (chrome.cast). Genel olarak, daha basit ve üst düzey 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şlevler için 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ısı uygulaması, Chromecast veya Google Cast cihazında çalışan bir HTML/JavaScript uygulamasıdır.

Gönderen çerçevesi, gönderen uygulamasını etkinlikler hakkında bilgilendirmek ve Cast uygulaması 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 aşağıda gösterildiği gibi Google Cast Web Gönderici 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ı kitaplığı aşağıdaki şekilde referanslamalı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.* sınıf adını kullanır. Ad alanı aşağıdakileri temsil eder:

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

Ç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 bilgilerini sağlar ve cihaz ses düzeyinde, 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ı basitleştirmek için veri bağlamayı sağlar.

Alan adının tam açıklaması için Google Cast Web Gönderici API Referansı'nı inceleyin.

Yayınla düğmesi

Uygulamanızdaki Yayın düğmesi bileşeni tamamen çerçeve tarafından yönetilir. 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 Alıcı durumunun rengini seçmek için --connected-color özelliğini, bağlantısı kesilmiş durumun rengini seçmek için ise --disconnected-color özelliğini kullanın.

Başlatma

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

Bu işleyicide, CastContext sınıfının 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 gibi 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 tekil örneğini alır. Ardından applicationID değerini ayarlamak için CastOptions nesnesini kullanarak setOptions(options) değerini kullanır.

Kayıt gerektirmeyen Varsayılan Medya Alıcısı'nı kullanıyorsanız applicationID yerine, aşağıdaki gibi Web Gönderen SDK'sı 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ı Cast cihazına medya yüklemek için kullanılabilir. Öncelikle, contentId ve contentType'in yanı sıra içerikle ilgili diğer bilgileri kullanarak bir MediaInfo oluşturun. Ardından, isteğe ilişkin tüm bilgileri ayarlayarak bu LoadRequest oluşturun. Son olarak, CastSession cihazınızdan 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 tüm 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 çağırma ve komutları dahil olmak üzere RemotePlayer ile tüm etkileşimler RemotePlayerController ile yönetilir.

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

RemotePlayerController, uygulamaya yüklü medya için OYNATMA, DURAKLATMA, DURDURMA ve İLERİ SARMA işlemlerinin tümünü kontrol etme olanağı verir.

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

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

Angular için bir kod snippet'i aşağıda verilmiştir:

<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 yakalanabilen ç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 ileri sarma gibi etkinlikler gerçekleştiğinde uygulamanın bu etkinliklere göre işlem yapması ve kendisi ile Cast cihazındaki 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

Cast SDK'sı, Cast oturumu kavramını sunar. Bu oturumun oluşturulması, bir cihaza bağlanma, Web Alıcı uygulaması başlatma (veya katılma), bu uygulamaya bağlanma ve bir medya kontrol kanalı başlatma adımlarını içerir. Yayın 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ılavuzuna bakın.

Oturumlar, uygulamanızın cast.framework.CastContext.getInstance() aracılığıyla alabileceği CastContext sınıfı tarafından yönetilir. Tekil oturumlar, Session sınıfının alt sınıflarıyla temsil edilir. Örneğin, CastSession, Cast cihazlarla yapılan oturumları temsil eder. Uygulamanız, CastContext.getCurrentSession() aracılığıyla etkin 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ının Yayınlama iletişim kutusundaki "Yayınlamayı durdur" düğmesini tıklaması gibi bağlantı kesme işlemleri için işleyicinize RemotePlayerEventType.IS_CONNECTED_CHANGEDetkinlik türü için bir işleyici 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ı, çerçeve Cast düğmesi aracılığıyla Cast'i doğrudan kontrol edebilirken gönderen, mevcut CastSession nesnesi üzerinden Cast'i 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 sesli komutları, Google Home uygulaması 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) oynatmayı durdurur ve başka bir cihazda (hedef) oynatmaya devam eder. En son donanım yazılımına sahip tüm Cast cihazları, yayın aktarımında kaynak veya hedef olarak kullanılabilir.

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

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

Kurulum

Gelişmiş Özellikler Ekleme