UIKit Javascript 使用说明

简介

UIKit,是基于萤石开放平台OpenSDK封装的UI组件,使用过程中不必学习专业的业务概念,更不用调用繁琐的接口,能够以极简的嵌入方式,快速在您的应用中集成视频功能。

UIKit覆盖的平台包含:iOSAndroidH5/Web

浏览器支持

  • Chrome 55+
  • Firefox 55+
注意:该版本不支持远程调用,所有依赖文件需放置服务器上。另外需注意iis拓展名需支持application/wasm,否则会报错failed to load wasm binary file at 'Decoder.wasm'。

添加mine

简单区分

直播模式:将摄像头的画面实时传输给用户,无需校验即可播放。

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

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

直播模式

使用方法

本地运行demo:

  1. 下载UIKit JavaScript
  2. 解压SDK
  3. 浏览器打开index.html

正式部署:

  1. 下载UIKit JavaScript
  2. 将压缩包移至服务器后解压
  3. 参照代码示例开发页面
  4. 运行服务器使用

代码示例——demo-live.html

// 首先引入js
    <script src="../ezuikit.js"></script>
    <script src="../js/jquery.min.js"></script>
// 页面创建video标签
  <video
    id="myplayer"
    src="ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live"
    width="400"
    height="300"
    poster="[这里可以填入封面图片URL]"
    [autoplay]
    controls
    playsInline
    webkit-playsinline
  >
  </video>
// 开始初始化直播源地址
        var player = new EZUIKit.EZUIPlayer('myPlayer');
// 播放
          player.play();
// 结束
          player.stop();

配置说明

属性名 示例 默认值 说明
id myPlayer null *必填,video标签id
src ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live null 直播地址
autoplay true true 自动播放,去掉该字段就关闭自动播放
poster 图片url null 封面图片地址
width 400 null 视频元素宽度
height 400 null 视频元素高度

直播地址的更多使用方法可查看:直播地址接入指南

监控模式

获取最新SDK及示例 (https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm)

简介

颠覆性的巨大突破:实现在主流浏览器上无插件方式播放EZOPEN协议达到1-2s的低延迟效果,支持回放,支持加密设备,并且支持H265!补充:由于浏览器性能有限,仅支持码率2M及以下的设备进行取流播放,码率过高会导致播放卡顿。

监控地址可在开发者服务-我的设备-监控地址中获得: 监控地址

监控地址:

地址结构:

预览:ezopen:// [验证码@] open.ys7.com/[deviceSerial]/[channelNo] [.hd].live 地址示例:ezopen://open.ys7.com/203751922/1.hd.live 回放:ezopen:// [验证码@] open.ys7.com/[deviceSerial]/[channelNo] [.hd].rec[?begin= yyyyMMddhhmmss&end= yyyyMMddhhmmss] 地址示例:ezopen://验证码@open.ys7.com/203751922/1.rec?begin=20190317000000&begin=20190317235959

回放地址不带时间参数时默认取当日0时0分0秒至23时59分59秒,缺省也同样会自动补充,比如begin=2019031709,系统会自动给补充为begin=20190317090000&end=20190317235959

回放时间点是否存在录像可以通过调用根据时间获取存储文件信息接口(链接)来查询验证

[EZUIKit-JavaScript-npm][ezuikit-js]

轻应用npm版本,降低接入难度,适配自定义UI,适配主流框架

低延时预览,云存储回放,SD卡回放

功能API丰富,如:播放控制,音频控制,视频截图,实时获取视频OSDTime,视频录制,设备对讲,电子放大,全屏等

获取ezuikit-js

$ npm install ezuikit-js

引入ezuikit-js

import  EZUIKit from 'ezuikit-js';
如果你使用原生方法,可以通过标签引用
  <script src="./ezuikit.js"></script>

开始使用 - 初始化

基本使用

创建DOM

  <div id="video-container"></div>

播放器初始化

    var player = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
      url: 'ezopen://open.ys7.com/203751922/1.live',
    })

方法调用

示例: 停止播放

  1. player.stop();

  2. player.stop()
  .then(()=>{
    console.log("执行播放成功后其他动作");
  });

示例: 执行播放(自动播放为false,自定义触发播放/切换播放地址)

  player.play();
  // 切换播放地址场景(注意先执行stop方法停止上次取流)
  player.play({
   url: 'ezopen://open.ys7.com/203751922/1.rec?begin=202001000000&end=202001235959'
  });

