扩展屏，基于快应用引擎的多屏互动解决方案

 需求的产生

随着智能电视的普及，越来越多用户习惯了投屏，把手机内容投到电视上以获得更好的视频欣赏体验。去年疫情期间，我的孩子在家上网课，时间还挺长，为了让他不要长时间盯着平板电脑，我尝试让他用投屏功能在电视上看。发现了一些问题，也是需求产生的原因。

老师经常问同学们听懂了没，让同学们敲1表示懂了；有时候也会让同学们做题，在对话框里写出选择题的答案（ABCD）。传统投屏要么是基于屏幕镜像的，无法在大屏端操作；要么是基于媒体流的，只能控制媒体流的播放、暂停、快进等操作，不支持更复杂的业务操作。当然，标准的DLNA/Airplay协议也不是为这种应用场景设计的。

这些垂直场景的互动需求激发了我做互动投屏的想法。我的需求是：用户可以把手机APP上某个适合大屏的场景“投放”到大屏端，这个操作会带来场景的转移和用户的转移，接下来用户就可以切换到大屏端操作，大屏端支持遥控器就用遥控器，大屏端支持触摸就用触摸。大小屏共享用户信息，即小屏登录后大屏就不必再登录。大小屏可双向互动，比如大屏端选择课程小屏端支付购买。

需求的实现

我们研究了目前业内的一些现有方案，发现车机方案很适合，苹果的CarPlay和安卓的Auto都支持无线或有线的大小屏互操作，优势是不用开发者改造手机端。但，车机方案实际是APP界面流化加控制指令流化，适合两边都是触摸屏的情况。手机和电视的交互情况不同，一边是触摸屏一边是遥控器，界面设计和交互模式完全不一样，如果硬把手机APP界面“投”到电视在用遥控器操作，效果会非常糟糕。

经过权衡，我们最终采用了类似于手机快应用的方案。手机把某个场景（界面Activity）“投”到电视的操作，实际上是把一个快应用“扔”到了电视端，在电视端的快应用引擎上独立运行，和电视端遥控器交互，是为“投应用”。这个快应用实际上是手机应用里某个场景的大屏端扩展，所以叫扩展屏，这个运行快应用的引擎就叫扩展屏引擎。

产品的场景

以直播应用为例，用户在手机端点击“扩展屏”按钮把应用“投”到大屏后，可以用大屏的遥控器进行换台等操作，这是传统投屏做不到的。同时也可以反向回来，用户在大屏端操作可以反向推到手机上。比如传统的购物扫码，如果用扩展屏就会很方便，用户无需扫码，手机上直接付款。

扩展屏和传统大屏应用的区别

原生应用是安卓系统标准的应用，效率最高，但它最大的麻烦是需要下载、安装。如果某个应用你点它下载、安装，再打开，这个效率会非常低，流程很容易中断，而且还要做升级、适配。后来有的厂家就用H5来做，H5很轻量，但是它的运行效率低，资源占用率很高。我们也尝试过，有的原生应用的功能它是很难实现的。扩展屏是电视端的快应用，则不需要下载安装过程，性能跟原生应用一致，封装大量组件，节省70%的开发部署成本，非常方便使用，这已经是一个成熟的技术。

投应用和投屏的区别

我们以网络教育中的直播课来举例。传统投屏状态下，小朋友只能看，做不了互动。手机（屏幕镜像）一直在消耗流量和电量，家长做不了别的事，微信什么的都用不了。 投应用操作方式类似投屏，但是它投过去以后，手机就可以干其他的事了。这个时候电视端的摇控器就可以用上了，小朋友可以通过摇控器点击反馈是否听懂了。老师可以让同学们选择ABCD，这是传统投屏方式做不到的，这是他们之间最大的区别。

需要说明的是，投应用和投屏之间不是竞争和覆盖的关系，而是相互补充的关系，各有各的场景，各有各的优势。

扩展屏应用的定位

以前很多移动端应用上大屏，做的是完整的大屏应用，比如说淘宝的大屏版，一个完全用遥控器操作的大屏淘宝。扩展屏的定义是不同的，它是手机APP的扩展，聚焦到核心场景，像刚才那个在线直播课应用，注册、登陆、买课这些操作在大屏上不方便，也不需要在大屏上做，只需要把上课这个页面做成扩展屏就好了，大大节省了开发资源，用户用起来反而更方便。

