主要使用到的技术栈: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文件,建议下载到本地
<script src="https://open.ys7.com/sdk/js/1.4/ezuikit.js"></script>控制部分那就是用ajax调用http接口了,官方提供的控制功能还不少.
可以先用官方的接口做下测试
这里需要准备摄像头的AppKey,Secret,AccessToken,还有你摄像头的通道
这个token有效期才7天,过期还要通过接口重新获取,而且官方说不能频繁调用,如图:
都准备好就可以直播啦,其实直播只需要那个码流地址,就是点击自己的摄像头,进入通道,找到hls的那个地址,有普通和高清 ,地址最后为m3u8的,拷贝出来,在页面定义一个vedio标签
<video id="player1" width=320 height=200 poster="" controls playsInline webkit-playsinline autoplay><source src="高清的播放地址.hd.m3u8" type="application/x-mpegURL" />
</video>js中初始化一下
<script>var player1 = new EZUIPlayer('player1');var player2 = new EZUIPlayer('player2');
</script>不出意外的话,到这里你的视频直播效果已经出来了,但我们还是要控制,要控制呀,不能控制我自己呀!!!
这里搞好后用户需要安装flash插件才能直播,要注意!
好的,我们继续
控制功能官方提供的接口很丰富,大致看一下,
因为我用的是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。搞不明白的参考那两个帖子吧,不过净是坑,还不如看我的
改好就可以在代码里面添加按钮啦,这六个样式分别是上下左右,停止,放大,缩小
<p class="layui-text-bottom"><button class="layui-icon layui-icon-up" lay-submit="" lay-filter="add" onclick="control(0)"></button><button class="layui-icon layui-icon-down" lay-submit="" lay-filter="add" onclick="control(1)"></button><button class="layui-icon layui-icon-left" lay-submit="" lay-filter="add" onclick="control(2)"></button><button class="layui-icon layui-icon-right" lay-submit="" lay-filter="add" onclick="control(3)"></button><button class="layui-icon icon-pause" lay-submit="" lay-filter="add" onclick="stop()"></button><button class="layui-icon icon-plus-circle" lay-submit="" lay-filter="add" onclick="control(8)"></button><button class="layui-icon icon-minus-circle" lay-submit="" lay-filter="add" onclick="control(9)"></button>
</p>加了后不美观,所以我又加了个mui.css,让图标大小适中
<link href="mui.min.css" rel="stylesheet">
<script src="mui.min.js"></script>这下美美哒啦,跟文章一开头的样子一模一样了,接下来写点击控制的方法啦,当然你要参考官方文档
开始控制功能需要5个参数,都是必填,所以一个一个来吧,一个control方法搞定,传不同参数就行,我分别传了0,1,2,3,8,9
停止控制功能的参数只要三个,所以不需要在onclick中传
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
<link rel="stylesheet" href="../../layuiadmin/layui/font/font_2wmcsfamra2/iconfont.css">
<script src="../../layuiadmin/layui/layui.js"></script><script>layui.config({base: '../../layuiadmin/' //静态资源所在路径}).extend({index: 'lib/index' //主入口模块}).use(['index', 'sample']);//这三个参数控制开始和停止都需要传,所以我抽取出来了data={accessToken: '你自己的token,7天就会过期',deviceSerial:'你自己的设备号',channelNo:'设备的通道号'}//开始控制var control=function (direction) {data.direction=direction;//控制方式,我传了0,1,2,3,8,9data.speed='2';//转动速度我直接写死了,有0,1,2三个值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;});}//停止转动var stop=function () {layui.use(['jquery', 'layer'], function(){var $ = layui.$ ,layer = layui.layer;$.post('https://open.ys7.com/api/lapp/device/ptz/stop',data,function(res){if(res.code==200){layer.msg(res.msg, {time: 2000});}else{layer.msg(res.msg, {time: 2000});}},'json');return false;});}</script>好吧,到这个时候效果完全出来了,其实我是不满足的,我想要的效果是做个云台,鼠标移动到视频上效果就出来,否则自动隐藏,但没时间了,下次再做吧.
所有源码和依赖的css,js我都放在csdn下载那里了,你可以照着我的教程来自己做,也可以直接去下载,下载地址是:
https://download.csdn.net/download/m0_37609579/10851681
搞定了,大佬们点赞呀!
