水下耙SmartTV开发

哈Ha！

撰写有关SmartTV开发问题的文章一直是一个主意，但是当我们深入研究这一领域时，我们发明了自己的自行车，从而帮助我们解决了这些问题。 因此，在本文中，我们不仅将重点介绍SmartTV开发中的一些问题，而且还将讨论如何使用下一个新的PureQML框架解决这些问题。

对这个主题感兴趣或只是想看看也可以在SmartTV中使用的新框架的每个人，都要求我们提供帮助。

动物园

首先，本质上有许多SmartTV平台，其中许多平台适合启动Web应用程序。 这可能给人一种幻想，即只需编写一次代码并在所有平台上使用它就足够了。 但实际上，所有平台都有一些必须考虑的差异。 在这些功能中，可以区分以下内容：

• 处理遥控器按钮按下 。 并非所有制造商都为相同的遥控器按钮使用相同的键码。 例如，您可以比较orsay平台和webos的关键代码。 对于tizen，有必要明确注册一些按钮以备将来使用。
• 影片播放器 许多平台都支持html5视频播放器，但是例如tizen使用AVPlay ，或者说使用自己的API来与本机播放器一起使用。
• 有关设备的信息 。 在每个平台上获取有关设备的信息的方式也有所不同，在NetCast中，将使用特殊的id-shnik创建一个特殊的对象，在其他情况下，将使用特定于每个平台的方法。
• 重点 SmartTV应用程序主要侧重于远程控制，因此在实现UI / UX时应考虑使用导航按钮：向上，向下，向右，向左，确定和向后，但重要的是不要失去焦点并清楚地指出现在的位置。

该文件

除了各种平台和这些平台的文档外，问题还在于一些制造商发布的新版本有时会在某些地方失去兼容性，甚至切换到与以前的平台基本上不兼容的新平台（例如过渡版）。 LG与WebOS上的NetCast）。 同时，正在大力推广新平台，这使得在旧平台上很难找到信息，因为文档的某些部分已删除或传输，因此有时您会在表格提示中遇到无效链接。

安装方式

同样，由于平台的多样性，在调试设备本身上安装应用程序的过程也有所不同。 例如，对于AndroidTV，您可以使用adb，tizen有其自己的类似物sdb ，用于WebOS特殊的CLI脚本等。 这些工具中的每一个都需要安装和配置。 在这里，您可以添加大量的平台更新问题，以及随附的SDK和IDE更新。 Tizen Studio就是这种问题的一个例子。 下载最新版本后，您只能在三星电视tv4电视上安装应用程序，而没有简单的方法可以在早期版本的电视上安装该应用程序，因为后者实际上更大（如果您突然遇到此问题，请参见链接 ），甚至如果成功地用铃鼓跳舞，IDE将失去在电视上安装应用程序的能力。三星电视tv4 \ _（ツ）_ /¯

适度

要发布该应用程序，必须通过相应制造商的审核，并且每个制造商都有自己的规则和功能。 在这种情况下，您需要耐心等待，因为 可以检查申请超过一个星期，并且在计划截止日期时应考虑到这一点，即 该应用程序需要在发布之前很好地发布（如果您突然担心该应用程序会在任何营销活动之前出现-不要害怕，在发送审核时，您可以在其中指定可以不发布该应用程序的日期）。

您还需要做好以下准备：拒绝的原因可能很琐碎，例如，自我检查清单中的错误答案（开发人员在发送应用程序之前必须回答的问题列表，例如：“您的应用程序是否包含病毒”等）。或由于对UX应用程序的描述存在误解。 可能会遇到一些有趣的情况，例如，有一种情况是他们用流媒体电视频道包装了一个应用程序，因为他们在其中一个频道的空中took着一条线作为图形的人工产物，将其作为OSD的一部分。

AndroidTV和tvOS

我们还应该提到AndroidTV和tvOS， 这些平台不支持Web应用程序的显式启动。 对于tvOS，使用其自己的类似xml的语言：TVML，特别有趣的是，您可以对该语言进行排版，但是仅在特定的模板集中，很难做到完全任意的事情。 在这种限制的帮助下，所有tvOS的应用程序都被迫遵循单一的样式指南，并且如果您不言而喻，那么编写该应用程序的过程将很简单。

