轻应用 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
npm install ezuikit-js
# yarn
yarn add ezuikit-js
# pnpm
pnpm add 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",
});
为方便开发者快速接入
我们提供了测试 accessToken,测试播放地址,并提供了几种常用场景使用示例。你可以通过使用示例,使用测试播放地址,测试 accessToken,在你的应用快速接入。
测试播放地址: ezopen://open.ys7.com/G39444019/1.live
你可以通过以下地址获取到测试 accessToken 获取测试 accessToken 用来播放上述测试播放地址。 当前设备有可能下线或被移除了, 如果自己有设备优先使用自己的设备进行测试。
- 我们在 v0.6.2 及以上版本持用户通过开启谷歌实验室特性启动多线程解码,多线程模式将大大提升解码效率,降低解码内存消耗。
- 视频解码库默认从开放平台远程拉取,你可以将解码库放到本地或者你的服务内,可以提升加载解码库速度。
使用本地解码库提升加载速度 开发者需要自己设置静态资源文件地址, 参考
staticPath
的配置
- 快速创建视频播放页面
基本使用: 基本使用示例
- 前往开放平台轻应用模板管理页创建一个主题,可以动态配置你的播放主题,控件,示例展示了获取一个主题后使用示例。
自定义主题: 自定义主题示例
- 你可以本地创建一个主题配置,可以本地配置你的播放主题,控件,示例展示了本地配置项使用示例。
本地主题配置: 本地主题配置示例
- 我们提供了一些通用场景的主题,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 初始化参数 url 值为: 初始化参数 url 值为: |
Y | ||||||||||||||||||||
audio | boolean | 是否默认开启声音 true:打开(默认) false:关闭 | N | ||||||||||||||||||||
width | int | 视频宽度,默认值为容器容器DOM宽度 | Y | ||||||||||||||||||||
height | int | 视频高度,默认值为容器容器DOM高度 | Y | ||||||||||||||||||||
staticPath | string | 设置静态资源地址, 自定义可以自行下载 `ezuikit_static`放置在自己的服务器下, 设置 {staticPath: "/ezuikit_static"} | N | ||||||||||||||||||||
template | String |
|
N | ||||||||||||||||||||
themeData | Object |
themeData将主题数据本地化,设置本地数据,需要删除template参数 你可以通过themeData修改按钮位置,颜色,头部底部颜色等配置。 配置示例:
|
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();
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