使用Chromecast提供其他用户体验

分享于 

11分钟阅读

Web开发

  繁體

背景

我认为由于价格策略,Chromecast设备几乎在任何电视上都会出现。 这是为使用Chromecast设备访问访问者的网站提供额外好处的好理由。 在本文中,我将帮助你首先将 cast API集成到你的站点代码中。 请随意向本文提供你的评论,以及你自己经验的技巧和技巧。

前提条件

要开始编码,你需要:

  • Chromecast设备本身
  • 带HDMI输入的电视机或者显示器
  • Google Chrome 以获得最佳调试体验
  • 为 Chrome 安装了 Google Cast扩展
  • 了解设备序列号( 在 上面 条码和设备本身上存在)
  • 了解网站的登台版本和活动版本的网址

为开发配置 Chromecast

设备白名单

为了开发 Chromecast - 你需要给你的设备加白名单。 请导航到这里链接,选择"请求白名单"链接。 在服务器上为你的电子邮件地址。设备序列号和 two(2) url提供指向接收方应用程序HTML页面的地址,通常为一个用于 q& A 和一个用于生产的url。 你应该会收到 24 -48hours的答案。 如果不在,请在 5天内重复你的请求。

配置 Chrome 强制转换扩展设置

从 Google Chrome 存储中安装强制转换扩展:

选择选项:
在顶部蓝色 icon 上单击 four(4) 时间:

在开发者设置下,register 你的活动和登台网站域。 最好列出 http://localhost/也不错。

等待设备白名单确认

在一天或者两天内,你将收到如下电子邮件:

Thank you for your interest in developing for Chromecast.
Please use the following Developer ID when communicating with Google in the future:
6F9619FF-8B86-D011-B42D-00CF4FC964FF
Your AppID(s) are:
6F9619FF-8B86-D011-B42D-00CF4FC964FF -> http://www.yoursite.com/chromecast/rcvr/receiver.html

GUID是你的应用程序的唯一标识,你将在接收和发送部分使用它。

集成端点

Chromecast集成由两个部分组成:

发送者

在客户端浏览器中打开的HTML页面,它包含要绘制的内容的信息。 为了通知,该页面支持强制转换,将数据属性 cast-api-enabled 包含在打开的HTML标签中。

<htmldata-cast-api-enabled="true">

Google定义 Cast Chrome 发送方API插件: 对于 Chrome 发送方API的web页面,可以用于网页的数据对象和函数集。

接收器

启动后Chromecast设备加载的HTML5单页应用程序。 将API文件脚本引用包括到你的接收页中: http://www.gstatic.com/cast/js/receiver/1.0/cast_receiver.js。说明: API版本可能会更改。 可以在链接找到可以用于接收页面的API的描述。

调试接收器应用程序

你可能会问:如何才能找出我的receiver应用程序不在Chromecast设备上工作的原因? 幸运的是,为开发启用的设备打开端口 9222进行远程调试:

你可以在接收器页代码中设置断点,使用 console.log 将跟踪跟踪信息输出到控制台。 另外,通过调用 cast.receiver.logger.setLevelValue 函数可以控制转换API跟踪信息的级别。

cast.receiver.logger.setLevelValue(0);

简单演示应用程序

让我演示一下网站如何使用chromecast来转换一些视频文件。 让我们考虑最简单的情况: 播放视频文件的能力。

通过单击视频文件,在所选设备上启动播放。

如果有多个设备- 我提供了选择应该使用哪个设备的可能性。

通过单击媒体 URL,在所选的chromecast设备上启动播放。

Receiver单页面应用程序

至少,你应该期望Chromecast设备支持以下最低编码工作的媒体格式:

  • 视频编解码器: H.264 高剖面 4.1,4.2和 5,VP8
  • 音频解码: aac,lc,celt/opus,MP3
  • 容器: mp4/cenc,WebM,mpeg dash,SmoothStreaming

在这种情况下,接收机代码的最低应用如下:

cast.receiver.logger.setLevelValue(0);
 var ns= cast.receiver.RemoteMedia.NAMESPACE;
 var receiver = new cast.receiver.Receiver(
 'd6d488e8-7b35-4834-a4c9-935d660ab65c', [ns],
 "",
 5);
 var remoteMedia = new cast.receiver.RemoteMedia();
 remoteMedia.addChannelFactory(
 receiver.createChannelFactory(ns));
 receiver.start();
 window.addEventListener('load', function() {
 var elem = document.getElementById('vid');
 remoteMedia.setMediaElement(elem);
 });

相应的HTML视图仅包含加载指示器和HTML5视频元素:

