npm 中文文档

EZUIKit-JavaScript-npm


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


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


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


获取ezuikit-js


  1. ``` sh
  2. $ npm install ezuikit-js

  4. ```

引入ezuikit-js


  1. ``` sh
  2. import EZUIKit from 'ezuikit-js';

  4. ```

如果你使用原生方法,可以通过标签引用


  1. ``` sh
  2.   <script src="./ezuikit.js"></script>

  4. ```

开始使用 - 初始化


基本使用


创建DOM

  1. ``` sh
  2.   <div id="video-container"></div>

  4. ```

播放器初始化


直播


  1. ``` sh
  2.     var player = new EZUIKit.EZUIKitPlayer({
  3.       id: 'video-container', // 视频容器ID
  4.       accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
  5.       url: 'ezopen://open.ys7.com/G39444019/1.live',
  6.       width: 600,
  7.       height: 400,
  8.     })

  10. ```

回放


  1. ``` sh
  2.     var player = new EZUIKit.EZUIKitPlayer({
  3.       id: 'video-container', // 视频容器ID
  4.       width: 600,
  5.       height: 400,
  6.       accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
  7.       url: 'ezopen://open.ys7.com/G39444019/1.rec'
  8.     })

  10. ```

tips


为方便开发者快速接入

我们提供了测试accessToken,测试播放地址，并提供了几种常用场景使用示例。你可以通过使用示例，使用测试播放地址，测试accessToken，在你的应用快速接入。

测试播放地址：ezopen://open.ys7.com/G39444019/1.live

你可以通过以下地址获取到测试accessToken 获取测试accessToken 用来播放上述测试播放地址。

最佳实践tips


我们在v0.6.2及以上版本持用户通过开启谷歌实验室特性启动多线程解码，多线程模式将大大提升解码效率，降低解码内存消耗。

