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

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

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

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

获取ezuikit-js

npm install ezuikit-js

# yarn

yarn add ezuikit-js

# pnpm

pnpm add ezuikit-js

引入ezuikit-js

import EZUIKit from 'ezuikit-js';

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

  <!-- umd -->
  <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/G39444019/1.live',
      width: 600,
      height: 400,
      handleError: (err) => {
        if (err.type === "handleRunTimeInfoError" && err.data.nErrorCode === 5) {
          // 加密设备密码错误
        }
      },
    })

回放

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

tips

为方便开发者快速接入

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

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

你可以通过以下地址获取到测试accessToken 获取测试accessToken 用来播放上述测试播放地址。 当前设备有可能下线或被移除了， 如果自己有设备优先使用自己的设备进行测试。

最佳实践tips

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

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

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

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

使用本地解码库提升加载速度 开发者需要自己设置静态资源文件地址， 参考 staticPath的配置

使用示例

1. 快速创建视频播放页面

    基本使用： 基本使用示例

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

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

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

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

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

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

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

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

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

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

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

附录： 初始化参数说明

直播

标清

ezopen://open.ys7.com/${设备序列号}/{通道号}.live

高清

ezopen://open.ys7.com/${设备序列号}/{通道号}.hd.live

回放

sd卡回放

初始化参数 url值为： ezopen://open.ys7.com/${设备序列号}/{通道号}.rec?begin=yyyyMMddhhmmss

云存储回放

初始化参数 url值为： ezopen://open.ys7.com/${设备序列号}/{通道号}.cloud.rec?begin=yyyyMMddhhmmss 视频ezopen协议播放地址 详见：ezopen协议 Y

配置示例：

方法调用

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

开始播放

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

停止播放

  // 方式1
  player.stop();
  // 方式2
  player.stop()
  .then(()=>{
    console.log("执行停止成功后其他动作");
  });

开启声音

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

开始录制

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

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

停止录制并下载文件

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

抓图

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

开始对讲

  player.startTalk();

结束对讲

  player.stopTalk();

全屏

  player.fullScreen();

取消全屏

  player.cancelFullScreen();

获取OSD时间

   player.getOSDTime()
  .then((time)=>{
    console.log("获取到的当前播放时间", time);
  });

切换地址播放

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

  player.changePlayUrl(options)
  .then(()=>{
    console.log("切换成功")
  });

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” |

切换模板主题

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

  player.Theme.changeTheme(template)

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

template参数说明

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

开启电子放大

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

  // 方式1
  player.enableZoom();
  // 方式2
  player.enableZoom()
  .then(()=>{
    console.log("开启电子放大成功");
  });

关闭电子放大

  // 方式1
  player.closeZoom();
  // 方式2
  player.closeZoom()
  .then(()=>{
    console.log("关闭电子放大成功");
  });

重置画面宽高

  player.reSize(width, height);

鱼眼矫正（软解 开启 SharedArrayBuffer）

// {1, 0}  壁装鱼眼 不矫正
// {1, 1}  壁装360°全景
// {1, 2}  壁装4分屏
// {1, 4}  壁装广角
// {3, 0}  顶装鱼眼 不矫正
// {3, 1}  顶装360°全景
// {3, 4}  顶装4分屏
// {3, 5}  顶装柱状
// 顶装4分屏
player.setFECCorrectType({place: 3 , type：4}, "cavnas1,canvas2,canvas3") // cavnas1,canvas2,canvas3 是分屏是需要的

使用示例

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

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

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

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