<videoid="vid"style="position:absolute;top:0;left:0;height:100%;width:100%"></video><divid="status"style="display:none;
font-size:300%; position:absolute;top:40%;left:40%;"> LOADING....</div>

我已经使用 cast.receiver.RemoteMedia 类- RAMP协议处理程序的默认实现。 有些时候,这个描述在上有一点清晰format-这个Github链接你可以找到 Google Cast消息的历史版本,解释一下。

这个应用程序一旦接收到支持的媒体链接- 它就开始播放对配对HTML5媒体元素的视频文件。 通过调用 remoteMedia.setMediaElement 方法- 我们告诉 RemoteMedia 实例使用我们的视频元素进行播放。

重要笔记:应放置在与设备白名单相同的位置上。

发送方应用程序- 集成到现有站点

如果HTML标记包含数据属性 cast-api-enabled="true",则内容脚本检查这里属性并注入并初始化 API。 API将变量 cast.isAvailable 设置为 true,并将 MessageEvent 发布到窗体的页对象的主机窗口中:

{source: "CastApi", event: "Hello", api_version: [, ]}

在这里,api_version 是支持的API版本。 这个版本是一个 2-element array的整数,从 [1, 0 ]的初始版本开始。 当谷歌向API提交向后兼容的更改时,主版本号将增加。 为了向后兼容的变更,Google将增加次要版本号。

在我的演示应用程序中,我有两个代码部分: 用于隐藏 chromecast API细节的使用者( 例如。网站) 和 chromecast API helper 模块,提供以下三种方法: readyinitplay。 消费者首先通过调用 ready ( 回调函数) 方法订阅准备好的回调。 一旦 helper 模块表示,它已经准备好与Chromecast通信,消费者调用 init 方法并传递有关本身的信息:

var defaultCastAPIConsumer = {
 applicationID:'', //applicationID assigned by google setReceivers: function(){}, //This method is called// when I receive list of chromecast devices getCastingDevice: function(){} //I call this method to// ask application what device is selected for playback. };

之后,它可以通过调用 play(mediaurl) 启动设备上的播放媒体 URL。

转换API集成部分

例如我使用 Promise Pattern 定义 CastAPIReady 承诺,一旦API就绪,我就解决了。

if (window.cast && window.cast.isAvailable) {
 CastAPIReady.resolve();
} else {
 window.addEventListener("message", function(event) {
 if (event.source == window && event.data &&
 event.data.source == "CastApi" && event.data.event == "Hello"){
 CastAPIReady.resolve(event);
 }
 });
};

一旦API准备就绪,最好检查一下什么时候电视启动( 例如 ) 是否有任何工作的chromecast 设备。 通常,你必须为 chromecast 设备添加侦听器。 文档定义这里方法为"添加一个侦听器函数that当前列表中支持给定活动类型的接收器。 添加后,将立即调用侦听器,并在接收方列表更改时立即调用。"我通过接收的applicationID 作为第一个参数。 如果回调包含一个设备- 你可以使用它进行播放而不提示。 如果有两个或者更多设备- 一个好主意是询问访问者应该使用什么设备。

castApi.addReceiverListener(consumer.applicationID, onReceiverList);

我们必须调用api的api,以便启动我们的活动,以便启动回放。 接收方可能忙于其他强制转换,因此我们必须先'书籍'。 我们还需要准备将新媒体加载到接收器应用程序中的请求。 这可以用 cast.MediaLoadRequest 完成。 我们感兴趣的是 src 字段- 要打开的媒体文件的url,将 autoplay 属性设置为 true,以便立即启动。

function castMedia(mediaurl) {
 var result = new $.Deferred();
 var currentReceiver = castAPIConsumer.getCastingDevice();
 var launchRequest = new cast.LaunchRequest
 (castAPIConsumer.applicationID, currentReceiver);
 launchRequest.parameters = '';
 var loadRequest = new cast.MediaLoadRequest(mediaurl);
 loadRequest.autoplay = true;
 castApi.launch(launchRequest, function(status) {
 if (status.status == 'running') {
 castApi.loadMedia(status.activityId,
 loadRequest,
 result.resolve);
 } else {
 result.reject(status);
 }
 });
 return result;
 }

Points of Interest

尽管SDK仍处于测试版,但这种廉价的HDMI小工具潜力太大,无法在你的网站上忽略。 请访问这里的Cast API参考 ,了解更多细节。

示例代码

本文的顶部有示例代码,并且可以在上使用。

历史记录

  • 1.0 - 文章的初始版本。有关准备环境+ 草稿示例的说明,演示在设备上启动回放。 没有成熟的API和错误处理。

EXP  USE  添加  用户  CHR  chrome  
相关文章