# ezuikit-js-czm > ezuikit javascript for npm Latest version **7.5.1** (published 2023-05-07) · ISC license · 0 weekly downloads ## Install ```sh npm install ezuikit-js-czm pnpm add ezuikit-js-czm yarn add ezuikit-js-czm bun add ezuikit-js-czm ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; large bundle. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 7.5.1 | | Published | 2023-05-07 | | First published | 2023-05-07 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 37.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | yujianbo | | Maintainers | czhongm | | Keywords | video, ezuikit | ## Links - npm: https://www.npmjs.com/package/ezuikit-js-czm - Repository: https://github.com/czhongm/EZUIKit-JavaScript-npm - Homepage: https://github.com/Hikvision-Ezviz/EZUIKit-JavaScript-npm#readme - Issues: https://github.com/Hikvision-Ezviz/EZUIKit-JavaScript-npm/issues - npm.io page: https://npm.io/package/ezuikit-js-czm ## Recent versions - 7.5.1 (latest) — 2023-05-07 ## README # [EZUIKit-JavaScript-npm][ezuikit-js] >轻应用npm版本，降低接入难度，适配自定义UI，适配主流框架 > 低延时预览，云存储回放，SD卡回放 > 功能API丰富，如：播放控制，音频控制，视频截图，实时获取视频OSDTime，视频录制，设备对讲，电子放大，全屏等 ### 获取ezuikit-js ``` $ npm install ezuikit-js ``` ### 引入ezuikit-js ``` import EZUIKit from 'ezuikit-js'; ``` #### 如果你使用原生方法,可以通过标签引用 ``` ``` ### 开始使用 - 初始化 >基本使用创建DOM ```

``` ## 播放器初始化 ### 直播 ``` 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, }) ``` ### 回放 ``` 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) (https://open.ys7.com/help/384) >>[开启多线程方式2](https://open.ys7.com/help/385)(https://open.ys7.com/help/385) 2. 视频解码库默认从开放平台远程拉取，你可以将解码库放到本地或者你的服务内，可以提升加载解码库速度。 >> 使用本地解码库提升加载速度 本地解码库示例 ### 使用示例 > 1. 快速创建视频播放页面 基本使用： 基本使用示例 > 2. 前往[开放平台轻应用模板管理页](https://open.ys7.com/console/ezuikit/template.html)创建一个主题，可以动态配置你的播放主题，控件，示例展示了获取一个主题后使用示例。 自定义主题： 自定义主题示例 > 3. 你可以本地创建一个主题配置，可以本地配置你的播放主题，控件，示例展示了本地配置项使用示例。 本地主题配置： 本地主题配置示例 > 4. 我们提供了一些通用场景的主题，PC端预览，PC端回放，移动端预览，移动端回放，你也可以直接使用。 PC端预览-固定主题： PC端预览-固定主题示例 PC端回放-固定主题： PC端回放-固定主题示例 移动端预览-固定主题： 移动端预览-固定主题示例 移动端回放-固定主题： 移动端回放-固定主题示例 >同一个页面播放多个视频，可以参考： 单页面多实例(视频多窗口)： 单页面多实例(视频多窗口)示例 #### 附录：初始化参数说明

参数名类型描述是否必选

id String 播放器容器DOM的id Y

accessToken String 授权过程获取的access_token Y

url String #### 直播 ##### 标清 ezopen:// /${设备序列号}/{通道号}.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

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本地配置）;

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
            }
        ]
    }
}

plugin String 按需加载插件，可选值： talk：对讲，示例：plugin:["talk"] N

handleSuccess function 自动播放成功回调 N

seekFrequency function 为避免频繁拖动播放异常，可设置模板回放时间轴拖动防抖间隔，默认值为2000（2秒），可取2000（2秒），3000（3秒），4000（4秒），5000（5秒） 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("执行开启声音成功后其他动作"); }); ``` #### 开始录制 > 因录制解码库加载限制，录制库加载需要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); ``` ### 使用示例 > 如果使用原生js，可参考demos => base-demo > 如果使用react，可参考demos => react-demo > 如果使用vue，可参考demos => vue-demo --- _Source: https://npm.io/package/ezuikit-js-czm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._