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

上个项目是用wex5开发的，项目中有用到视频播放功能，对于本地视频或者存储到服务器的视

如果此信息过期，可以私我VX：beibei7278，也可订做海康、大华视频监控插件开发

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下载地址

代码包括一下内容：

技术交流