想像一下,您可以使用手機上的網頁應用程式,把簡報簡報分享給會議的投影機,或在電視螢幕上分享圖片、玩遊戲或觀看影片,就是把行動網頁應用程式當成控制器使用。
最新版的 Chrome Chrome 可讓網站使用 Cast Web SDK 向 Google Cast 裝置播放內容。也就是說,您現在可以在 Android 或 iOS 版 Chrome 上使用 Web SDK 建立 Cast 發送端應用程式 (或在具有擴充功能的電腦上),以及建立使用 Android 和 iOS 版原生 Cast SDK 的應用程式。(過去,Google Cast 發送端應用程式需要 Google Cast Chrome 擴充功能,因此 Android 使用者只能透過原生應用程式與投放裝置互動)。
以下將簡單介紹如何使用 Web SDK 建構 Cast 發送端應用程式。如需更完整的資訊,請參閱 Chrome 寄件者應用程式開發指南。
所有使用 Cast 的網頁都必須包含 Cast 程式庫:
<script
type="text/javascript"
src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>
新增回呼以處理 API 可用性並初始化 Cast 工作階段 (請務必在載入 API 前新增處理常式!):
window['__onGCastApiAvailable'] = function (isLoaded, error) {
if (isLoaded) {
initializeCastApi();
} else {
console.log(error);
}
};
function initializeCastApi() {
var sessionRequest = new chrome.cast.SessionRequest(applicationID);
var apiConfig = new chrome.cast.ApiConfig(
sessionRequest,
sessionListener,
receiverListener
);
chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}
如果您使用預設的 Styled Media Receiver 應用程式,而非自己註冊且已註冊的自訂接收端應用程式,您可以建立如下所示的 SessionRequest
:
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
有一或多個裝置可供使用時,系統會執行上方的 receiverListener
回呼:
function receiverListener(e) {
if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
// update UI
}
}
在使用者點擊「投放」圖示時啟動投放工作階段 (按照《使用者體驗指南》的規範):
chrome.cast.requestSession(onRequestSessionSuccess,
onRequestSessionError);
function onRequestSessionSuccess(e) {
session = e;
}
系統會向使用者顯示裝置挑選器:
頁面連線且呼叫 requestSession()
時,系統會顯示「route details」(路徑詳細資料) 對話方塊:
建立投放工作階段後,您就可以為選取的投放裝置載入媒體,並新增媒體播放事件的事件監聽器:
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
request,
onMediaDiscovered.bind(this, 'loadMedia'),
onMediaError
);
function onMediaDiscovered(how, media) {
currentMedia = media;
media.addUpdateListener(onMediaStatusUpdate);
}
這裡的 currentMedia
變數是 chrome.cast.media.Media
物件,可用於控製播放:
function playMedia() {
currentMedia.play(null, success, error);
}
// ...
播放媒體時,系統會顯示播放/暫停通知:
如果目前未播放媒體,通知只會顯示停止按鈕,點選即可停止投放:
chrome.cast.ApiConfig()
的 sessionListener
回呼 (如上所示) 可讓應用程式加入或管理現有的投放工作階段:
function sessionListener(e) {
session = e;
if (session.media.length !== 0) {
onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
}
}
如果 Android 版 Chrome 允許從您的網站投放媒體,但您想停用此功能,讓預設的投放使用者介面不會影響您的行為,請使用 Chrome 49 以上版本提供的 disableRemotePlayback 屬性:
<video disableRemotePlayback src="..."></video>
投放 Web SDK 指南提供範例應用程式的連結和投放功能相關資訊,例如工作階段管理、文字軌 (字幕和字幕) 和狀態更新。
現階段,您只能使用 Cast Web SDK 向 Cast 接收器應用程式進行簡報,但還有很多方法可以讓系統在沒有 Cast SDK (電腦版和 Android) 的情況下,使用 簡報 API 向投放裝置顯示任何網頁,而不必向 Google 註冊。有別於僅支援 Chrome 的 Cast SDK,如果使用標準 API,網頁就能與其他支援 API 的使用者代理程式和裝置搭配運作。
簡報 API 和 Remote Playback API 是 Second Screen Working Group 的一部分,可讓網頁使用第二個螢幕來顯示網頁內容。
這些 API 可以利用在線上的各類裝置 (包括執行使用者代理程式的連接螢幕),透過「控制」裝置和「螢幕」裝置,提供豐富多元的應用程式。
我們會隨時通知您導入進度。
在此期間,如果發現錯誤或有任何功能要求,歡迎隨時與我們聯絡:crbug.com/new。