找回密码
 立即注册

QQ登录

只需一步,快速开始

吴小胖 讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2022-3-9 14:42  /   查看:6265  /  回复:22
匆匆忙忙写完上一篇帖子就去吃饭了~本着互联网开放、互助的原则,接着写这篇帖子,希望能够让有需求的小伙伴得到些许的帮助~
其实,说白了,对接摄像头,就是要获取它的直播流,流获取到了,在活字格页面上播放就可以了~
第一个问题就是如何获取直播流?
在开始这个问题之前,首先要确保您已经成为了萤石云的开发者。
可以按照官方的指引一步步走下去:https://open.ys7.com/guide.html
image.png212211608.png
然后呢,就是创建应用,拿到accesstoken
接下来就是拿到摄像头的直播流地址,有以下几种方式:
1、登录后台,直接在自己的设备列表里查看
image.png242907408.png
但是有个问题需要注意一下,这里拿到的地址,借助活字格视频播放插件是无法直接播放的,需要进行加工才可以~
活字格的视频插件不支持m3u8、flv、rtmp格式,那么我就找可以支持他们播放的办法~
既然网页上可以播放这些直播流,那是不是可以把这个网页嵌入到活字格里呢?还真可以,活字格还有个插件叫 嵌入自定义HTML页面
说干就干,度娘html如何播放m3u8,还真找到了~js可以实现,那就把代码复制下来~
image.png712649841.png

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>播放</title>
  7. </head>
  8. <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
  9. <video id="video"></video>
  10. <script>
  11.   if(Hls.isSupported()) {
  12.     var video = document.getElementById('video');
  13.     var hls = new Hls();
  14.     hls.loadSource('替换成您的地址');
  15.     hls.attachMedia(video);
  16.     hls.on(Hls.Events.MANIFEST_PARSED,function() {
  17.       video.play();
  18.   });
  19. }
  20. </script>
  21. </html>
复制代码


把这里的地址换成您的直播流地址就ok了~然后,F5运行一下~哈哈哈,是不是画面已经出现了呢~

2、以上就需要借助代码才能完成的,那还有更简单的办法吗?当然有,直接复制一个地址就可以实现~
在摄像头直播列表里往下拉,找到启用H5页面,然后下面就会出现一串地址,直接复制,然后粘贴到活字格的 嵌入自定义HTML页面
image.png744735412.png
image.png935889282.png
这样就可以直接观看了~

3、还可以通过API请求获取直播流地址,在这里我就不赘述了,官方文档奉上
https://open.ys7.com/doc/zh/book/index/address_v2.html
他这个请求是把所有的信息都集合在URL上的,没有body~您可以先通过POSTMAN或者ApiPost调试通过了再复制到活字格里~
image.png769418945.png

【云台功能的实现】
先奉上官方文档: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里。这里我对方向进行了参数设置。
image.png821807250.png

image.png495543517.png
最终的地址长这样
  1. ="https://open.ys7.com/api/lapp/device/ptz/start?accessToken=替换成您的Token&deviceSerial=设备编号&channelNo=通道号&direction="&方向&"&speed=速度值"
复制代码
页面上添加四个图标(八个图标也可以)分别代表上下左右,然后给图标分别添加命令
image.png766548766.png
调用服务端命令,上下左右分别对应0,1,2,3 把这个数字填写进去~
image.png233964537.png
到这里,您的云台也写好了~快按下F5去感受下吧~

如果觉得有用,别忘了给个好评哦~嘿嘿~

评分

参与人数 10金币 +2005 满意度 +40 收起 理由
qq8009 + 5
afore + 5
Chelsey.Wang + 2000 很给力!
Axel + 5 很给力!
18791208143 + 5
Alink + 5
紫色幽魂 + 5
Ethan. + 5
13794930121 + 5
Nancy@GrapeCity + 5

查看全部评分

22 个回复

倒序浏览
13794930121活字格认证
银牌会员   /  发表于:2022-3-9 14:49:58
沙发
我来抢个沙发
回复 使用道具 举报
阿享悬赏达人认证
银牌会员   /  发表于:2022-3-9 15:08:32
板凳
回复 使用道具 举报
蓝色de浮萍
中级会员   /  发表于:2022-3-9 15:52:06
地板
回复 使用道具 举报
xyltk1973
中级会员   /  发表于:2022-3-9 16:10:00
5#
本帖最后由 xyltk1973 于 2022-3-9 16:13 编辑



回复 使用道具 举报
Luuuuuuu
超级版主   /  发表于:2022-3-9 16:28:21
6#
扫码立即添加葡萄城小助手,快速加入新手学习群,获取葡萄城产品及行业一手资讯,更多活动及福利等你来拿~
回复 使用道具 举报
djs521720讲师达人认证 悬赏达人认证 活字格认证
金牌服务用户   /  发表于:2022-3-9 17:01:41
7#
谢谢分享
回复 使用道具 举报
hubei333
高级会员   /  发表于:2022-3-9 17:47:08
8#
大神
回复 使用道具 举报
天涯客
注册会员   /  发表于:2022-3-9 22:34:50
9#
厉害啊!谢谢分享。
回复 使用道具 举报
xiaoyeniao
初级会员   /  发表于:2022-3-10 01:40:06
10#

回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部