Wex5+海康摄像头+cordova封装 实现流媒体对接视频在线监控

上个项目是用wex5开发的,项目中有用到视频播放功能,对于本地视频或者存储到服务器的视频,wex5自带的插件都支持播放,海康视频监控在原生端做的很好了,h5目前还不支持,我们的思路只能是将海康视频播放器封装成cordova插件,然后在wex5中调用,其中有部分坑记录下来备用。


运行海康给的原生播放demo,需要地址、用户名、密码,登陆进去就能实现播放。首先我们将海康原生中没用的代码移除,只保留一个播放视频的界面,将多余的文件全部删除,原生端弄完后可以直接运行,传递四个参数:ip地址、用户名、密码、视频编码值。


原生端做完后需要封装成cordova插件,参照wex5官网的cordova插件封装的demo:wex5封装cordova插件步骤  ,前面的基本没啥用,我们最后要的是一个cordova插件,直接从 2.4 整合代码为标准的cordova插件 开始看就行 ,参照voiceManager的目录自己建一个目录,然后我们要做的就是修改整儿的文件名内容配置文件,最后将完成的cordova插件拷贝到wex5的Native目录中的plugins,然后我们在打包的时候搜索我们的命令就可以看着这个插件,在wex5页面直接调用方法就可以,下面介绍下cordova插件封装的几个坑

1.新建cordova目录


2.将目录拷贝到wex5中的Native/plugins目录下,打包的时候就会显示出来


3.目录文件中的plugin.xml配置说明

第一次做的时候完全可以参照voiceManager复制一份修改报名及方法名



这个配置文件中特别注意启动页配置及.so类型的jar包配置,做过原生开发的应该清楚.so类型的jar包在android目录中一般有两个目录


原生页面中的类一个不能少必须全部配置



4. video.js 中实现调用原生页面的方法


5.这是实现你原生想法的页面,进入到这个页面就说明你封装原生代码成功了,我在此页面实现了数据的传递及页面跳转,MyLiveActivityNoXml.java页面是实现视频监控的正真原生页面



6.wex5页面中调用video.js页面中的方法,通过调用setPlayMode()方法实现数据传递



7.然后在上一个打包wex5安装包选择插件时的描述页


最后总结下整个操作的流程
1.在wex5页面或者别的h5页面调用cordova插件中的方法将数据传递到www/video.js中的方法
2.video.js 接受到数据后执行VideoManager.java中的方法
3.VideoManager.java原生页面接受数据并跳转到正真的视频播放页面实现播放

下面上一下我写的一个demo的效果,点击第二个按钮实现监控摄像头的视频播放,点击第三个按钮实现跳转到一个原生的页面


此demo下载地址: demo下载地址

代码包括一下内容:
相关文章
相关标签/搜索