flv 不在维护更新，后续版本中会被移除， flv 可以使用 ezuikit-flv, hls 可以使用 @ezuikit/player-hls
\nflv 不在维护更新，后续版本中会被移除， flv 可以使用 ezuikit-flv, hls 可以使用 @ezuikit/player-hls
\nflv 不在维护更新，后续版本中会被移除， flv 可以使用 ezuikit-flv, hls 可以使用 @ezuikit/player-hls
\n\n### 获取 ezuikit-js\n\n```bash\n# npm\nnpm install ezuikit-js\n\n# yarn\n\nyarn add ezuikit-js\n\n# pnpm\n\npnpm add ezuikit-js\n```\n\n### 引入 ezuikit-js\n\n```js\n// >= v8.1.2 ESM\nimport { EZUIKitPlayer } from \"ezuikit-js\";\n\n// < v8.1.2\nimport EZUIKit from \"ezuikit-js\";\n```\n\n#### 不支持 ESM (not support ESM)\n\n```js\n// UMD\nimport EZUIKit from \"ezuikit-js/ezuikit.js\";\n\n// >= v8.1.2 CommonJS\nimport { EZUIKitPlayer } from \"ezuikit-js/index.js\";\n\n// < v8.1.2 CommonJS\nimport EZUIKit from \"ezuikit-js/index.js\";\n```\n\n#### 如果你使用原生方法,可以通过标签引用\n\n```html\n\n\n```\n\n### 开始使用 - 初始化\n\n> 基本使用\n\n创建 DOM\n\n```html\n\n```\n\n## 播放器初始化\n\n### 直播\n\n```js\nimport { EZUIKitPlayer } from \"ezuikit-js\";\nconst player = new EZUIKitPlayer({\n id: \"video-container\", // 视频容器ID\n accessToken:\n \"at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz\",\n url: \"ezopen://open.ys7.com/BC7900686/1.live\",\n width: 600,\n height: 400,\n scaleMode: 1, // 默认 0 完全填充窗口，会有拉伸 1: 等比适配 2: 等比完全填充窗口, 超出隐藏 @sine 8.2.0\n handleError: (err) => {\n if (err.type === \"handleRunTimeInfoError\" && err.data.nErrorCode === 5) {\n // 加密设备密码错误\n }\n },\n});\n```\n\n### 回放\n\n```js\nimport { EZUIKitPlayer } from \"ezuikit-js\";\nconst player = new EZUIKitPlayer({\n id: \"video-container\", // 视频容器ID\n width: 600,\n height: 400,\n scaleMode: 1, // 默认 0 完全填充窗口，会有拉伸 1: 等比适配 2: 等比完全填充窗口, 超出隐藏 @sine 8.2.0\n accessToken:\n \"at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz\",\n url: \"ezopen://open.ys7.com/BC7900686/1.rec\",\n});\n```\n\n#### 非正式版说明\n\nalpha（功能测试）、beta（集成测试）为我们的非正式版本，可能存在功能或使用上的问题，若您遇到了任何问题，欢迎向我们反馈。\n\n非正式版本没有 CDN 资源，使用时需要配置 `staticPath`，引用本地的解码库资源。\n\n### 使用示例\n\n> 如果使用原生 js，可参考 demos => [base-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/base-demo)\n\n> 如果使用 react，可参考 demos => [react-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/react-demo)\n\n> 如果使用 react + vite，可参考 demos => [with-react-vite](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-react-vite)\n\n> 如果使用 next.js，可参考 demos => [with-next](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-next)\n\n> 如果使用 electron，可参考 demos => [with-electron](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-electron)\n\n> 如果使用 vue3，可参考 demos => [vue3-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue3-demo)\n\n> 如果使用 vue2.7，可参考 demos => [vue-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue-demo)\n\n> 如果使用 vue2.6，可参考 demos => [with-vue2.6](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-vue2.6)\n> \n> 如果使用 uniapp + vue3 ，可参考 demos => [with-uniapp-vue3](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-uniapp-vue3)\n\n> 如果使用 uniapp + vue2 ，可参考 demos => [with-uniapp-vue2](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-uniapp-vue2)\n\n> 如果使用 docker + nginx ，可参考 demos => [with-docker-nginx](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-docker-nginx)\n\n#### tips\n\n为方便开发者快速接入\n\n我们提供了测试 accessToken,测试播放地址，并提供了几种常用场景使用示例。你可以通过使用示例，使用测试播放地址，测试 accessToken，在你的应用快速接入。\n\n测试播放地址： ezopen://open.ys7.com/BC7900686/1.live\n\n你可以通过以下地址获取到测试 accessToken 获取测试 accessToken 用来播放上述测试播放地址。当前设备有可能下线或被移除了， 如果自己有设备优先使用自己的设备进行测试。\n\n### 轻应用 - 海外版本\n\n> 轻应用支持向接入萤石云海外环境的设备发起取流播放，需要在初始化时配置海外服务域名，示例：\n\n```js\nimport { EZUIKitPlayer } from \"ezuikit-js\";\nconst player = new EZUIKitPlayer({\n id: \"playWind\",\n width: 600,\n height: 400,\n template: \"pcLive\",\n url: \"...\",\n accessToken: \"...\",\n env: {\n domain: \"https://iusopen.ezvizlife.com\", // 北美地区\n },\n});\n```\n\n各地区的域名分别为：\n\n| 区域 | 域名 |\n| --- | -------------------------------- |\n| 北美 | https://iusopen.ezvizlife.com |\n| 南美 | https://isaopen.ezvizlife.com |\n| 欧洲 | https://ieuopen.ezvizlife.com |\n| 新加坡 | https://isgpopen.ezvizlife.com |\n| 印度 | https://iindiaopen.ezvizlife.com |\n\n#### 最佳实践 tips\n\n1. 我们在 v0.6.2 及以上版本持用户通过开启谷歌实验室特性启动多线程解码，多线程模式将大大提升解码效率，降低解码内存消耗。\n\n> [开启多线程方式 1](https://open.ys7.com/help/384)(https://open.ys7.com/help/384)\n\n> [开启多线程方式 2](https://open.ys7.com/help/385)(https://open.ys7.com/help/385)\n\n2. 视频解码库默认从开放平台远程拉取，你可以将解码库放到本地或者你的服务内，可以提升加载解码库速度。\n\n> 使用本地解码库提升加载速度 开发者需要自己设置静态资源文件地址， 参考 `staticPath`的配置\n\n### 使用示例\n\n#### 快速创建视频播放页面\n\n 基本使用： 基本使用示例\n\n#### 前往[开放平台轻应用模板管理页](https://open.ys7.com/console/ezuikit/template.html)创建一个主题，可以动态配置你的播放主题，控件，示例展示了获取一个主题后使用示例。\n\n 自定义主题： 自定义主题示例\n\n#### 你可以本地创建一个主题配置，可以本地配置你的播放主题，控件，示例展示了本地配置项使用示例。\n\n 本地主题配置： 本地主题配置示例\n\n#### 我们提供了一些通用场景的主题，PC 端预览，PC 端回放，移动端预览，移动端回放，你也可以直接使用。\n\n PC 端预览-固定主题： PC 端预览-固定主题示例\n\n PC 端回放-固定主题： PC 端回放-固定主题示例\n\n 移动端预览-固定主题： 移动端预览-固定主题示例\n\n 移动端回放-固定主题： 移动端回放-固定主题示例\n\n#### 同一个页面播放多个视频，可以参考：\n\n 单页面多实例(视频多窗口)： 单页面多实例(视频多窗口)示例\n\n#### 附录： 初始化参数说明\n\n| 参数名 | 类型 | 描述 | 是否必选 | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| id | String | 播放器容器DOM的id | Y | ||||||||||||||||||
| accessToken | String | 授权过程获取的access_token | Y | ||||||||||||||||||
| url | String | \n\n#### 直播\n\n##### 标清\n\nezopen://open.ys7.com/${设备序列号}/{通道号}.live \n\n##### 高清\n\nezopen://open.ys7.com/${设备序列号}/{通道号}.hd.live \n\n#### 回放\n\n##### sd 卡回放\n\n初始化参数 url 值为： ezopen://open.ys7.com/${设备序列号}/{通道号}.rec?begin=yyyyMMddhhmmss\n\n##### 云存储回放\n\n初始化参数 url 值为： ezopen://open.ys7.com/${设备序列号}/{通道号}.cloud.rec?begin=yyyyMMddhhmmss 视频 ezopen 协议播放地址 详见：ezopen 协议 | Y | ||||||||||||||||||
| audio | boolean | 是否默认开启声音 true：打开（默认） false：关闭 | N | ||||||||||||||||||
| width | number/string | 视频窗口宽度，默认值为容器容器DOM宽度, @sine 8.2.x 开始支持字符串，可以是 style 样式支持的值 | N | ||||||||||||||||||
| height | number/string | 视频窗口高度，默认值为容器容器DOM高度，@sine 8.2.x 开始支持字符串，可以是 style 样式支持的值 | N | ||||||||||||||||||
| staticPath | string | 设置静态资源地址, 自定义可以自行下载 `ezuikit_static`放置在自己的服务器下， 设置 {staticPath: \"/ezuikit_static\"} | N | ||||||||||||||||||
| template | String | \n\n
| N | ||||||||||||||||||
| themeData | ThemeData | \nthemeData将主题数据本地化，设置本地数据，需要删除template参数 \n你可以通过themeData修改按钮位置，颜色，头部底部颜色等配置。\n\n配置示例：本地主题配置示例\n\n | N | ||||||||||||||||||
| handleSuccess | function | 自动播放成功回调 | N | ||||||||||||||||||
| handleError | function | 错误回调 | N | ||||||||||||||||||
| language | String | 多语言 （zh | en）, 默认zh (v8.0.8版本及以上支持) | N | ||||||||||||||||||
| debugDownloadData | boolean | 下载原始码流， 调试码流使用, 默认 false (v8.1.1版本及以上支持) | N | ||||||||||||||||||
| disableRenderPrivateData | boolean | 禁止渲染私有数据(如智能分析， 移动侦测， 火点信息等), 默认 false (v8.1.1 - v.8.1.3 版本及以上支持)v.8.1.4 开始 默认 true | N | ||||||||||||||||||
| quality | 0 | 1 | 2 | 3 | 4 | 5 | 6 | pp | qp | 预览初始化支持指定清晰度进行播放, 默认 undefined (v8.1.5版本及以上支持)， 0: 流畅； 1: 标清; 2: 高清; 3: 超清; 4: 极清; 5: 3K; 6: 4K ; \"pp\"： \"性能优先 (Performance Priority)\"; \"qp\": \"画质优先(Quality Priority)\"。 如果没有命中，默认取数组的第一个值 | N | ||||||||||||||||||
| loggerOptions | {name: string, level: \"INFO\" | \"LOG\" | \"WARN\" | \"ERROR\" , showTime: boolean} | 本地日志设置， 默认值 {name: \"ezuikit\", level: \"INFO\", showTime: true}, 支持动态设置请参考 setLoggerOptions(options) (v8.1.9版本及以上支持) | N | ||||||||||||||||||
| streamInfoCBType | 0 | 1 | 流信息回调类型，监听 streamInfoCB 事件, 0 : 每次都回调（会影响性能）, 1 : 只回调一次, 默认值 1 (v8.1.9版本及以上支持) | N | ||||||||||||||||||
| isCloudRecord | boolean | 适用 8.1.x 云录制，8.2.x 已移除并默认支持云录制 | N | ||||||||||||||||||
| videoLevelList | Array<{ /** 清晰度 */level: number, /** 名称 */ name: string, /**1: 主码流,2: 子码流*/streamTypeIn: 1 | 2 }> | null | 自定义清晰度列表，默认null, 如果有值 sdk 内部不在进行获取, 为 null 使用接口获取的清晰度列表, videoLevelList.length === 0 不展示清晰度控件 sdk 内部不在进行获取, videoLevelList.length > 0 展示控件 sdk 内部不在进行获取 (v8.1.10版本及以上支持);\n8.1.17 开始 当 level 的值小于 0时， 不在向设备发送指令，仅根据 streamTypeIn 切换码流 （请保证 streamTypeIn 对应的码流存在）\n | N | ||||||||||||||||||
| scaleMode | 0 | 1 | 2 | 默认 0 完全填充窗口，会有拉伸 1: 等比适配 2: 等比完全填充窗口, 超出隐藏 @sine 8.2.0 | N | ||||||||||||||||||
| spaceId | number | 云录制空间 ID (仅云录制生效) @sine 8.2.0 | N | ||||||||||||||||||
| timeLineOptions | Object | { \n showCoverFold: true, // 是否展示移动端卡片 默认 true @sine 8.2.1 | N | ||||||||||||||||||
| speedOptions | Object | \n {\n // 自定义倍速列表 @sine 8.2.4 | N | ||||||||||||||||||
| dblClickFullscreen | boolean | 是否支持双击全屏，默认 true, @sine 8.2.0 | N |