ezuikit-js
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/ezuikit-js package

8.1.1-alpha.2 • Public • Published

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

Download Version License Build Demos

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

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

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

hls和flv 不在维护更新,后续版本中会被移除, flv 可以使用 ezuikit-flv, hls 可以使用 @ezuikit/player-hls

hls和flv 不在维护更新,后续版本中会被移除, flv 可以使用 ezuikit-flv, hls 可以使用 @ezuikit/player-hls

hls和flv 不在维护更新,后续版本中会被移除, flv 可以使用 ezuikit-flv, hls 可以使用 @ezuikit/player-hls

获取 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)

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

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

使用示例

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

    基本使用: 基本使用示例

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

    自定义主题: 自定义主题示例

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

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

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

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

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

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

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

同一个页面播放多个视频,可以参考:

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

附录: 初始化参数说明

参数名 类型 描述 是否必选
id String 播放器容器DOM的id Y
accessToken String 授权过程获取的access_token Y
url String

直播

标清

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
audio boolean 是否默认开启声音 true:打开(默认) false:关闭 N
width int 视频宽度,默认值为容器容器DOM宽度 Y
height int 视频高度,默认值为容器容器DOM高度 Y
staticPath string 设置静态资源地址, 自定义可以自行下载 `ezuikit_static`放置在自己的服务器下, 设置 {staticPath: "/ezuikit_static"} N
template String
模板值 描述
simple 极简版 *固定模板 仅包含视频播放窗口,创建实例后通过方法集控制视频播
放相关功能
standard 标准版; *固定模板 包含视频窗口,叠加了停止,录制,全屏控件(通过
控件快捷调用方法集合控制视频播放相关功能,但你仍然可以通过方法集直接控制视频播放相关功
能。下同)
security 安防版(预览回放); *固定模板 包含视频窗口,叠加了录制,全屏控件,
标清/高清切换,预览录制切换控件*
voice 语音版; *固定模板 包含视频窗口,叠加了录制,全屏控件,语音播报,语音
对讲控件*
pcLive *固定模板 按钮列表,颜色,底部头部背景色固定,可用于pc端预览,如需
修改按钮配置,头部底部背景色,可参考 {{自定义themeId}},或者使用
themeData本地配置*
pcRec *固定模板 按钮列表,颜色,底部头部背景色固定, 可用于pc端回放,如需
修改按钮配置,头部底部背景色,可参考 {{自定义themeId}},或者使用themeData
本地配置*
mobileLive *固定模板 按钮列表,颜色,底部头部背景色固定,可用于移动端预
览,如需修改按钮配置,头部底部背景色,可参考 {{自定义themeId}},或者使用themeData
本地配置*
mobileRec *固定模板 按钮列表,颜色,底部头部背景色固定, 可用于移动端回放,
如需修改按钮配置,头部底部背景色,可参考 {{自定义themeId}},或者使用themeData
本地配置*
自定义themeId 自定义主题,前往开放平台控制台配置页面获取
(v0.6.2版本及以上支持,建议使用 自定义themeId,或者使用themeData本地
配置);
N
themeData Object themeData将主题数据本地化,设置本地数据,需要删除template参数
你可以通过themeData修改按钮位置,颜色,头部底部颜色等配置。

配置示例:



