匆匆忙忙写完上一篇帖子就去吃饭了~本着互联网开放、互助的原则,接着写这篇帖子,希望能够让有需求的小伙伴得到些许的帮助~
其实,说白了,对接摄像头,就是要获取它的直播流,流获取到了,在活字格页面上播放就可以了~
第一个问题就是如何获取直播流?
在开始这个问题之前,首先要确保您已经成为了萤石云的开发者。
可以按照官方的指引一步步走下去:https://open.ys7.com/guide.html
然后呢,就是创建应用,拿到accesstoken
接下来就是拿到摄像头的直播流地址,有以下几种方式:
1、登录后台,直接在自己的设备列表里查看
但是有个问题需要注意一下,这里拿到的地址,借助活字格视频播放插件是无法直接播放的,需要进行加工才可以~
活字格的视频插件不支持m3u8、flv、rtmp格式,那么我就找可以支持他们播放的办法~
既然网页上可以播放这些直播流,那是不是可以把这个网页嵌入到活字格里呢?还真可以,活字格还有个插件叫 嵌入自定义HTML页面
说干就干,度娘html如何播放m3u8,还真找到了~js可以实现,那就把代码复制下来~
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>播放</title>
- </head>
- <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
- <video id="video"></video>
- <script>
- if(Hls.isSupported()) {
- var video = document.getElementById('video');
- var hls = new Hls();
- hls.loadSource('替换成您的地址');
- hls.attachMedia(video);
- hls.on(Hls.Events.MANIFEST_PARSED,function() {
- video.play();
- });
- }
- </script>
- </html>
复制代码
把这里的地址换成您的直播流地址就ok了~然后,F5运行一下~哈哈哈,是不是画面已经出现了呢~
2、以上就需要借助代码才能完成的,那还有更简单的办法吗?当然有,直接复制一个地址就可以实现~
在摄像头直播列表里往下拉,找到启用H5页面,然后下面就会出现一串地址,直接复制,然后粘贴到活字格的 嵌入自定义HTML页面
这样就可以直接观看了~
3、还可以通过API请求获取直播流地址,在这里我就不赘述了,官方文档奉上
https://open.ys7.com/doc/zh/book/index/address_v2.html
他这个请求是把所有的信息都集合在URL上的,没有body~您可以先通过POSTMAN或者ApiPost调试通过了再复制到活字格里~
【云台功能的实现】
先奉上官方文档:https://open.ys7.com/doc/zh/book/index/device_ptz.html
云台具备以下功能:0-上,1-下,2-左,3-右,4-左上,5-左下,6-右上,7-右下,8-放大,9-缩小,10-近焦距,11-远焦距
活字格里新建一个服务端命令,http请求,把相关的token、设备编号、通道号、方向、速度等拼接好复制到URL里。这里我对方向进行了参数设置。
最终的地址长这样
- ="https://open.ys7.com/api/lapp/device/ptz/start?accessToken=替换成您的Token&deviceSerial=设备编号&channelNo=通道号&direction="&方向&"&speed=速度值"
复制代码 页面上添加四个图标(八个图标也可以)分别代表上下左右,然后给图标分别添加命令
调用服务端命令,上下左右分别对应0,1,2,3 把这个数字填写进去~
到这里,您的云台也写好了~快按下F5去感受下吧~
如果觉得有用,别忘了给个好评哦~嘿嘿~
|