本来正好趁着最近没啥事学习RN呢,新任务就下来了:研究一下krpano,那么krpano是什么呢?我的初步理解它是一套用于制作全景(图片,视频)以及生成对应的前端页面的工具和框架的总称。
一、首先,进入官网:
1、https://krpano.com/ 这个是官网地址,但是是全英文的,这里还有一个中文网:http://www.krpano360.com/ 有没有官方授权不知道,但是总结的还不错,好像是个人搞的。
2、可以上面选择一个网址了解一下krpano的基础知识和原理之类的,有一个大致的了解。
3、普通全景的制作过程和方法写的很详细,在这就不赘述了,本文主要致力于解决一些要完成的但又不太好找到的功能。
4、很巧的是最近在看react native,感觉写法很像,有兴趣的可以顺便研究一下
二、在这里叙述一下我的任务:
1、实现全景视频播放。
2、全景视频添加动态热点。
3、写出demo,实现播放本地视频功能,并打包成ios或者android应用,其中可能还会涉及IOS和android的知识。
三、首先是决定框架的问题
经过一(ji)系(fen)列(zhong)的比较,决定使用使用HBilder提供的html5plus的框架,原因呢,嗯。。。很多啊,比如说打包方便、打包方便和打包方便啊(可能吧?)。然后html5plus的框架的填坑呢,在这:www.baidu.com。
四、接下来讲krpano的事情,下面主要是记录的一些使用过程的知识点和填坑历程吧。:
1、在移动端没有办法播放vr视频,在pc端是可以的,不是写法的问题,官方的demo在移动端同样不能播放。经测试发现具体情况是:在ios设备上没办法播放,在安卓设备上可以播放但是没有画面只有声音,查阅一番,有人说是视频格式不正确,官方提供了专门的视频转换方法:http://www.krpano360.com/panovideo-converter-quanjingshipinzhuanhuanqi/试了一下,确实可以解决ios上的问题,安卓的没测试,但是接下来又是第二个问题。
2、在播放全景视频的时候,在调用插件播放视频的同时,会调起ios原生的播放器且遮住全屏(ios),解决办法是禁用掉原生的video的全屏。
3、经过测试,在ipad3 上,3万比特率的视屏,最大只能支持到3k(包括,30721536px)到3.5k(不包括,38401920px)之间,再大的就会卡住播不了了,其他机型有待测试。
4、基于第3点,想到之前视频在安卓端只有声音,画面卡住的问题,因为正常一个三万码率(比特率)的视频,音频的码率只有几百,个人认为可能是安卓设备(一台android4.4版本的手机、一台M系列的大鹏VR一体机)硬件配置较低,支持不了较高的视频码率,当然目前属于个人猜测,有待后期测试。
5、默认的皮肤是没有开启陀螺仪的,要是想一开场就开启陀螺仪,可以在tour.xml的include那一行的后面添加:
<plugin name="skin_gyro" enabled="true"/>
6、krpano的中文网站krpano360.com上提供了将做好的全景视频转换为krpano可以用的工具http://www.krpano360.com/panovideo-converter-quanjingshipinzhuanhuanqi/,教程之类的都没啥,就是有一个注意点,不管是源文件的路径还是输出视频的路径,千万不要有空格,不然只能看到命令行狂闪,然后就没有然后了。
7、到今天(2017/9/29),krpano已经更新到了1.19 pr13,这个版本我关心的最主要的问题,就是修复了在ios设备上全景视频点击播放和暂停按钮或者切换场景的时候崩溃的问题,这个问题已经算是折磨了我三四天的时间,一直无从下手,终于给出了官方的解决办法,兴高采烈的用最新的版本重新升成了场景,跑了起来,崩瞎卡拉卡~又崩了,根本没解决问题啊,说好的做彼此的天使来着呢?逗我呢?苦思良久,会不会修复的只是基于浏览器内核崩溃的现象?而在ios app里面崩溃肯定是内存超过了ios的限定内存(ios7.1之前40M,7.1之后50M,据说),询问了krpano中文网作者 肥宗本人之后得知krpano并没有提供手动清理缓存的办法,那么办法就只剩下一个了:在全景页面不进行任何缓存!
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
解决!
8、作为一个开发人员,调试没有log就很痛苦啊,找了下文档,只需要在需要的地方先打开debug模式:
showlog(true);
再在需要打印log的地方输入:
debugvar(varname);//varname是指变量名
即可,但是注意:
- 只有debugmode启用时,debug信息才会显示。
- 可以启用html的 consolelog设置,这样浏览器的日志记录也有这些信息。
-
过多的跟踪会影响渲染表现!避免在每一帧都持续地输出信息!
(ps:参考在这里)
9、不知道在上面时候开始,反正在我发现的时候(krpano 1.19.pr13),突然就是全景视频不能暂停和播放了,之前一直以为
加了自动转场的功能,后来想想不应该,仔细找了一下,在skin/vtourskin.xml文件里发现了这样一段代码:
if(scene[get(xml.scene)].isvideopano AND plugin[video] !== null,
skin_video_addcontrols();
,
skin_video_removecontrols();
);
意思是如果场景的.isvideopano属性为true,并且有名为video的插件的时候,执行skin_video_addcontrols();否则执行skin_video_removecontrols();我们是全景视频,讲道理肯定是应该执行skin_video_addcontrols();方法的嘛,可是在打了debug之后发现并不是,硬生生的走了下面一个方法,至于原因么,可能是版本的差异吧,在场景里面用的属性是ispanovideo,而到了判断条件这赤裸裸的变成了isvideopano,欺负人!只要把这里的判断条件的isvideopano改成ispanovideo即可。
时隔一年又来搞krpano了,这次不用套原生壳,所以弃用mui,改用当下比较火的vue,当然了,也是初学,所以肯定会遇到很多坑,也会在这里记录下来
一、krpano的问题
1、插件传递参数的问题
之前写插件都比较简单,js调xml,偶尔会有xml调取js也是不带参或者带固定值的参数,一致都没有遇到问题,直到这次遇到传变量名的问题,发现xml调用js方法的时候如果传变量名的话,并不会把变量的值传过去,竟然直接把变量名当做字符串传过去了。经过测试,可以把变量名用get()包一下获取到变量的值,就可以了。例如:
plugin[testpluginname].testfunction(get(paramter));
2、调用自定义插件方法报错 :unknown action:XXXX
自定义插件的名字支持全英文小写格式(testfunction)、下划线格式(test_function).....(其他情况没试),唯独!唯独!唯独!不支持驼峰命名法(testFunction),千万不要用!