{
    "autoFocus": 5,
    "poster":"https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
    "header": {
        "color": "#1890ff",
        "activeColor": "#FFFFFF",
        "backgroundColor": "#000000",
        "btnList": [
            {
                "iconId": "deviceID",
                "part": "left",
                "defaultActive": 0,
                "memo": "顶部设备名称",
                "isrender": 1
            },
            {
                "iconId": "deviceName",
                "part": "left",
                "defaultActive": 0,
                "memo": "顶部设备ID",
                "isrender": 1
            },
            {
                "iconId": "cloudRec",
                "part": "right",
                "defaultActive": 0,
                "memo": "头部云存储回放",
                "isrender": 0
            },
            {
                "iconId": "rec",
                "part": "right",
                "defaultActive": 0,
                "memo": "头部本地回放",
                "isrender": 0
            }
        ]
    },
    "footer": {
        "color": "#FFFFFF",
        "activeColor": "#1890FF",
        "backgroundColor": "#00000021",
        "btnList": [
            {
                "iconId": "play",
                "part": "left",
                "defaultActive": 1,
                "memo": "播放",
                "isrender": 1
            },
            {
                "iconId": "capturePicture",
                "part": "left",
                "defaultActive": 0,
                "memo": "截屏按钮",
                "isrender": 1
            },
            {
                "iconId": "sound",
                "part": "left",
                "defaultActive": 0,
                "memo": "声音按钮",
                "isrender": 1
            },
            {
                "iconId": "pantile",
                "part": "left",
                "defaultActive": 0,
                "memo": "云台控制按钮",
                "isrender": 1
            },
            {
                "iconId": "recordvideo",
                "part": "left",
                "defaultActive": 0,
                "memo": "录制按钮",
                "isrender": 1
            },
            {
                "iconId": "talk",
                "part": "left",
                "defaultActive": 0,
                "memo": "对讲按钮",
                "isrender": 1
            },
            {
                "iconId": "zoom",
                "part": "left",
                "defaultActive": 0,
                "memo": "电子放大",
                "isrender": 1
            },
            {
                "iconId": "hd",
                "part": "right",
                "defaultActive": 0,
                "memo": "清晰度切换按钮",
                "isrender": 1
            },
            {
                "iconId": "webExpend",
                "part": "right",
                "defaultActive": 0,
                "memo": "网页全屏按钮",
                "isrender": 1
            },
            {
                "iconId": "expend",
                "part": "right",
                "defaultActive": 0,
                "memo": "全局全屏按钮",
                "isrender": 1
            }
        ]
    }
}
N
plugin String 按需加载插件,可选值: talk:对讲,示例:plugin:["talk"] N
handleSuccess function 自动播放成功回调 N
handleError function 错误回调 N
seekFrequency function 为避免频繁拖动播放异常,可设置模板回放时间轴拖动防抖间隔,默认值为2000(2秒),可取2000(2秒),3000(3秒),4000(4秒),5000(5秒) N
language String 多语言 (zh | en), 默认zh (v8.0.8版本及以上支持) N

方法调用

同步方法(方式 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("执行开启声音成功后其他动作");
});

关闭声音

// 方式1
player.closeSound();

开始录制

因录制解码库加载限制,录制库加载需要 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();

对讲设置麦克风增益

  // 设置音频增益系数 0 ~ 10
  player.setVolumeGain(volume);

获取麦克风权限

  player.getMicrophonePermission().then(data => {
    if (data.code === 0) {
      // 成功....
    }
  })

获取麦克风列表

  // 需要在麦克风已授权的情况下调用,才能获取到麦克风列表,可以和getMicrophonePermission配合使用,或在初始化后先调用getMicrophonePermission获取授权
  player.getMicrophonesList().then(data => {
    if (data.code === 0) {
      // 成功....
    }
  })

切换麦克风

  // microphoneId 为获取到的麦克风列表中的deviceId,如果当前处于对讲中,调用setProfile会先关闭,重新发起对讲
  player.setProfile({ microphoneId })

监听麦克风音量变化

  player.eventEmitter.on('volumeChange', ({ data }) => {
    // 动态显示音柱,100ms触发一次
    console.log(`${data * 100}%`)
  })

全屏

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 是分屏是需要的

非正式版说明

非正式版需要配置 staticPath

使用示例

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

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

如果使用 react + vite,可参考 demos => with-react-vite

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

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

Readme

Keywords

Package Sidebar

Install

npm i ezuikit-js

Weekly Downloads

756

Version

8.1.1-alpha.2

License

ISC

Unpacked Size

21.1 MB

Total Files

31

Last publish

Collaborators

  • ezviz-jzy
  • ezviz-openteam