在android上，情况更好，因为 有多种方法可以运行网络应用程序，稍后再讨论其中一种。

我们该怎么做

面对现实，我们首先研究了现有的解决方案，但不幸的是，我不喜欢通用且方便的东西：智能盒不方便，反应无法解决特定的电视问题，例如，实际上，其他框架更面向网络。

现在，让我们看看PureQML如何处理这个问题（关于它，我们已经在这里和这里写过）。 简而言之，这是一个js框架，允许以类似qml的语言声明性地描述UI，这有助于快速创建从html，css和其他事物抽象的应用程序。 为了专门解决SmartTV问题，使用CC-BY-4.0许可证编写了一个单独的qmlcore-tv模块，该模块支持以下平台：

• LG WebOS
• LG网络广播
• 三星Tizen
• 三星奥赛
• 歌剧电视
• 海信
• 安卓电视

这是他解决上述问题的方法：

• 处理遥控器按钮 。 对于受支持的平台，将实现键代码的映射，并且在客户端代码中只需编写所需的处理程序就足够了，例如，对于遥控器的红色功能按钮，您可以编写一个处理程序：
  

  onRedPressed { /*   */ } 

• 影片播放器 要与播放器一起使用，有一个特殊的VideoPlayer组件，该组件描述了用于处理视频的界面，并且在构建阶段为目标平台选择了平台实现。 以下是使用示例：使用全屏链接播放循环播放的视频：
  
  

   VideoPlayer { width: 100%; height: 100%; autoPlay: true; source: "http://media.w3.org/2010/05/bunny/movie.mp4"; } 

• 有关设备的信息 。 为了获得有关设备的信息，使用设备控件就足够了，就像播放器一样，它描述了接口，并针对组装好的平台进行了实现。 以下是用于在屏幕上显示带有设备ID的文本的示例代码：
  
  

   Device { id: device; } Text { text: “DeviceID: ” + device.deviceId; } 

• 重点 框架本身的基本功能已经在这里有所帮助，在某一时刻，只有一个单一的焦点存在，并且不会在任何地方消失。 要使用焦点，可以使用声明性属性：
  focus-一个布尔型标志，指示此元素是否可聚焦
  activeFocus-一个布尔型标志，当此元素包含焦点时为true，否则为false
• 安装方式 为了在电视上方便地安装PureQML应用程序，可以使用smart-tv-deployer脚本，只需将其弯曲到PureQML项目的根目录即可。 例如，要构建一个名为“ myTV”的webos电视项目（就在您需要设置电视之前，有关设置WebOS TV的更多详细信息，请参见此处 ），您需要调用以下命令：
  
  

   ./smart-tv-deployer/build -p webos -t myTV 

• AndroidTV 。 在这里，就像android一样，本机语言是java，为了在此移植Web应用程序，我们使用了cordova项目。 该框架允许您使用WebView生成android应用程序，并在其中启动Web应用程序本身。 另外，正在进行将PureQML代码转换为本地代码的工作。

例子

例如，我们展示了如何将应用程序从上一篇文章移植到SmartTV。

如上所述，电视上的UX与桌面浏览器不同，您必须对代码进行一些更改以支持使用远程按钮：

 onSelectPressed: { osd.toggleActive() } onBackPressed: { if (osd.active) osd.toggleActive() else _globals.closeApp() } 

在此代码中，我们添加了按下“选择”和“后退”按钮的处理，当您按下第一个按钮时，当您按下“后退”时，打开/关闭OSD（带有地图和站点位置的菜单）。如果OSD打开，则将其关闭，如果关闭，则关闭应用程序本身。
最终结果可以在视频中看到：

结论

结果，PureQML作为开发SmartTV应用程序的工具表现良好，我们自己为此目的大量使用了它。
如果您有疑问或需要更多有关SmartTV开发或PureQML的文章-在评论中或在电报频道中撰写，我们将尽力回答所有问题。

感谢您的关注！ =）

参考文献

项目现场
Github页面
来源地球在线
电报支持频道