萤石UIkit总结

十年切图崽
2,579 阅读6分钟

小程序接入方式

小程序接入本质上是使用了RTMP协议取流,然后通过小程序里的live-player控件进行播放.该播放支持预览和回放.

接入流程(获取token等前置条件省略...一般都是后端给的)

  • https://open.ys7.com/api/lapp/v2/live/address/get根据需求适当传参获得rtmp地址. - 将rtmp地址放入<live-player>插件中就可以播放了.
  • 所有的切换操作都需要重新请求接口,获得新的rtmp地址,更新到live-player上就可以完成切换视频操作.
  • https://open.ys7.com/api/lapp/video/by/time该接口可以查看到设备回放时间片段.
  • 配合进度条切换回放时间.

常见问题

  • 该微信控件观看回放视频内容的时候是没有进度条的,所以进度条得自己写.不过萤石的官方小程序DEMO里已经写了一个进度条控件,可以直接拿来用。当然这个进度条写得比较简单,他是写了144个DIV,然后计算其偏移量,而且样式比较丑陋.时间多的话可以用canvas重新写下(写前得考虑微信的基础库版本),具体的API可以参考DEMO来做.
  • 是否可以完全自己定制视频样式? 可以的,根据微信的live-player相关文档进行操作就可以了.
  • 有些手机出现视频黑屏情况。答:手机设置麦克风权限打开,打开后就可以正常播放.原因是因为我们采用了RTC的模式,该模式需要麦克风打开.

总结

小程序接入主要是使用了RTMP取流,然后进行一个视频的播放,这个方案对于小程序来说是非常好的一个方案,满足了延迟低,扩展方便的优点.

直播接入方式

该方式接入的本质是使用了HLS取流的方式,萤石提供了一个现成H5页面,填入相应的参数就可以生成,也可以自己获取HLS的流地址进行开发。该方式不支持回放,只支持直播.

接入方式

a.方式
  • 接入方式与小程序接入方式相似,唯一的区别是protocol该参数写2(代表HLS).当我们传参后可以获得对应的数据:
{
    "msg": "Operation succeeded",
    "code": "200",
    "data": {
        "id": "261665061356453888",
        "url": "https://open.ys7.com/v3/openlive/C95326291_1_1.m3u8?expire=1608657842&id=261665061356453888&t=1622b5d4f8ba11f85dec2892061c034140e69167d58f9bc3265578bad482f340&ev=100",
        "expireTime": "2020-12-23 01:24:02"
    }
}
  • 获得地址后,我们可以使用开源库video.js来进行一个播放.(这一块试了一下,因为设备离线了导致出现了点问题,后面补下DEMO)..
b.方式

通过管理后台配置页面就可以生成萤石的相关直播页.

下载插件接入方式.

该方式跟上述两种方式有着区别,它的优点是功能强大,可以实现分屏.缺点是需要用户下载插件以及无在移动端使用.

接入方式

  • 首先必须得下载插件HikOpenServicePlugin.exe..
  • 引入jsWebControl-1.0.0.min.js该库并创建实例对象oWebControl
  oWebControl = new WebControl({
        szPluginContainer: 'playWnd', // 与控件关联的dom节点id
        iServicePortStart: 14550, // 对应 LocalServiceConfig.xml 中的ServicePortStart值
        iServicePortEnd: 14559, // 对应 LocalServiceConfig.xml 中的ServicePortEnd值
        cbConnectSuccess, // 成功回调
        cbConnectError, // 失败回调
        cbConnectClose, // 意外断开回调
      });
  • 调用该实例下的一些方法对视频进行播放以及切换等操作.

Uikit视频控件

该控件它分为3种模式,包括直播模式,监控模式,多窗口模式。

三种模式的区别

  • 直播模式：将摄像头的画面实时传输给用户，无需校验即可播放。该模式需要生成自适应地址,自适应地址可在开发者服务-我的设备-直播地址中开启获得。

  • 监控模式：用户校验后可进一步体验低延迟，支持回放的监控视频播放。

  • 多窗口模式：在监控模式的基础上实现多个视频画面同时查看，支持1,4,9个窗口播放。

注意：直播模式使用的标准协议优势明显，无需校验即可播放，使用简单，易于传播但相对的成本也较高，建议与监控模式搭配使用，可以参考轻应用-视频开发套件产品页的实战经验。

接入方式

a.直播模式
  • 获得自适应地址 -> 自适应地址可在开发者服务-我的设备-直播地址中开启获得。

总结:可以用Uikit也可以使用直播地址接入的方式

b.监控模式

监控模式与直播模式最大的区别是它可以看回放.监控模式又分为以下几个模板 simple：极简版;standard：标准版;security：安防版(预览回放);vioce：语音版,以下几个版本的区别就是是否帮你封装好,他们的接入方式都是一致的,只是参数的不同.

  • 通过cdn/npm下载ezuikit-jsSDK.
  • 初始化player
  • 完成了Uikit的播放

常见问题

1.监控模式下如何选择合适的版本? 答:需要高度定制话如进度条,播放按钮,全屏等或者是在移动端项目中我们选择用simple版本。因为其它的版本对H5的兼容性非常不好,而且样式较丑.至于在PC端中则可以根据业务需要选择合适的版本进行使用,由于Uikit是一款封装性极强的组件,所以使用simple版之外的版本得与产品、设计进行一个沟通。

2.simple版本如何定制进度条? 答:可以使用canvas渲染出进度条,然后根据滚动的位置进行一个时间的计算,当滚动的时候canvas的字也随机发生改变。然后可以根据getOSDtimeCallBack方法获得视频的时间达到视频与进度条同步

3.该组件有什么坑么? 答:

  • 1.该组件本质是会创建一个iframe标签,就相当于你的页面里面嵌入了另一个页面.所谓的simple版本其实就是把一些视频控件给隐藏掉。所以对于二次开发来说会比较吃力。
  • 2.视频初始化的回调方法,必须出发后才会执行.例如:需要获得视频回放的实时时间,就得调用getOSDtime方法触发 getOSDtimeCallBack的回调。也可以使用getOSDtime().then(res=>res)的方式获得单次的回调时间。如需获得连续的回调时间,可以自己写setInterval。
  • 3.初始化信息只有url可以被动态修改,在播放过程中无法切换别的属性.如果想修改必须得重新初始化player,官方也没有提供相应的销毁操作,只提供了一个stop方法。

uikit源码解析

有时间在写~

avatar
文章
阅读
粉丝