微信小程序实现乐橙云摄像头拉流播放

1.了解wx小程序提供的播放组件

在wx小程序中,我们提供了很多媒体组件,每一个组件都有各自的功能,在乐橙云官方的小程序对接文档中,他们推荐我们使用live-player组件。

所以我们来看一下live-play组件的信息。

我们将该组件写到代码中,查看live-play的通用属性中,我们看到了目前小程序仅支持flv和rtmp格式。

这个时候呢,我们需要做的就是给live-player组件提供一个flv格式的链接地址,所以我们需要接着查看获取flv播放需要哪些参数。

我们开始倒推,到底做一个摄像头的实时播放需要哪些接口和参数。

打开乐橙云官网

https://open.imou.com/document/pages/af2c7d/乐橙云开发文档

2.查看乐橙云flv格式的视频源接口及所需参数

打开之后,我们很清楚的就可以看到,flv直播接口及所需参数。

该接口要求我们传给他管理员token, 设备序列号deviceId, 通道号channelId,这三个参数是要求我们必须传给它的,通道号一般情况下传个0即可,设备序列号,我们可以在点击某一个中拿到列表信息,这个信息中就包含设备序列号,所以我们现在最需要获取的就是管理员token了。

3.获取管理员token

通过乐橙云的接口文档,我们很容易就可以找到获取管理员token的接口,调用这个接口,我们就不需要传入任何参数,但是需要给他一个params的一个{}即可。

4.为什么要下沉到服务端

下面的代码都是后端做处理展示出来的,为什么要下沉到服务端,让后端来做,其实原因很简单。

我调用了第三方的代码,导致跨域,最正常不过。

紧接着就是我们的请求也不好写,最主要就是跨域,我已经尝试过了,让后端来写吧。

我也向官方问过了

给出的答案就是让我们将所有的openapi下沉到服务端,要不我们的token很容易泄露。

5.代码实现

首先我们需要将页面写好

随后获取所有的list信息

我为什么要在获取完之后在往数组对象中加一个videoSrc的原因就是要确定给哪个src赋了值。

随后我们再onshow中获取管理员token。

最后我们去点击单个播放

我这里为什么要先删除再创建的原因,就是如果我之前创建了,这个时候会报错,说flv格式视频源已存在,所以我需要删除一下,再进行最终的创建。

最后我们需要获取player组件的上下文对象。

这样我们就可以实现乐橙云的小程序播放了,随后我会更新一下pc端,其实实现的方法基本一致,pc端实现拉流播放,大致流程如下,不需要调用flv或者rtmp等格式的视频源。

以上信息,我已经更新到语雀中了

https://www.yuque.com/tademanong/ag7q4n/hm2xvw91islng00s?singleDoc# 《微信小程序实现乐橙云摄像头拉流播放》语雀