找回密码
 立即注册

QQ登录

只需一步,快速开始

吴小胖 讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2022-3-9 14:42  /   查看:6726  /  回复: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 个回复

正序浏览
cfanlane
中级会员   /  发表于:2023-4-5 15:57:27
23#
实用价值很高呀,学习了
回复 使用道具 举报
Elizabeth
注册会员   /  发表于:2023-4-4 17:28:47
22#
我用直播源地址的时候怎么加载不出来呀,要不就显示的是编码格式是h264
回复 使用道具 举报
fenyunyijiu
初级会员   /  发表于:2023-2-6 15:16:07
21#
厉害厉害厉害厉害厉害
回复 使用道具 举报
和家
初级会员   /  发表于:2022-12-31 11:30:57
20#
回复 使用道具 举报
feng2575悬赏达人认证 活字格认证
金牌服务用户   /  发表于:2022-10-10 11:07:23
19#
牛 厉害了 神
回复 使用道具 举报
happyboyjia
高级会员   /  发表于:2022-10-10 11:04:44
18#
回复 使用道具 举报
jeffxian
注册会员   /  发表于:2022-6-9 14:43:58
17#
楼主是个牛人
回复 使用道具 举报
qq8009活字格认证
银牌会员   /  发表于:2022-6-8 23:08:34
16#
这个要支持一下
回复 使用道具 举报
resist
初级会员   /  发表于:2022-6-6 17:08:11
15#
能实现很多功能,学习了
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部