萤石云枪机球机云台接入控制实战-含源码-layui 前端相关

文章图片
标题最终效果图,下班后摄像头关闭了主要使用到的技术栈:layui,阿里图标库,layui内置jquery ,mui.min.js,ezuikit.js,萤石云
开始用vedio.js来做,可以播放m3u8的码流,但当前码流结束后不能自动播放下一个,所以需要手动调用,但由于萤石云官方的个人用户并发只有3,请求稍微频繁一点就会建议我买vip,本屌没有钱,所以只能去调他的官网api.
期间也查看了海康威视的sdk,发现比较麻烦,后台发http请求还不如直接js发,所以放弃.
参考资料:
萤石云http开发文档:http://open.ys7.com/doc/zh/book/index/device_ptz.html#device_ptz-api3
播放会用到如下接口:UIKit Javascript 使用说明,可以下载一个demo,很简单,注意需要引入萤石云的js文件,建议下载到本地

控制部分那就是用ajax调用http接口了,官方提供的控制功能还不少.
可以先用官方的接口做下测试

文章图片

这里需要准备摄像头的AppKey,Secret,AccessToken,还有你摄像头的通道

文章图片

这个token有效期才7天,过期还要通过接口重新获取,而且官方说不能频繁调用,如图:

文章图片

都准备好就可以直播啦,其实直播只需要那个码流地址,就是点击自己的摄像头,进入通道,找到hls的那个地址,有普通和高清 ,地址最后为m3u8的,拷贝出来,在页面定义一个vedio标签

js中初始化一下

不出意外的话,到这里你的视频直播效果已经出来了,但我们还是要控制,要控制呀,不能控制我自己呀!!!
这里搞好后用户需要安装flash插件才能直播,要注意!
【萤石云枪机球机云台接入控制实战-含源码-layui】好的,我们继续
控制功能官方提供的接口很丰富,大致看一下,

文章图片

因为我用的是layui嘛,所以用layui自带的jquery发ajax请求比较坑,当然本屌也找到了解决办法,有好几种, 我用的是下面这一种

layui.use(['jquery', 'layer'], function(){ var $ = layui.$ ,layer = layui.layer; $.post('https://open.ys7.com/api/lapp/device/ptz/start',data,function(res){ if(res.code==200){ layer.msg(res.msg, {time: 2000}); }else{ layer.msg(res.msg, {time: 2000}); } },'json'); return false; });

data里面封装的就是请求的参数,不要急,稍后我会附上完整代码
开始呢,我做了个云台旋转和停止的功能,用的layui自带的button按钮,效果挺丑的,所以本屌发粪涂墙了一把,决定换点图标,翻遍了layui的文档,图标只有140个,我要的控制形状按钮都木有,这怎么难的住我,直接找layui整合阿里图标库的方案,参考如下两个帖子:
https://blog.csdn.net/qq_42402854/article/details/80830125
https://blog.csdn.net/kuchawyz/article/details/82707191?utm_source=blogxgwz1
大致就是去阿里官方图标库找到自己喜欢的图标并且下载下来放到layui里面使用,我就去找了一套

文章图片

选择自己需要的放到购物车

文章图片

选择下载代码

文章图片

代码下载好后拷贝到自己项目中,最好单独建个文件夹,然后修改iconfont.css,改成layui内置的型号

文章图片

将红框的iconfont字样替换成layui-icon。搞不明白的参考那两个帖子吧,不过净是坑,还不如看我的

文章图片

改好就可以在代码里面添加按钮啦,这六个样式分别是上下左右,停止,放大,缩小

加了后不美观,所以我又加了个mui.css,让图标大小适中

这下美美哒啦,跟文章一开头的样子一模一样了,接下来写点击控制的方法啦,当然你要参考官方文档

文章图片

开始控制功能需要5个参数,都是必填,所以一个一个来吧,一个control方法搞定,传不同参数就行,我分别传了0,1,2,3,8,9
停止控制功能的参数只要三个,所以不需要在onclick中传

好吧,到这个时候效果完全出来了,其实我是不满足的,我想要的效果是做个云台,鼠标移动到视频上效果就出来,否则自动隐藏,但没时间了,下次再做吧.
所有源码和依赖的css,js我都放在csdn下载那里了,你可以照着我的教程来自己做,也可以直接去下载,下载地址是:
https://download.csdn.net/download/m0_37609579/10851681
搞定了,大佬们点赞呀!