Merge pull request #283 from Ezviz-OpenBiz/develop

v8.1.2

Author: freeshineit

.github/workflows/build-demos.yml

@@ -27,23 +27,23 @@ jobs:
       - name: Build react-demo
         working-directory: ./demos/react-demo
         run: |
-          pnpm install
+          pnpm install --no-frozen-lockfile
           pnpm run build
 
       - name: Build vue-demo
         working-directory: ./demos/vue-demo
         run: |
-          pnpm install
+          pnpm install --no-frozen-lockfile
           pnpm run build
 
       - name: Build vue3-demo
         working-directory: ./demos/vue3-demo
         run: |
-          pnpm install
+          pnpm install --no-frozen-lockfile
           pnpm run build
 
       - name: Build with-react-vite
         working-directory: ./demos/with-react-vite
         run: |
-          pnpm install
+          pnpm install --no-frozen-lockfile
           pnpm run build

CHANGELOG.md

@@ -3,17 +3,35 @@
 #### Feat
 
 - 新增静态多语言变量 `LOCALES`, 可以使用 `EZUIKitPlayer.LOCALES` 访问
-- 更新 header 的 默认样式和交互， 和 footer 保持一致
+- 更新 header 的默认样式和交互和 footer 保持一致
 - 弃用 hls，请使用 [ezuikti-flv](https://www.npmjs.com/package/ezuikit-flv) 代替
 - 弃用 flv，请使用 [@ezuikit/player-hls] https://www.npmjs.com/package/@ezuikit/player-hls 代替
 - 弃用 EZWebRtc, 请使用 [ertc-web](https://www.npmjs.com/package/ertc-web)
-- H5模板支持云录制2.0
+- H5 模板支持云录制 2.0
+- 支持 commonjs 和 esm [issues #268](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/issues/268), [issues #223](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/issues/223)
+  ```ts
+  import { EZUIKitPlayer } from "ezuikit-js";
+  const player = new EZUIKitPlayer({
+    id: "video-container", // 视频容器ID
+    accessToken:
+      "at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz",
+    url: "ezopen://open.ys7.com/BD3957004/1.live",
+    width: 600,
+    height: 400,
+    handleError: (err) => {
+      if (err.type === "handleRunTimeInfoError" && err.data.nErrorCode === 5) {
+        // 加密设备密码错误
+      }
+    },
+  });
+  ```
 
 #### Fixed
 
 - 修复移动端回放主题退出全屏后，日历的位置不对的问题
 - 修复多实例播放时，小概率出现绿屏、花屏的问题
-- 修复实例销毁后，dom节点和样式文件残留的问题
+- 修复实例销毁后，dom 节点和样式文件残留的问题
+-
 
 ## v8.1.1 (2024-11-18)
 
@@ -28,7 +46,7 @@
 - 优化全屏的逻辑， 修复已知的 bug, [issues #240](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/issues/240)
 - 优化 resize 的逻辑， 修复已知的 bug [issues #120](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/issues/120)
 - 修复初始化窗口抖动的 bug
-- 修复一些已知 bug [issues #269](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/issues/269)
+- 修复一些已知 bug [issues #269](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/issues/269), [issues #223](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/issues/223)
 
 ## v8.1.0 (2024-11-04)
 

README.md

@@ -11,6 +11,8 @@
 
 > 功能 API 丰富，如：播放控制，音频控制，视频截图，实时获取视频 OSDTime，视频录制，设备对讲，电子放大，全屏等
 
+> 从 v8.1.2 开始支持 ESM, 支持按需加载
+
 <p style="color: yellow;">hls和flv 不在维护更新，后续版本中会被移除， flv 可以使用 <a href="https://www.npmjs.com/package/ezuikit-flv" block="_target">ezuikit-flv</a>, hls 可以使用 <a href="https://www.npmjs.com/package/@ezuikit/player-hls" block="_target">@ezuikit/player-hls</a></p>
 <p style="color: yellow;">hls和flv 不在维护更新，后续版本中会被移除， flv 可以使用 <a href="https://www.npmjs.com/package/ezuikit-flv" block="_target">ezuikit-flv</a>, hls 可以使用 <a href="https://www.npmjs.com/package/@ezuikit/player-hls" block="_target">@ezuikit/player-hls</a></p>
 <p style="color: yellow;">hls和flv 不在维护更新，后续版本中会被移除， flv 可以使用 <a href="https://www.npmjs.com/package/ezuikit-flv" block="_target">ezuikit-flv</a>, hls 可以使用 <a href="https://www.npmjs.com/package/@ezuikit/player-hls" block="_target">@ezuikit/player-hls</a></p>
@@ -33,6 +35,10 @@ pnpm add ezuikit-js
 ### 引入 ezuikit-js
 
 ```js
+// >= v8.1.2  ESM
+import { EZUIKitPlayer } from "ezuikit-js";
+
+// < v8.1.2
 import EZUIKit from "ezuikit-js";
 ```
 
@@ -58,7 +64,9 @@ import EZUIKit from "ezuikit-js";
 ### 直播
 
 ```js
-const player = new EZUIKit.EZUIKitPlayer({
+import { EZUIKitPlayer } from "ezuikit-js";
+
+const player = new EZUIKitPlayer({
   id: "video-container", // 视频容器ID
   accessToken:
     "at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz",
@@ -76,7 +84,9 @@ const player = new EZUIKit.EZUIKitPlayer({
 ### 回放
 
 ```js
-const player = new EZUIKit.EZUIKitPlayer({
+import { EZUIKitPlayer } from "ezuikit-js";
+
+const player = new EZUIKitPlayer({
   id: "video-container", // 视频容器ID
   width: 600,
   height: 400,
@@ -120,7 +130,9 @@ alpha（功能测试）、beta（集成测试）为我们的非正式版本，
 > 轻应用支持向接入萤石云海外环境的设备发起取流播放，需要在初始化时配置海外服务域名，示例：
 
 ```js
-const player = new EZUIKit.EZUIKitPlayer({
+import { EZUIKitPlayer } from "ezuikit-js";
+
+const player = new EZUIKitPlayer({
   id: "playWind",
   width: 600,
   height: 400,

demos/base-demo/cloudRecord/index.html

@@ -11,7 +11,9 @@
 <body>
   <div className="demo">
     <h2>视频模式使用示例：</h2>
+    <div>
     <div id="video-container" style="width: 600px"></div>
+    <div>
     <div>
       <button onClick="play()">play</button>
       <button onClick="stop()">stop</button>