先说说遇到的问题吧?其实这2个组件,或多或少都会用到,不管是做h5也好,做app也好.以我个人的经历,产品需求总会牵连这一块.这一次的踩坑,结合了好多小伙伴和大佬的思路…如果你也用这2个组件,看完可能或多或少对你有帮助.(文中均以videoplayer为例,webview也可同样操作)
痛点 : 这2个组件是归属在cocos自带的canvas之外…难以解决层级问题
可行性分析 :
1.修改HtmlElement的zIndex…缺点:仅有1个canvas1个video层,或上或下的调整.遇到’夹心饼干’就没法解决.
2.把videoPlayer’融入’到canvas中?
对比过后,自然肯定是选择第二种方案啦…
说思路之前,先说遇到的问题 :
中间辗转各个可能性,做过很多尝试,均以失败告终…
1.发现小伙伴提供的一个方法,就是canvas自带的drawImage…这可真是个好用的api,能够把video的东西给渲染到另一个canvas上面去…但是告诉你一个悲痛的消息,creator2.0+版本,默认是webgl.
2.但是我很清楚creator是有canvas模式的,怎么办?退回1.8版本,发现videoplayer无法获取一个隐藏属性’_impl’(这也是个关键,后面用到.我是先知道有_impl才知道降级后找不到)
3.canva上有个接口getContext(),参数为’2d/webgl’,在2.0上,传入2d获取是null,传入webgl,则返回一个WebRenderingContext(涉及Webgl底层,简直害怕…尝试后果真失败…毕竟完全不懂底层)–(这里提个醒:如果有大佬熟悉webgl,可以直接从这里着手,canvas有drawImage,我相信webgl也会有同样的实现方式,我太渣,所以没能成功踩过去…希望有大佬踩过去带一带)
…经历蛮多的,但是时间不够就不一一细说…
好了…那么多题外话,终于到正题了…解决思路 :
1.canvas是要用滴,毕竟drawImage那么强大.
2.把视频信息给渲染到某个canvas,然后通过截图,配置给sprite
3.做个定时器去刷(是的.我还没测试性能到底有多差,但就这样做着先)
上个效果图安慰下你们,再说具体流程:
具体流程 :
1.看看html结构图,如果你看过cocos默认的,你就会发现差别…是的,我自己添加了一个canvas.测试发现,自己增加的canvas是以canvas模式渲染,并不像cocos自带的以webgl形式.
2.从videoPlayer上获取到HtmlVideoElement
(怎么获取?先给video._impl.video.id=‘起个id’,然后通过document.getElementById(’’)拿到手的就是HtmlVideoElement,这些HtmlxxxElement具体是什么,请自行了解)
3.铛铛…在第一步自己增加的canvas就可以通过drawImage来读取videoPlayer上面的视频信息了.
2dContext.drawImage(this.jmVpElement, 0, 0, 512, 288);
4.接下来就简单啦…写个定时器,30毫秒刷一次drawImage.这样就类似视频效果.
5.然后在自己创建的canvas上调用toDataURL(),拿到一个base64的图像信息,然后把base64图像信息转换为图片(百度都有)
6.进行截图,然后赋值回cocos自带canvas的某个sprite上面…为什么?我的想法是回归到cocos下,方便各种控制和管理.
(第5/6步骤可以合并起来看,网上搜索’canvas截图’之类的,就有代码可以copy…我也是copy大佬们写好的来改)
总结下来就是 :
经过几天努力,总算是完成了cocos上进行直播的想法…是的,竞品公司用的是白鹭,我就非作死的挑cocos.本来还没定型,可以随便选用.鬼知道呢?
很少写帖子,这个可能也是第一个帖子吧?不用你们说,我知道写得很差…就这样…顺便蹲着看能不能遇到大佬们带一波…
