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
RemotePlayerController
nesne.
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()
ne zaman
cast.framework.SessionState
.SESSION_RESUMED
çağrılır.
Görüntüleyin Web Alıcısında akış aktarımı konulu videomuzu izleyin.