移动AI系列-百度智能小程序与VR+N的跨界实践

一、百度智能小程序及VR小程序组件介绍

小程序以其开发成本低，触手可及，即扫即用，用完即走，自带推广等优势获得了普遍认可；近几年，虚拟现实（Virtual Reality，VR）技术发展迅猛，商业化、市场化和产品化的趋势日益明显，百度在VR方面也做了一些探索，目前实现架构如下：

百度VR提供多种接入方式，支持多种平台；本文主要介绍方便易用的VR小程序组件，让开发者更易接入，用户更易使用。

1.1 认识百度智能小程序

打开手机百度APP，进入推荐页面，会发现如下图的左边页面有一行标示“智能小程序”，点击进入该小程序 ，如图右边所示：

可以观察到，百度智能小程序通常由常规的网页内容(html/css/js)，自定义组件（页面内功能模块的一种抽象，提升代码复用度）构成。

百度智能小程序采用自研渲染架构，在启动速度和运行性能上具有接近原生的体验，同时还提供了一些丰富易用的智能组件，包含语音组件，视觉组件，自然语言组件，AR组件，VR组件等；

百度自定义智能小程序组件由以下文件组成：

下面是一个简单的view自定义组件的实现方法：

1.2 开发自定义的百度智能小程序

开发者基于手机百度APP平台，开发自定义智能小程序，流程如下图：

开发者首先通过百度提供的小程序开发工具编写自定义的小程序，小程序开发完成后，点击开发者工具上的发布；这时小程序会被打包上传到服务器的B端，工作人员会对上传的小程序进行审核预览，如果没有问题继续发布到服务器的C端，如果有用户点击该小程序，会从服务器C端加密传输并下载到用户的设备端，并通过手百进行渲染，最终显示给用户；

开发者开发百度智能小程序时，时常会使用到百度提供的智能小程序组件，该组件往往是以动态库形式封装的，下面是使用步骤：

A  引入动态库   B 配置动态库  C 使用动态库

1.3 VR小程序组件

百度VR小程序组件为开发者提供了4种功能：全景视频(组件名：vrvideo)、全景图(组件名：panoviewer)、3D环物(组件名：spintileviewer)、3D模型(组件名：modelviewer)。

1.3.1 全景视频

全景视频组主要应用在在VR直播，游戏等场景，使用方法如下：

i 在项目中引用动态库

app.json：
"dynamicLib": { "myDynamicLib": { "provider": "vrvideo" } },

ii 配置动态库

xxx.json：
{ "usingSwanComponents": { "vrvideo": "dynamicLib://myDynamicLib/vrvideo" } }

iii 使用动态库

xxx.swan:
<vrvideo src="{{ src }}" style="width: 100%; height: 100%; display: block"></vrvideo>

通过src设置相应的属性项，目前支持的属性如下：

• 支持VR视频类型(投影模式)：球形、左右/上下立体、穹形180度/230度；
• 支持视频播放属性：播放、暂停、全屏、静音、循环播放、自动播放；
• 支持交互模式：手势，陀螺仪，手势+陀螺仪；
• 支持解码方式；软解和硬解；
• 支持的显示模式：单目、双目；

1.3.2 全景图

全景图组件主要应用在VR看房，VR地图，VR游戏等场景；全景图使用方法如下：

i 在项目中引用动态库

app.json:
“dynamicLib”: { “myDynamicLib”: { “provider”: “panoviewer” } },

ii 配置动态库

xxx.json :
{ “usingSwanComponents”: { “panoviewer”: “dynamicLib://myDynamicLib/panoviewer” } }

iii 使用动态库

xxx.swan :
<panoviewer options="{{ options }}" style="width: 100%; height: 100%; display: block"></panoviewer>

全景图支持的属性如下：

•投影模式：球形、等柱状体(equirectangular)、立方体、等角度立方体（ EAC ），分级分块等；
•交互模式：手势，陀螺仪，手势+陀螺仪；
•旋转角度：支持360度，720度自动旋转；

1.3.3 3D环物

3D环物组件主要应用在营销，产品展示等场景；环物组件的使用步骤和全景图组件类似：使用方法如下：

<spintileviewer options="{{ options }}" style="width: 100%; height: 100%; display: block"></spintileviewer>

支持的属性：

•环物角度：360度、720度；
•支持分级分块；
•支持热点，细节查看；

1.3.4 3D模型

3D模型主要应用在教育和游戏等场景；3D模型使用方法：

<modelviewer option="{{ option }}" style="width: 100%; height: 500px; display: block"></modelviewer>

3D模型支持的属性：

•模型格式：gltf、fbx、obj；
•支持模型跳转；
•支持动画播放，跳转；
•支持热点；

基于以上四种功能，百度VR落地了直播，教育和营销三种场景，下面分别介绍。

二 、VR + 直播实践

VR与直播技术的结合提升了直播观看体验，并使得观众从被动观看转换为主动参与，更加融入到现场，打破了空间与距离的隔阂；VR直播主要有两大分类，一类是专业生产内容(PGC)，如体育赛事、综艺节目、新闻事件的直播；另一类直播是用户生产内容(UGC)，如网红直播，户外直播等。目前百度VR在2020年初举行的全国二会直播上有过一些尝试，下面是百度VR直播架构实现图：

VR音视频采集端需用专门的VR摄像机，目前能支持180度和360度拍摄，最大能支持4k2K@30f/s视频采集；

以下是180VR相机采集的的画面：

三 、VR + 教育实践

百度VR教室是百度针对教育领域研发的一套VR教室解决方案，让VR进入学校教学，为学校带来全新的教学工具，丰富教师的教学手段，学生可以身临其境体验和学习。

百度VR教室支持PC VR和一体机两种VR设备，提供两套硬件解决方案，同时提供先进的软件解决方案（包括教学管理系统、VR课程体系）和完善配套服务，让学校有充分的选择空间，并能快速落地，开展教学。

下图是VR教室实际使用场景：

四 、VR + 营销实践

VR以其沉浸交互式特点在营销内容呈现上具有独特的优势，在产品营销上具有极大的商业价值。百度VR在营销上的实践主要通过百度VR营销平台实现的，如下图所示：

整个平台分为采集，处理，展示三大环节，支持3D环物，全景图片/视频采集，3D模型采集；

下图是VR营销实际使用场景：

五 、结语

虽然VR技术近几年得到了迅速发展和推广使用，但是由于VR内容生产制作比较繁琐，成本相对较高，目前的的应用场景主要是面向PGC多一点，而面向UGC场景的直播，由于成本和带宽的限制，VR采集到的视频分辨率低往往较低，一般会低于4K，即使4K分辨率码率也只能达到8Mbit/s，用户体验存在画面不清晰、眩晕的感受，一定程度限制了其发展。

相信随着千兆带宽和5G网络普及，设备端硬件性能的提升，有更好的体验的8K分辨率VR，定会得到更大范围普及，百度VR小程序也将助各位开发者闯出一番天地。

---

插播小广告~~~

百度APP端研发团队招人啦，简历直推老板！🎉🎉🎉

欢迎同学们加入百度app团队，我们崇尚务实、自由、开放的技术文化。这里基础能力完善，大牛带路、专家云集。加入我们吧！！一起成长，影响行业生态！！

目前有Android/iOS/FE北上深各级别岗位，可以通过百度招聘官网查询相关职位，或直接发简历到[e-mail]

---

本文作者：
gaoyuanfei

---

在微信-搜索页面中输入“百度App技术”，即可关注微信官方账号；或使用微信识别以下二维码，亦可关注。