引擎分层框图

基于我们团队在OTT端十几年的经验积累，经过一年多的研发，终于实现了扩展屏引擎的产品化。这是我们的一个系统分层图。核心工作是连接，用JS代码调用系统UI组件快速实现功能，帮您将精力聚焦到业务逻辑。为了方便大家开发，我们上面又包了一层就是业务的模板。电视端的UI其实都差不多，点播类、直播类等等，大同小异。所以我们做了70多个组件模板，这样的话开发人员只需要关注到最尖上的业务核心代码。

我们解决方案里面包括五个子系统，包括从移动端到大屏虚拟机、开发者管理、业务管理等完整的业务流程，架构面向运营商业务体系进行设计。

目前扩展屏已经可以通过iOS应用来调用，也可以通过安桌应用来调用，还可以通过H5页面和微信小程序来调用，这就架起了了一个流量桥，把流量导到大屏端。

基于此我们能够帮原有CP升级成SP。举个例子，比如说作业帮，如果只是把媒资注入运营商内网里，他们就只是CP，他们在产品上的想法和独有的交互方式是无法展示给用户的。我们可以给他做一个扩展屏前端，他就变成了运营商内网的APP，而且这个APP不需要安装，操作起来非常方便。这样的话对于原有媒资内容的使用效率就会高很多，用户数据也会更好看。

扩展屏的三个优势

第一，大大降低研发、部署和升级成本。我们算了一下开发部署这块能降低成本70%，而且是“用后即焚”，不占用盒子的存储。运营商会很关心这个问题，比如说他们有一些没有空间升级新业务的512M内存的老盒子，这种老盒子可不可以？这个也没问题，预装扩展屏引擎后，老盒子也可以做到无限接入新服务。

第二，大屏营销新玩法。通过微信小程序、H5原有的移动互联网营销资源实现直接拉起大屏端扩展屏应用或者APK的跨屏营销模式，能快速实现广告和为视频等服务拉新拉活的价值。

第三，充分支持二级播控。扩展屏跟传统投屏不一样，投屏是把手机的内容放到大屏上，这个对于运营商来讲是不可控的，大屏只负责显示；而扩展屏无论是直播还是点播，这是跟二级播控要打通，也是我们要跟运营商一起做的事。

合作模式

我们和运营商有两种合作方式：

第一种是纯粹技术合作，我们为运营商提供技术，帮运营商建立增值业务的支撑平台，全套系统部署到其中，运营商把他原有服务、内容包装成扩展屏的方式，能够大大节省盒子上的存储空间，可以空出来做更多的事情。

第二种是服务合作。我们会持续地从移动端引入更多新的服务和新的内容，源源不断输送到运营商网络中去，这里面产生的收入，会跟运营商进行分成。

这两种模式是可以混合存在的。

除此之外，我们提供了大屏场景下的六大行业标准模板，包括健身、体育、教育、直播、VR等等。上个月我们和CSDN做了线下开发者活动，邀请了很多开发者，这些开发者不需要了解大屏端Java开发，只需要懂JS，前端工程师就可以很容易开发出来，我们教他们怎么去做。

我们的开发者网站是：http://mp.es.hiliad.com/#/
扩展屏是用js+VUE开发的快应用，懂js开发的前端工程师非常容易上手，欢迎大家加入。

电科技（www.diankeji.com）是一家专注于全球TMT行业的领先资讯媒体。

作为今日头条青云计划、百家号百+计划获得者，2019百度数码年度作者、百家号科技领域最具人气作者、2019搜狗科技文化作者、2021百家号季度影响力创作者，曾荣获2013搜狐最佳行业媒体人、2015中国新媒体创业大赛北京赛季军、 2015年度光芒体验大奖、2015中国新媒体创业大赛总决赛季军、2018百度动态年度实力红人等诸多大奖。

投稿、商务合作请联络微信公众号

声明：本站原创文章文字版权归电科技所有，转载务必注明作者和出处；本站转载文章仅仅代表原作者观点，不代表电科技立场，图文版权归原作者所有。如有侵权，请联系我们删除。