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

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

Bu geliştirici kılavuzunda, Google Cast desteğini web sitenize nasıl ekleyeceğiniz açıklanmaktadır. Cast SDK'sını kullanan gönderen uygulaması.

Terminoloji

Mobil cihaz veya tarayıcı, oynatmayı kontrol eden gönderendir; Google Cast cihazı, içeriği yayında gösteren alıcıdır. ekranda oynatmaya başlayın.

Web Sender SDK iki bölümden oluşur: Framework API (cast.framework) ve Base API (chrome.cast) Genel olarak daha basit ve daha üst düzey Framework API'yi kullanarak Bunlar daha sonra alt düzey Temel API tarafından işlenir.

Gönderen çerçevesi, çerçeve API'yi, modülü ve ilişkili daha alt düzey işlevler için bir sarmalayıcı sağlayan kaynaklar. İlgili içeriği oluşturmak için kullanılan gönderen uygulaması veya Google Cast Chrome uygulaması, bir web (HTML/JavaScript) uygulamasını ifade eder çalışan bir cihazdaki Chrome Tarayıcı'da çalışıyor. Web Alıcısı uygulaması, Chromecast veya Google Cast cihazında çalışan bir HTML/JavaScript uygulamasına bağlayın.

Gönderen çerçevesi, göndereni bilgilendirmek için eşzamansız bir geri çağırma tasarımı kullanır ve Cast uygulaması hayatının çeşitli durumları arasında geçiş yapmak için kullanılan döngüsünü de takip eder.

Kitaplığı yükleme

Uygulamanızın Google Cast özelliklerini kullanabilmesi için şunları bilmesi gerekir: Google Cast Web Sender SDK'nın konumu aşağıda gösterildiği gibidir. URL'yi Web Sender Framework API'yi yüklemek için loadCastFramework URL sorgu parametresi de faydalı olabilir. Uygulamanızın tüm sayfaları aşağıdaki gibi kitaplığa referans vermelidir:

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

Çerçeve

Web Sender SDK, cast.framework. kodunu kullanır.* tıklayın. Ad alanı aşağıdakileri temsil eder:

API'deki 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 hakkında bilgi sağlayan tekil nesnedir. Mevcut Yayın durumu; Yayınlama durumu ve Yayınlama oturumu için etkinlikleri tetikler kullanabilirsiniz.
CastSession nesne oturumu yönetir - bu nesne, veya cihaz ses seviyesi değişiklikleri gibi etkinlikleri tetikler. uygulama meta verilerini içerebilir.
Basit bir HTML özel öğesi olan Yayın düğmesi öğesi, HTML düğmesini genişletir. Sağlanan yayın düğmesi yeterli değilse Yayınla düğmesi uygulamak için Yayın durumunu kullanabilirsiniz.
RemotePlayerController uzak oynatıcının uygulanmasını basitleştirmek için veri bağlamayı sağlar.

Şu göz atın: Google Cast Web Sender API Referansı: tam açıklamasını girin.

Yayınla düğmesi

Uygulamanızdaki Yayın düğmesi bileşeni tamamen çerçeve tarafından işleniyor. Bu görünürlük yönetiminin yanı sıra tıklama etkinliği işlemeyi içerir.

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

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

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

Boyut veya konumlandırma gibi ek stilleri öğesini gerektiği şekilde ayarlayın. Şunlar için --connected-color özelliğini kullanın: bağlı Web Alıcı durumu için renk seçin ve Bağlantısı kesik durum için --disconnected-color.

Başlatma

Çerçeve API'si yüklendikten sonra uygulama, işleyiciyi çağırır window.__onGCastApiAvailable Uygulamanın bu işleyiciyi ayarladığından emin olmalısınız. gönderen kitaplığını yüklemeden önce window öğesine ekleyerek güncelleyin.

Bu işleyicide Cast etkileşimini başlatmak için setOptions(options) yöntemi CastContext.

Örneğin:

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

Ardından, API'yi şu şekilde ilk kullanıma hazırlayabilirsiniz:

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

İlk olarak, uygulama CastContext nesne yardımcı olur. Daha sonra setOptions(options) profesyonel ve rahatlatıcı CastOptions nesne (applicationID) ayarlayın.

Kayıt gerektirmeyen Varsayılan Medya Alıcısı'nı kullanıyorsanız yerine aşağıda gösterildiği gibi Web Sender SDK'sı tarafından önceden tanımlanmış bir sabit değer kullanırsınız applicationID:

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

Medya kontrolü

