浅谈Web技术在智能电视智能家庭和智慧城市中的应用

1浅谈Web技术在智能电视智能家庭和智慧城市中的应用 孙广宇   @天行者-阿纳金 孙广宇东软集团UniSDP首席架构师产品&运营经理HTML5梦工场嵌入式&大连负责人@天行者-阿纳金[e-mail]内容简介一． Web技术发展趋势。二． Web在智能电视领域的使用。三． Web在智能家庭的使用四． Web在智慧城市领域的使用一.WEB技术的发展趋势主流Web内核发展趋势• IE：TridentIE11=SPDY• Safari:Webkit2、Nitro• Opera:Presto=Chrome• Mozilla：三星=Servo• Chrome：Webkit=BlinkGartener报告• 随着HTML5标准的制定，在业界得到了大力推广和普及。Web的能力变得空前的强大。其跨屏幕、跨系统、跨终端的特性，受到了众多行业的青睐。WebOS、ChromeOS、FirefoxOS、Tizen2等基于Web构建操作系统。• Win8、WP8、BB10、都支持以Web作为系统原生开发。iOS6、Android4等对HTML5的支持逐渐成熟，基于Web的混合式开发模式得到了广泛的使用。尤其是微信的强势崛起，对WebAPP无疑注入一只强心剂。众人拾柴火焰高枯木又逢春的Tizen旧瓶装新酒的Windows8FirefoxOS系统架构• Gaia• Gecko• GonkWebAnywhere• 跨系统:Android、iOS、Windows、Linux、BB10…• 跨设备/屏幕手机、平板、PC、TV、车载终端• 跨应用浏览器、微信、微博二.WEB在智能电视领域的使用SmartTV市场现状阵营品牌出货量GoogleTV/AndroidTVJAppleTV?%LinuxTVWebTVSmartTVAlliance40%SamsungTizen20%ChromeWebTV?%Smart TV联盟成员 •  创办人  •  顶级赞助商 •  赞助商  •  成员 • 愿景致力于为合作伙伴提供一个平台，在电视屏幕上实现互动式内容。HTML5SmartTV系统架构WebTVRuntimeWeb/NativeConversitionWebMVC硬件平台OSLinux(Android)系统库系统平台DRM硬件驱动DirectFBOpenGLDTVStackLibWebSocketWeb引擎媒体播放媒体编解码ProcessManagerIPCManagerResourceManagerApplicationSkypeNetflixDLNA…TimerManagerEPGManagerDatabaseKeyManagerEventManagerA/VPostProcManagerSecurityManagerAppManagerNetworkManagerStateMachineWindowManagerNotificationManagerServiceBusBackbone.jsMVCQuickMenuWebDesktop&APIView1View2View3快速机能人机交互处理EventProcessorServiceBusFuntionManagerDTVStackDirectFBDriverKeyEventWebAPI（DesketopAPI）DesktopUI1234567快速响应• 先执行DTV相关功能,• 直接通过DesktopAPI更新桌面系统中常驻的相关功能UI.• 不需要通过WebAPP的业务逻辑处理。WebAPPWebAPP事件交互处理EventProcessorServiceBusFuntionManagerDTVStackDirectFBDriverWebAPI（DesketopAPI）UI4• WebAPP发起事件• 调用执行DTV功能• 更新APPUILogic123567WebAPPWebAPP人机交互处理EventProcessorServiceBusFuntionManagerDTVStackDirectFBDriverKeyEventWebAPI（DesketopAPI）UI1239545• 处理输入事件• 通过WebAPP的业务逻辑处理• 调用执行DTV功能• 更新APPUILogic678111213全屏模式 半屏模式 后台服务模式 消息吹出模式 UI运行模式关于MVCBackbone.js与MVCModel1Model2Collection…HTML模版UserInputRouterViewView持有Model监听Model的EventModel变化，触发Event事件触发View渲染单页面应用 SPA模式（SinglePageApplication）• 每个window运行独立的App• AppManager中保存App对应的实例• App间借助WindowManager中window间通信的完成MPA模式（Multi-PageApplication）• 一个APP由多个window显示不同层次，共同协作运行共同完成独立的App。• AppManager中保存App对应的实例• App间各Window间通信WindowManager中APP实例内直接完成。多页面应用 单页面多应用 SPA模式（SinglePageApplication）• 每个window运行多个App• AppManager中保存App对应的实例• 同一Window间APP，通信如果无需底层功能可以在页面内部自行实现。• 若需要底层同步则在APPManager中B/S结构访问Web模型BrowserRemoteserver请求web返回web显示Ajax/JSonP/WS发送请求处理缓存ApplicationCache浏览器支持离线ApplicationCacheLocalStorage能力有限返回结果终端设备访问Web文件WebBrowser本地Web(WS)Server功能模块建立WS通信实时处理响应WebBrowser本地Web文件直接加载本地文件WebRuntime调用服务处理并响应功能模块常见方式：一:扩展浏览器二、Web服务1.扩展JS引擎2.自定义HTMLTAG3.URLLoad…期待的云端对模型BrowserClientNodeJSAPP1APP2JSJSJSAPP1JSAPP2CloudNodeJSAPP1APP2JSJS期望架构开发者2 AppStore & Cloud WebRuntime Core Service APP1 •  HTML、JS、CSS •  配置文件 - AppName - ID - 版本 - 访问权限 - 开发者信息 - …… APP2 APP3 APP4 发布 更新 开发者1 单一双向联接首次安装 增量更新 实时更新 服务访问 权限判读 返回结果 更新维度: Ø APP Ø ModuleØ HTMLØ JSØ CSSØ WAR推送/拉取服务 省电 Web发布更新模式WEBEPGEPG是ElectronicProgramGuide的英文缩写，意思是电子节目菜单。IPTV所提供的各种业务的索引及导航都是通过EPG系统来完成的。IPTVEPG实际上就是IPTV的一个门户系统。EPG的性能优化• 页面启动时，与长时间等待相比用户更能接受分批刷新。• 移动、修改Dom元素比销毁创建更快。• 尽量降低操作Dom元素的数量• 处理多个Demo元素，应准备好HTML一次添加一次重绘，避免多次添加多次重绘。• 适当的使用页面静态化处理，会大幅度提升性能。• 去掉同步队列，使用异步事件驱动。• 启动页面只加载必要的JS，CSS，在运行期动态加载（卸载）资源。• 连续翻页时，延迟一定时间确认是否发送请求数据。• 使用WebWorker进行速度优化。• JS引擎要支持JIT，提升速度。三.Web在智能家庭领域的使用 • DLNA:宗旨是随时随地的享受你的音乐、照片和视频。(由索尼、英特尔、微软等发起、旨在解决个人PC，消费电器，移动设备在内的无线网络和有线网络的互联互通，使得数字媒体和内容服务的无限制的共享和增长成为可能，目前成员公司已达280多家。DLNA数字生活网络联盟DLNA2-BoxPush1.GetMediaLibraryinfoandselectcontent2.PassURIforselectedcontent3.GetContentbinarystream2-boxpushDMSDMR1.GetMediaLibraryinfo2.Selectcontent3.GetContentstream2-boxpullDMSDMPDLNA2-BoxPullDLNA3-BoxSystem1.GetMediaLibraryinfo2.Selectcontent3.PassURI&metadataforselectedcontent4.GetContentbinarystreamDMSDMRDMCDLNARUI-HRUI-H：“HTML5远程用户界面”，在提供服务的设备上提供HTML5为基础的用户界面，它可以渲染到一个或者更多的客户端。DeviceFunctionDeviceCapabilityOptionalRUI-HSourceCapability+RUISRC+RUI-HServerRUIHSRUI-HTransportServerRUIHTSMediaTransportServer2or3BoxRUISystemUsageRUI-HSinkCapability+RUIHSINK+RUI-HClientRUIHCRUI-HTransportClientRUIHTCMediaTransportClientRUI-HUserAgentRUIHUA3BoxRUISystemUsageRUI-HController+RUIHCTRL+3BoxRUISystemUsageRUI-HClientControlPointRUIHC-CPRUI-HServerControlPointRUIHS-CPRUI-HPullCapability+RUIHPL+RUI-HTransportClientRUIHTCMediaTransportClientRUI-HUserAgentRUIHUA2BoxRUISystemUsageRUI-HServerControlPointRUIHS-CPHTML5 RUI Demo 跨平台的智能遥控器 四.Web在智慧城市中的使用传统公交站牌 • 站名 • 线路图 • 图文广告 智能公交电子站牌终端 • LCD显示器• 终端智能机• 箱体控制器• 不间断电源智能公交电子标牌系统组成Internet位置控⽹网构星公交基站⼦子站牌3G公交度度指中⼼心控屏幕控GIS服器数据服器WEB服器通信服器防⽕火移控GPS3G3G送位置信息度度指公交到站GPS采集位置信息箱体监控系统箱体设备巡检系统媒体采编&内容发布系统公交车报站系统Web电子标牌图片媒体视频媒体公告信息WebAPP气象、日历最新资讯公交信息WebGIS-OpenLayersOpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers支持的地图来源包括GoogleMaps、Yahoo、Map、微软VirtualEarth等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。自动化报站导乘• 车辆装备GPS或RFID装置，实现位置信息数据采集。• 与公交调度平台链接，计算出公交车辆与预报站信息。• 提供换乘线路查询功能。系统运维• 不间断电源• 智能防盗• 自动化箱体控制• 箱