开启多线程方式1 (https://open.ys7.com/help/384 )


开启多线程方式2 (https://open.ys7.com/help/385 )


视频解码库默认从开放平台远程拉取，你可以将解码库放到本地或者你的服务内，可以提升加载解码库速度。

使用本地解码库提升加载速度本地解码库示例


使用示例


快速创建视频播放页面

基本使用：基本使用示例

前往开放平台轻应用模板管理页 创建一个主题，可以动态配置你的播放主题，控件，示例展示了获取一个主题后使用示例。

自定义主题：自定义主题示例

你可以本地创建一个主题配置，可以本地配置你的播放主题，控件，示例展示了本地配置项使用示例。

本地主题配置：本地主题配置示例

我们提供了一些通用场景的主题，PC端预览，PC端回放，移动端预览，移动端回放，你也可以直接使用。

PC端预览-固定主题：PC端预览-固定主题示例

PC端回放-固定主题：PC端回放-固定主题示例

移动端预览-固定主题：移动端预览-固定主题示例

移动端回放-固定主题：移动端回放-固定主题示例

同一个页面播放多个视频，可以参考：


单页面多实例(视频多窗口)：单页面多实例(视频多窗口)示例

方法调用


同步方法（方式1） 方法支持通过promise回调，可通过回调方式执行下一步动作（方式2）。


开始播放


  1. ``` sh
  2.   // 方式1
  3.   player.play();
  4.   // 方式2
  5.   player.play()
  6.   .then(()=>{
  7.     console.log("执行播放成功后其他动作");
  8.   });

  10. ```

停止播放


  1. ``` sh
  2.   // 方式1
  3.   player.stop();
  4.   // 方式2
  5.   player.stop()
  6.   .then(()=>{
  7.     console.log("执行停止成功后其他动作");
  8.   });

  10. ```

开启声音


  1. ``` sh
  2.   // 方式1
  3.   player.openSound();
  4.   // 方式2
  5.   player.openSound()
  6.   .then(()=>{
  7.     console.log("执行开启声音成功后其他动作");
  8.   });

  10. ```

开始录制


因录制解码库加载限制，录制库加载需要3S秒左右，请保证录制时长需要大于5秒。 录制文件需要使用播放器，播放器下载地址 播放器下载


  1. ``` sh
  2.   // 方式1
  3.   player.startSave("唯一文件名");
  4.   // 方式2
  5.   player.startSave("唯一文件名")
  6.   .then(()=>{
  7.     console.log("执行开始录制成功后其他动作");
  8.   });

  10. ```

停止录制并下载文件


  1. ``` sh
  2.   // 方式1
  3.   player.stopSave();
  4.   // 方式2
  5.   player.stopSave()
  6.   .then(()=>{
  7.     console.log("执行停止录制成功后其他动作");
  8.   });

  10. ```

抓图


  1. ``` sh
  2.   // 方式1 - 下载到本地
  3.   player.capturePicture("文件名");
  4.   // 方式2 - 返回base64格式
  5.   const capCallback = (data) => {
  6.     console.log("data",data)
  7.   }
  8.   player.capturePicture('default',capCallback)

  10. ```

开始对讲


  1. ``` sh
  2.   player.startTalk();

  4. ```

结束对讲


  1. ``` sh
  2.   player.stopTalk();

  4. ```

全屏


  1. ``` sh
  2.   player.fullScreen();

  4. ```

取消全屏


  1. ``` sh
  2.   player.cancelFullScreen();

  4. ```

获取OSD时间


  1. ``` sh
  2.    player.getOSDTime()
  3.   .then((time)=>{
  4.     console.log("获取到的当前播放时间", time);
  5.   });

  7. ```

切换地址播放


可用于在播放中切换设备，切换播放参数，以及直播切换回放等。请注意，频繁切换可能导致异常，切换间隔至少需要1秒


  1. ``` sh
  2.   player.changePlayUrl(options)
  3.   .then(()=>{
  4.     console.log("切换成功")
  5.   });

  7. ```

options参数说明

参数名 类型 是否必选 默认值 描述
:--- :--- :--- :--- :---
type String Y 无 播放地址类型，"live":预览，"rec"：回放；“cloud.rec”：云存储回放
deviceSerial String Y 无 设备序列号,存在英文字母的设备序列号，字母需为大写
channelNo int Y 无 通道号
accessToken String N 初始化时获取 授权过程获取的access_token
hd boolean N 初始化时获取 是否为高清 true-主码流（高清） false-子码流(标清)
validCode String N 初始化时获取 设备验证码（加密设备播放需要输入验证码）
validCode String N 初始化时获取 设备验证码（加密设备播放需要输入验证码）
begin String N 初始化时获取 type类型为回放有效，开始时间 格式为“YYYYMMDDHHmmss”
end String N 初始化时获取 type类型为回放有效，结束时间 格式为 “YYYYMMDDHHmmss”

切换模板主题


可用于在播放中切换模板主题，请切换播放地址成功后调用


  1. ``` sh
  2.   player.Theme.changeTheme(template)

  4.   // 预览切回放场景示例
  5.   player.changePlayUrl({type:"rec"});
  6.   .then(()=>{
  7.     console.log("地址切换成功，开始切换模板主题");
  8.     player.Theme.changeTheme("pcRec");
  9.   });

  11. ```

template参数说明

参数名 类型 描述 是否必选
:--- :--- :--- :---
type String 模板名称，详见初始化参数template Y

开启电子放大


建议使用模板，模板中的电子放大功能更全


  1. ``` sh
  2.   // 方式1
  3.   player.enableZoom();
  4.   // 方式2
  5.   player.enableZoom()
  6.   .then(()=>{
  7.     console.log("开启电子放大成功");
  8.   });

  10. ```

关闭电子放大


  1. ``` sh
  2.   // 方式1
  3.   player.closeZoom();
  4.   // 方式2
  5.   player.closeZoom()
  6.   .then(()=>{
  7.     console.log("关闭电子放大成功");
  8.   });

  10. ```

重置画面宽高


  1. ``` sh
  2.   player.reSize(width, height);

  4. ```

使用示例


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


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


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