merge master

Author: freeshineit

CHANGELOG.md

@@ -1,4 +1,13 @@
-## v8.0.13-alpha.1 (20204-10-17)
+
+## v8.1.0 (2024-11-04)
+#### Feat
+- 完善取流埋点上报内容，错误上报
+
+#### Fixed
+- 修复偶现初始化成功后无法播放的问题
+
+
+## v8.0.13-alpha.1 (2024-10-17)
 
 #### Fixed
 

README.md

@@ -61,7 +61,7 @@ var player = new EZUIKit.EZUIKitPlayer({
   id: "video-container", // 视频容器ID
   accessToken:
     "at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz",
-  url: "ezopen://open.ys7.com/G39444019/1.live",
+  url: "ezopen://open.ys7.com/BD3957004/1.live",
   width: 600,
   height: 400,
   handleError: (err) => {
@@ -81,21 +81,69 @@ var player = new EZUIKit.EZUIKitPlayer({
   height: 400,
   accessToken:
     "at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz",
-  url: "ezopen://open.ys7.com/G39444019/1.rec",
+  url: "ezopen://open.ys7.com/BD3957004/1.rec",
 });
 ```
 
+#### 非正式版说明
+
+alpha（功能测试）、beta（集成测试）为我们的非正式版本，可能存在功能或使用上的问题，若您遇到了任何问题，欢迎向我们反馈。
+
+非正式版本没有CDN资源，使用时需要配置 `staticPath`，引用本地的解码库资源。
+
+### 使用示例
+
+> 如果使用原生 js，可参考 demos => [base-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/base-demo)
+
+> 如果使用 react，可参考 demos => [react-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/react-demo)
+
+> 如果使用 react + vite，可参考 demos => [with-react-vite](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-react-vite)
+
+> 如果使用 vue2，可参考 demos => [vue-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue-demo)
+
+> 如果使用 vue3，可参考 demos => [vue3-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue3-demo)
+
 #### tips
 
 为方便开发者快速接入
 
 我们提供了测试 accessToken,测试播放地址，并提供了几种常用场景使用示例。你可以通过使用示例，使用测试播放地址，测试 accessToken，在你的应用快速接入。
 
-<b>测试播放地址：</b> ezopen://open.ys7.com/G39444019/1.live
+<b>测试播放地址：</b> ezopen://open.ys7.com/BD3957004/1.live
 
 你可以通过以下地址获取到测试 accessToken <a href="https://open.ys7.com/jssdk/ezopen/demo/token" target="_blank">获取测试 accessToken</a> 用来播放上述测试播放地址。
 当前设备有可能下线或被移除了， 如果自己有设备优先使用自己的设备进行测试。
 
+### 轻应用 - 海外版本
+
+> 轻应用支持向接入萤石云海外环境的设备发起取流播放，需要在初始化时配置海外服务域名，示例：
+
+```js
+EZOPENDemo = new EZUIKit.EZUIKitPlayer({
+  id: 'playWind',
+  width: 600,
+  height: 400,
+  template:"pcLive",
+  url: '',
+  accessToken: '',
+  env:{
+    domain: "https://iusopen.ezvizlife.com" // 北美地区
+  }
+});
+```
+
+各地区的域名分别为：
+
+| 区域  | 域名                               |
+| --- | -------------------------------- |
+| 北美  | https://iusopen.ezvizlife.com    |
+| 南美  | https://isaopen.ezvizlife.com    |
+| 欧洲  | https://ieuopen.ezvizlife.com    |
+| 新加坡 | https://isgpopen.ezvizlife.com   |
+| 印度  | https://iindiaopen.ezvizlife.com |
+
+
+
 #### 最佳实践 tips
 
 1. 我们在 v0.6.2 及以上版本持用户通过开启谷歌实验室特性启动多线程解码，多线程模式将大大提升解码效率，降低解码内存消耗。
@@ -172,8 +220,8 @@ ezopen://open.ys7.com/${设备序列号}/{通道号}.rec?begin=yyyyMMddhhmmss
 ezopen://open.ys7.com/${设备序列号}/{通道号}.cloud.rec?begin=yyyyMMddhhmmss
 视频 ezopen 协议播放地址 详见：<a href="https://open.ys7.com/help/23" target="_blank">ezopen 协议</a> </td><td>Y</td></tr>
 
-<tr><td>audio</td><td>boolean</td><td>是否默认开启声音 true：打开（默认） false：关闭	</td><td>N</td></tr>
-<tr><td>width</td><td>int</td><td>视频宽度，默认值为容器容器DOM宽度	</td><td>Y</td></tr>
+<tr><td>audio</td><td>boolean</td><td>是否默认开启声音 true：打开（默认） false：关闭    </td><td>N</td></tr>
+<tr><td>width</td><td>int</td><td>视频宽度，默认值为容器容器DOM宽度    </td><td>Y</td></tr>
 <tr><td>height</td><td>int</td><td>视频高度，默认值为容器容器DOM高度</td><td>Y</td></tr>
 <tr><td>staticPath</td><td>string</td><td>设置静态资源地址, 自定义可以自行下载 `ezuikit_static`放置在自己的服务器下， 设置 {staticPath: "/ezuikit_static"} </td><td>N</td></tr>
 <tr><td>template</td><td>String</td><td>
@@ -187,9 +235,9 @@ ezopen://open.ys7.com/${设备序列号}/{通道号}.cloud.rec?begin=yyyyMMddhhm
 
 <tr><td>security</td><td>安防版(预览回放);  *固定模板 包含视频窗口，叠加了录制，全屏控件，<br />标清/高清切换，预览录制切换控件*</td></tr>
 <tr><td>voice</td><td>语音版;  *固定模板 包含视频窗口，叠加了录制，全屏控件，语音播报，语音<br />对讲控件*</td></tr>
-<tr><td>pcLive</td><td>	*固定模板 按钮列表，颜色，底部头部背景色固定，可用于pc端预览，如需<br />修改按钮配置，头部底部背景色，可参考 {{自定义themeId}}，或者使用<br />themeData本地配置*</td></tr>
-<tr><td>pcRec</td><td>	*固定模板 按钮列表，颜色，底部头部背景色固定， 可用于pc端回放，如需<br />修改按钮配置，头部底部背景色，可参考 {{自定义themeId}}，或者使用themeData<br />本地配置*</td></tr>
-<tr><td>mobileLive</td><td>	*固定模板  按钮列表，颜色，底部头部背景色固定，可用于移动端预<br />览，如需修改按钮配置，头部底部背景色，可参考 {{自定义themeId}}，或者使用themeData<br />本地配置*</td></tr>
+<tr><td>pcLive</td><td>    *固定模板 按钮列表，颜色，底部头部背景色固定，可用于pc端预览，如需<br />修改按钮配置，头部底部背景色，可参考 {{自定义themeId}}，或者使用<br />themeData本地配置*</td></tr>
+<tr><td>pcRec</td><td>    *固定模板 按钮列表，颜色，底部头部背景色固定， 可用于pc端回放，如需<br />修改按钮配置，头部底部背景色，可参考 {{自定义themeId}}，或者使用themeData<br />本地配置*</td></tr>
+<tr><td>mobileLive</td><td>    *固定模板  按钮列表，颜色，底部头部背景色固定，可用于移动端预<br />览，如需修改按钮配置，头部底部背景色，可参考 {{自定义themeId}}，或者使用themeData<br />本地配置*</td></tr>
 <tr><td>mobileRec</td><td>*固定模板 按钮列表，颜色，底部头部背景色固定， 可用于移动端回放，<br />如需修改按钮配置，头部底部背景色，可参考 {{自定义themeId}}，或者使用themeData<br />本地配置*</td></tr>
 <tr><td>自定义themeId</td><td>自定义主题，<a href="https://open.ys7.com/console/ezuikit/template.html" target="_blank">前往开放平台控制台配置页面获取</a><br />（v0.6.2版本及以上支持，建议使用 自定义themeId，或者使用themeData本地<br />配置）;</td></tr>
 </table>
@@ -499,17 +547,17 @@ player.changePlayUrl(options).then(() => {
 
 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”           |
+| 参数名          | 类型      | 是否必选 | 默认值    | 描述                                          |
+|:------------ |:------- |:---- |:------ |:------------------------------------------- |
+| 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”      |
 
 #### 切换模板主题
 
@@ -524,15 +572,13 @@ options 参数说明
     console.log("地址切换成功，开始切换模板主题");
     player.Theme.changeTheme("pcRec");
   });
-
-
 ```
 
 template 参数说明
 
-| 参数名 | 类型   | 描述                              | 是否必选 |
-| :----- | :----- | :-------------------------------- | :------- |
-| type   | String | 模板名称，详见初始化参数 template | Y        |
+| 参数名  | 类型     | 描述                    | 是否必选 |
+|:---- |:------ |:--------------------- |:---- |
+| type | String | 模板名称，详见初始化参数 template | Y    |
 
 #### 开启电子放大
 
@@ -578,19 +624,3 @@ player.reSize(width, height);
 // 顶装4分屏
 player.setFECCorrectType({place: 3 , type：4}, "cavnas1,canvas2,canvas3") // cavnas1,canvas2,canvas3 是分屏是需要的
 ```
-
-### 非正式版说明
-
-非正式版需要配置 `staticPath`
-
-### 使用示例
-
-> 如果使用原生 js，可参考 demos => [base-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/base-demo)
-
-> 如果使用 react，可参考 demos => [react-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/react-demo)
-
-> 如果使用 react + vite，可参考 demos => [with-react-vite](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-react-vite)
-
-> 如果使用 vue2，可参考 demos => [vue-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue-demo)
-
-> 如果使用 vue3，可参考 demos => [vue3-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue3-demo)

demos/base-demo/ezuikit.js

@@ -0,0 +1,138 @@
+import React from "react";
+import EZUIKit from "ezuikit-js";
+
+import "./App.css";
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.player = null; //定义播放器
+  }
+  componentDidMount() {
+    // fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
+    // .then(response => response.json())
+    // .then(res => {
+    // var accessToken = res.data.accessToken;
+
+    if (window.player) {
+      return;
+    }
+
+    this.player = new EZUIKit.EZUIKitPlayer({
+      id: "video-container", // 视频容器ID
+      accessToken:
+        "at.0siysnsad14jkcgmbnp2pbop427gcbx6-8l00xx7oa9-193qkwi-ryfn1m0j",
+      url: "ezopen://open.ys7.com/BD3957004/1.hd.live",
+      // simple:极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放; security: 安防版; voice: 语音版;
+      template: "pcLive",
+      plugin: ["talk"], // 加载插件，talk-对讲
+      width: 600,
+      height: 400,
+      handleFirstFrameDisplay: (res) => {
+        if (window.player.jSPlugin) {
+          console.log(
+            "-------------------res",
+            window.player.jSPlugin.player.getFrameInfo()
+          );
+        }
+      },
+      handleError: (error) => {
+        console.log("handleError", error);
+      },
+      // language: "en", // zh | en
+      // staticPath: "/ezuikit_static", // 如果想使用本地静态资源，请复制根目录下ezuikit_static 到当前目录下， 然后设置该值
+    });
+    // });
+    window.player = this.player;
+
+    // console.log(window.player.jSPlugin);
+
+    // if (window.player.jSPlugin) {
+    //   window.player.jSPlugin.player.event.on("videoInfo", (res) => {
+    //     console.log(res);
+    //   });
+    // }
+  }
+  play = () => {
+    var playPromise = this.player.play();
+    playPromise.then((data) => {
+      console.log("promise 获取 数据", data);
+    });
+  };
+  stop = () => {
+    var stopPromise = this.player.stop();
+    stopPromise.then((data) => {
+      console.log("promise 获取 数据", data);
+    });
+  };
+  getOSDTime = () => {
+    var getOSDTimePromise = this.player.getOSDTime();
+    getOSDTimePromise.then((data) => {
+      console.log("promise 获取 数据", data);
+    });
+  };
+  capturePicture = () => {
+    var capturePicturePromise = this.player.capturePicture(
+      `${new Date().getTime()}`
+    );
+    capturePicturePromise.then((data) => {
+      console.log("promise 获取 数据", data);
+    });
+  };
+  openSound = () => {
+    var openSoundPromise = this.player.openSound();
+    openSoundPromise.then((data) => {
+      console.log("promise 获取 数据", data);
+    });
+  };
+  closeSound = () => {
+    var openSoundPromise = this.player.closeSound();
+    openSoundPromise.then((data) => {
+      console.log("promise 获取 数据", data);
+    });
+  };
+  startSave = () => {
+    var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
+    startSavePromise.then((data) => {
+      console.log("promise 获取 数据", data);
+    });
+  };
+  stopSave = () => {
+    var stopSavePromise = this.player.stopSave();
+    stopSavePromise.then((data) => {
+      console.log("promise 获取 数据", data);
+    });
+  };
+  ezopenStartTalk = () => {
+    this.player.startTalk();
+  };
+  ezopenStopTalk = () => {
+    this.player.stopTalk();
+  };
+  fullScreen = () => {
+    this.player.fullScreen();
+  };
+  render() {
+    return (
+      <div className="demo">
+        <h2>视频模式使用示例：</h2>
+        <div id="video-container" style={{ width: 600, height: 600 }}></div>
+        <div>
+          <button onClick={() => this.stop()}>stop</button>
+          <button onClick={() => this.play()}>play</button>
+          <button onClick={() => this.openSound()}>openSound</button>
+          <button onClick={() => this.closeSound()}>closeSound</button>
+          <button onClick={() => this.startSave()}>startSave</button>
+          <button onClick={() => this.stopSave()}>stopSave</button>
+          <button onClick={() => this.capturePicture()}>capturePicture</button>
+          <button onClick={() => this.fullScreen()}>fullScreen</button>
+          <button onClick={() => this.getOSDTime()}>getOSDTime</button>
+          <button onClick={() => this.ezopenStartTalk()}>开始对讲</button>
+          <button onClick={() => this.ezopenStopTalk()}>结束对讲</button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;

demos/react-demo/src/App.js

@@ -66,6 +66,7 @@ export default {
         }
       });
       window.player = player;
+
     },
     play() {
       var playPromise = player.play();

demos/vue-demo/src/components/Player.vue

@@ -110,7 +110,7 @@ const init = () => {
     id: "video-container", // 视频容器ID
     accessToken:
       "at.a9vba5iia6ixphqu8db7y16174p6neje-6f0n0ahcu8-1uvhxp7-rxswkykaa",
-    url: "ezopen://open.ys7.com/BC7900686/1.hd.live",
+    url: "ezopen://open.ys7.com/BD3957004/1.hd.live",
     // simple: 极简版; pcLive: pc直播; pcRec: pc回放; mobileLive: 移动端直播; mobileRec: 移动端回放;security: 安防版; voice: 语音版;
     template: "pcLive",
     plugin: ["talk"], // 加载插件，talk-对讲

demos/vue3-demo/src/components/Player.vue

@@ -1,6 +1,6 @@
 {
   "name": "ezuikit-js",
-  "version": "8.1.1-alpha.2",
+  "version": "8.1.1",
   "description": "ezuikit javascript for npm",
   "main": "ezuikit.js",
   "repository": {
@@ -26,4 +26,4 @@
     "url": "https://github.com/Hikvision-Ezviz/EZUIKit-JavaScript-npm/issues"
   },
   "homepage": "https://github.com/Hikvision-Ezviz/EZUIKit-JavaScript-npm#readme"
-}
+}