切换地址播放(注意需要先执行stop方法停止上次取流)

  player.stop()
  .then(()=>{
    player.play('ezopen://open.ys7.com/{其他设备}/{其他通道}.live');
  });

  // 其他账号下设备

  player.stop()
  .then(()=>{
    player.play({url:'ezopen://open.ys7.com/{其他设备}/{其他通道}.live',accessToken: 'xxxx'});
  });

使用说明

初始化

参数名 类型 描述 是否必选
id String 播放器容器DOM的id Y
accessToken String 授权过程获取的access_token Y
url String 视频ezopen协议播放地址 Y
audio int 是否默认开启声音 1:打开(默认) 0:关闭 N
width int 视频宽度,默认值为容器容器DOM宽度 N
height int 视频高度,默认值为容器容器DOM高度 N
templete string 播放器模板,可以通过选定模板,使用内置的播放器样式,组件 simple:极简版;standard:标准版;security:安防版(预览回放);vioce:语音版 N
header Array 视频头部可选UI组件,可选值:capturePicture:截图,save:录像保存,zoom:电子放大 N
footer Array 视频底部部可选UI组件,可选值:talk:对讲,broadcast:语音播报,hd:高清标清切换,fullScreen:全屏 N
plugin Array 按需加载插件,可选值: talk:对讲 N
handleSuccess function 播放成功回调 N
handleError function 播放错误回调 N
openSoundCallBack function 开启声音回调 N
closeSoundCallBack function 关闭回调 N
startSaveCallBack function 开始录像回调 N
stopSaveCallBack function 结束录像回调 N
capturePictureCallBack function 截图回调 N
fullScreenCallBack function 全屏回调 N
fullScreenChangeCallBack function 全屏变化回调-全局(含ESC退出全屏等) N
getOSDTimeCallBack function 获取OSD时间回调 N

方法集合

方法名 类型 描述 使用示例
stop function 结束播放 player.stop()
openSound String 开启声音 player.openSound()
closeSound String 关闭声音 player.closeSound()
startSave int 开始录像 player.startSave()
stopSave int 结束录像 player.stopSave()
capturePicture function 视频截图 player.capturePicture()
fullScreen function 全屏(自动适配移动端pc端全屏) player.fullScreen()
cancelFullScreen function 取消全屏 player.cancelFullScreen()
getOSDTime function 获取播放时间回调 player.getOSDTime()
startTalk function 开始对讲 player.startTalk()
stopTalk function 结束对讲 player.stopTalk()

使用示例

如果使用原生js,可参考demos => base-demo

如果使用react,可参考demos => react-demo

如果使用vue,可参考demos => vue-demo

配置说明

由于监控地址对于浏览器性能有较高的要求,多窗口的视频播放容易达到浏览器性能瓶颈,我们提供了测试结论供参考: 监控性能

安全防盗

监控地址的场景由于需要鉴权,所以需要用户输入AccessToken,开发者账号的AccessToken权限太大,容易被截取非法使用,内测阶段暂时先体验视频能力,稍后我们会上线新接口来防范该风险,请关注官网公告。

FAQ:

1. 监控模式播放画面很卡顿?

答:目前由于新技术对于浏览器性能要求较高,高分辨率的视频浏览器消耗CPU过高会卡顿,建议使用1080P及以下的分辨率。

2. 下载到本地后运行demo,无法体验播放

答:安装包中的demo无法直接运行,需要将包部署到服务器上运行后才可以使用,且相关依赖文件必须放在服务器上,无法远程调用。如需快速体验可以直接运行包里的index.html会进入轻应用体验服务。

3. 监控地址播放回放报错回放找不到录像文件?

答:回放技术是从设备端取已经保存的录像文件来播放,目前录像存放有三种,一种存在设备的SD卡里,一种存在关联的硬盘录像机,第三种购买云存储后会将移动侦测录像上传云存储(目前监控模式暂不支持第三种)。找不到录像文件说明选择回放的时间段内没有录像文件,可以通过API接口查询有录像片段的时间点进行回放。

4. 直播模式只能使用H264,监控模式切换成H265直播就无法使用了,该如何选择?

答:直播模式使用的标准协议目前还不支持H265,所以无法同时兼容,建议用户可以在设备配置中做如下调整,大部分设备都支持主码流与子码流,主码流对应高清直播地址,子码流对应流畅直播地址,可以调整主码流的视频编码为H265,子码流的视频编码为H264,这样就可以在直播模式使用流畅的直播地址来保障,且可以控制一定的成本。监控模式可以使用高清与流畅的地址,同样可以控制成本。

其他问题反馈:请提交播放地址(https://open.ys7.com/console/work.html)工单

results matching ""

    No results matching ""