因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实践过程中遇到的问题的总结。官方文档地址: https://open.ys7.com/doc/zh/book/index/live_proto.html

萤石云开放平台
按照萤石摄像机官方携带的说明书进行注册 ,图中①和②都有HLS地址,①是官方给用户试用的地址,②是自己添加的摄像头地址。
以①为例,获取萤石云试用设备HLS地址 ,点击播放测试,即可观看当前HLS地址的视频信息。
微信开发者工具
搭建好自己的微信小程序(我们使用mpvue),原生也可以.
在mpvue中,采用vue语法嵌入video组件,并将HLS地址写入src中。
<video direction="0" src="https://hls01open.ys7.com/openlive/d123ae15138ff4bfe8123.m3u8" controls="true" objectFit="cover" autoplay :show-fullscreen-btn="false" :show-play-btn="false"> </video>

利用微信开发者工具分享二维码,在真机上测试,模拟器不支持
下面是萤石云开放平台、对视频基本费用、以及直播流量费用的价格表
微信小程序接入海康威视有2种方式:
一是无需开发,直接使用 wx.navigateToMiniProgram携带参数跳转到萤石云的小程序预览demo即可
二是需要开发,使用微信的 live-player直播组件
小程序接入文档地址:https://open.ys7.com/bbs/article/48
萤石云demo的github地址:https://github.com/Hikvision-Ezviz/WeChat-miniApp
我这里直接使用的跳转,虽然怪怪的,但也算成功了
wx.navigateToMiniProgram({
appId: 'wxf2b3a0262975d8c2', -- 就是写死的萤石云的appId,注意不要改!!我开始就是自作聪明,改成自己的了,总是跳转没有用,也是自己对小程序不熟悉吧,【复制的时候记得把这段注释删了】
path: 'pages/live/live?accessToken=' + accessToken + '&deviceSerial='+deviceSerial+'&channelNo=' + channelNo,
success(res) {
console.log(res);
// 打开成功
}
})
然后拼接上地址后面携带的参数
accessToken
deviceSerial
channelNo