Package Exports
- ezuikit-js
- ezuikit-js/ezuikit.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ezuikit-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
[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/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 用来播放上述测试播放地址。
使用示例
基本使用： 基本使用示例
自定义主题： 自定义主题示例
本地主题配置： 本地主题配置示例
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值为： 云存储回放初始化参数 url值为： | Y | |||||||||||||||||||||
| audio | int | 是否默认开启声音 1：打开（默认） 0：关闭 | N | |||||||||||||||||||||
| width | int | 视频宽度，默认值为容器容器DOM宽度 | Y | |||||||||||||||||||||
| height | int | 视频高度，默认值为容器容器DOM高度 | Y | |||||||||||||||||||||
| template | String |
| ||||||||||||||||||||||
| themeData | Object |
themeData将主题数据本地化，设置本地数据，需要删除template参数 你可以通过themeData修改按钮位置，颜色，头部底部颜色等配置。 配置示例： | N | |||||||||||||||||||||
| plugin | String | 按需加载插件，可选值： talk：对讲，示例：plugin:["talk"] | N | |||||||||||||||||||||
| handleSuccess | function | 自动播放成功回调 | N | |||||||||||||||||||||
| poster | String | 视频默认封面 版本号> v0.4.6 | 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.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);
});切换地址播放
可用于在播放中切换设备，切换播放参数，以及直播切换回放等
player.changePlayUrl(options)
.then(()=>{
console.log("切换成功")
});options参数说明
| 参数名 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| type | String | 播放地址类型，"live":预览，"rec"：回放；“cloud.rec”：云存储回放 | Y |
| accessToken | String | 授权过程获取的access_token | Y |
| deviceSerial | String | 设备序列号,存在英文字母的设备序列号，字母需为大写 | Y |
| channelNo | int | 通道号 | Y |
| hd | boolean | 是否为高清 true-主码流（高清） false-子码流(标清) | Y |
| validCode | String | 设备验证码（加密设备播放需要输入验证码） | Y |
| begin | String | type类型为回放有效，开始时间 格式为“YYYYMMDDHHmmss” | N |
| end | String | type类型为回放有效，结束时间 格式为 “YYYYMMDDHHmmss” | N |
设置封面
你可以在初始化时，通过参数poster设置默认封面 实例初始化后可以调用设置封面方法再次更改封面
player.setPoster(pictureUrl)
.then(()=>{
console.log("更改封面成功");
});开启电子放大
// 方式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