CastContext başlatıldıktan sonra uygulama, Herhangi bir durumda CastSession kullanma süresi getCurrentSession().

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

CastSession, bağlı yayın cihazına medya yüklemek için kullanılabilir. loadMedia(loadRequest) İlk olarak, MediaInfo, contentId ve contentType ile diğer bilgileri kullanarak alakalı olmayabilir. Daha sonra, yeni bir LoadRequest bu sorgudan istekle alakalı tüm bilgileri ayarlayarak. En son, CastSession cihazınızda loadMedia(loadRequest) adlı kişiyi 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, Vadet başarılı bir sonuç için gerekli tüm işlemleri yapmak üzere kullanılabilecek bir dizi Promise reddedilirse işlev bağımsız değişkeni chrome.cast.ErrorCode.

Oyuncu durumu değişkenlerine şurada erişebilirsiniz: RemotePlayer. Medya etkinliği geri çağırmaları veRemotePlayer komutlarının çoğu, RemotePlayerController

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

RemotePlayerController, uygulamanın medya içeriğinin tamamını kontrol eder. Yüklenen medya için OYNAT, DURAKLAT, DURDUR ve ARA.

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

RemotePlayer ve RemotePlayerController olabilir gibi veri bağlama çerçeveleriyle kullanılan veri bağlama çerçeveleri (ör. Polymer veya Angular) ile uzaktaki oynatıcıyı kullanın.

Aşağıda Angular için bir kod snippet'i 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, belirli bir medya türünde çeşitli dinleyiciler cast.framework.RemotePlayerEventType üzerindeki etkinlikler RemotePlayerControllernesne.

Medya durumu bilgilerini almak için cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED etkinliği olan bir etkinliktir. Oynatma değiştiğinde ve CastSession.getMediaSession().media anlamına gelir.

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 sarma gibi etkinlikler gerçekleştiğinde uygulamanın işlem yapması gerekir. aktarmalı ve Yayındaki Web Alıcı uygulaması ile kendi arasında senkronize edilmelidir. olanak tanır. Durum güncellemeleri'ne bakın. konulu videomuzu izleyin.

Oturum yönetiminin işleyiş şekli

Cast SDK'sı, Cast oturumu, Bir cihaza bağlanma, Web'i başlatma (veya Web'e katılma) adımlarını birleştiren kuruluş Alıcı uygulama, bu uygulamaya bağlanma ve medya kontrol kanalını başlatma. Web Buyer'ı göster Uygulama yaşam döngüsü kılavuzu daha fazla bilgi edinmek için Yardım Merkezi'ni ziyaret edebilirsiniz.

Oturumlar sınıf tarafından yönetilir CastContext, almak için kullanabileceğiniz cast.framework.CastContext.getInstance(). Farklı oturumlar sınıfın alt sınıflarıyla temsil edilir Session. Örneğin, CastSession Yayın cihazlarıyla ilgili oturumları temsil eder. Uygulamanız şu anda etkin Oturumu şunu kullanarak yayınla: CastContext.getCurrentSession().

Oturum durumunu izlemek için Şunun için CastContext: "the" CastContextEventType.SESSION_STATE_CHANGED etkinlik türü.

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

Bağlantının kesilmesi için (ör. kullanıcının "yayını durdur" düğmesini tıklaması) düğmesinden iletişim kutusunu açıyorsanız her bir yayın için bir dinleyici RemotePlayerEventType.IS_CONNECTED_CHANGED dinleyicinizdeki etkinlik türü. Dinleyicinizde RemotePlayer bağlantı kesildi. Öyleyse yerel oynatıcı durumunu gerektiği şekilde 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 çerçevesi aracılığıyla Yayın sonlandırmayı doğrudan kontrol edebilse de gönderen kişinin kendisi geçerli CastSession nesnesini tanımlayın.

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

Akış aktarımının temeli oturum durumunu korumaktır. Bu yöntemde kullanıcılar sesli komutları, Google Home'u kullanarak mevcut ses ve video akışlarını cihazlar arasında taşıyabilir uygulama veya akıllı ekranlar. Medya bir cihazda (kaynak) duruyor ve başka bir cihazda (kaynaktaki) devam ediyor hedef). En son donanım yazılımına sahip Cast cihazları bir akış aktarımı.

Yayın aktarımı sırasında yeni hedef cihazı almak için şu numarayı arayın: CastSession#getCastDevice() cast.framework.SessionState.SESSION_RESUMED çağrılır.

Görüntüleyin Web Alıcısında akış aktarımı konulu videomuzu izleyin.

Kurulum

Gelişmiş Özellikler Ekleme