krpano学习之路记录

本来正好趁着最近没啥事学习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),千万不要用!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容