Android 版 Chrome(适用于 Google Cast)

想象一下,您能够以移动网络应用作为控制器,使用手机上的一款 Web 应用向会议投影仪演示演示文稿,或者分享图片、在电视屏幕上玩游戏或观看视频。

借助最新版本的 Android 版 Chrome,网站可以使用 Cast Web SDK 向 Google Cast 设备展示内容。这意味着,您现在可以使用 Web SDK 与 Android 或 iOS 版 Chrome(或桌面设备,使用扩展程序)来创建 Cast 发送器应用,还可以创建使用原生 Cast SDK for Android 和 iOS 的应用。(以前,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);
}

如果您使用的是默认样式化媒体接收器应用,而不是已注册的自定义接收器应用,则可以创建如下 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
  }
}

按照用户体验指南的规定,在用户点击“投射”图标时启动 Cast 会话:

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

系统将向用户显示设备选择器:

投放设备选择对话框。

如果页面已连接并调用 requestSession(),系统会显示路由详情对话框:

投放路由详情对话框。

建立 Cast 会话后,您可为所选 Cast 设备加载媒体,并为媒体播放事件添加监听器:

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 回调(见上文)可让您的应用加入或管理现有的 Cast 会话:

function sessionListener(e) {
  session = e;
  if (session.media.length !== 0) {
    onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
  }
}

如果 Android 版 Chrome 允许从您的网站投放媒体,但您想停用此功能,以便默认投放界面不会干扰您自己的界面,请使用 disableRemotePlayback 属性(在 Chrome 49 及更高版本中提供):

<video disableRemotePlayback src="..."></video>

备用发送方和接收方设备

Cast Web SDK 指南包含指向示例应用的链接,以及会话管理、文本轨道(用于字幕)和状态更新等 Cast 功能的信息。

目前,您只能使用 Cast Web SDK 向 Cast 接收器应用展示内容,但我们正在努力让 Presentation API 无需使用 Cast SDK 即可使用(在桌面设备和 Android 设备上),无需向 Cast 设备展示任何网页。与仅限 Chrome 的 Cast SDK 不同,使用标准 API 后,网页便能与支持该 API 的其他用户代理和设备一起工作。

Presentation API 和 Remote Playback API第二屏幕工作组的一部分,旨在帮助网页使用第二屏幕显示网页内容。

这些 API 可利用一系列即将上线的设备(包括运行用户代理的联网显示屏),通过“控制”设备和“显示”设备实现多种多样的应用。

我们会及时告知您实施进度。

在此期间,如果您发现错误或有功能请求,请通过以下网址告知我们:crbug.com/new

了解详情