Merge pull request #279 from Ezviz-OpenBiz/develop

update

Author: freeshineit

README.md

@@ -17,7 +17,8 @@
 
 ### 获取 ezuikit-js
 
-```
+```bash
+# npm
 npm install ezuikit-js
 
 # yarn
@@ -31,13 +32,13 @@ pnpm add ezuikit-js
 
 ### 引入 ezuikit-js
 
-```
+```js
 import EZUIKit from 'ezuikit-js';
 ```
 
 #### 如果你使用原生方法,可以通过标签引用
 
-```
+```html
   <!-- umd -->
   <script src="./ezuikit.js"></script>
 ```
@@ -48,7 +49,7 @@ import EZUIKit from 'ezuikit-js';
 
 创建 DOM
 
-```
+```html
   <div id="video-container"></div>
 ```
 
@@ -57,7 +58,7 @@ import EZUIKit from 'ezuikit-js';
 ### 直播
 
 ```js
-var player = new EZUIKit.EZUIKitPlayer({
+const player = new EZUIKit.EZUIKitPlayer({
   id: "video-container", // 视频容器ID
   accessToken:
     "at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz",
@@ -75,7 +76,7 @@ var player = new EZUIKit.EZUIKitPlayer({
 ### 回放
 
 ```js
-var player = new EZUIKit.EZUIKitPlayer({
+const player = new EZUIKit.EZUIKitPlayer({
   id: "video-container", // 视频容器ID
   width: 600,
   height: 400,
@@ -119,7 +120,7 @@ alpha（功能测试）、beta（集成测试）为我们的非正式版本，
 > 轻应用支持向接入萤石云海外环境的设备发起取流播放，需要在初始化时配置海外服务域名，示例：
 
 ```js
-EZOPENDemo = new EZUIKit.EZUIKitPlayer({
+const player = new EZUIKit.EZUIKitPlayer({
   id: "playWind",
   width: 600,
   height: 400,
@@ -473,46 +474,46 @@ player.stopTalk();
 
 #### 对讲设置麦克风增益
 
-```
-  // 设置音频增益系数 0 ~ 10
-  player.setVolumeGain(volume);
+```js
+// 设置音频增益系数 0 ~ 10
+player.setVolumeGain(volume);
 ```
 
 #### 获取麦克风权限
 
-```
-  player.getMicrophonePermission().then(data => {
-    if (data.code === 0) {
-      // 成功....
-    }
-  })
+```js
+player.getMicrophonePermission().then(data => {
+  if (data.code === 0) {
+    // 成功....
+  }
+})
 ```
 
 #### 获取麦克风列表
 
-```
-  // 需要在麦克风已授权的情况下调用，才能获取到麦克风列表，可以和getMicrophonePermission配合使用，或在初始化后先调用getMicrophonePermission获取授权
-  player.getMicrophonesList().then(data => {
-    if (data.code === 0) {
-      // 成功....
-    }
-  })
+```js
+// 需要在麦克风已授权的情况下调用，才能获取到麦克风列表，可以和getMicrophonePermission配合使用，或在初始化后先调用getMicrophonePermission获取授权
+player.getMicrophonesList().then(data => {
+  if (data.code === 0) {
+    // 成功....
+  }
+})
 ```
 
 #### 切换麦克风
 
-```
-  // microphoneId 为获取到的麦克风列表中的deviceId，如果当前处于对讲中，调用setProfile会先关闭，重新发起对讲
-  player.setProfile({ microphoneId })
+```js
+// microphoneId 为获取到的麦克风列表中的deviceId，如果当前处于对讲中，调用setProfile会先关闭，重新发起对讲
+player.setProfile({ microphoneId })
 ```
 
 #### 监听麦克风音量变化
 
-```
-  player.eventEmitter.on('volumeChange', ({ data }) => {
-    // 动态显示音柱,100ms触发一次
-    console.log(`${data * 100}%`)
-  })
+```js
+player.eventEmitter.on('volumeChange', ({ data }) => {
+  // 动态显示音柱,100ms触发一次
+  console.log(`${data * 100}%`)
+})
 ```
 
 #### 全屏
@@ -555,7 +556,6 @@ options 参数说明
 | 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”           |
 
@@ -564,14 +564,13 @@ options 参数说明
 > 可用于在播放中切换模板主题，请切换播放地址成功后调用
 
 ```js
-  player.Theme.changeTheme(template)
-
-  // 预览切回放场景示例
-  player.changePlayUrl({type:"rec"});
-  .then(()=>{
-    console.log("地址切换成功，开始切换模板主题");
-    player.Theme.changeTheme("pcRec");
-  });
+player.Theme.changeTheme(template)
+
+// 预览切回放场景示例
+player.changePlayUrl({type:"rec"}).then(()=>{
+  console.log("地址切换成功，开始切换模板主题");
+  player.Theme.changeTheme("pcRec");
+});
 ```
 
 template 参数说明

demos/base-demo/ezuikit.js

@@ -5,6 +5,13 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
   <title>Document</title>
+  <style>
+    #video-container {
+      width: 600px;
+      height: 400px;
+      background-color: #000;
+    }
+  </style>
   <script src="./ezuikit.js"></script>
 </head>
 
@@ -46,8 +53,8 @@ <h2>视频模式使用示例：</h2>
       player = new EZUIKit.EZUIKitPlayer({
         id: "video-container", // 视频容器ID
         accessToken:
-          "at.5eust80k24rnxeao5ubhg3we8xg3fe2y-2obk7hy2h9-0c9z5t2-6gjyxouc",
-        url: "ezopen://open.ys7.com/L16120197/1.hd.live",
+          "at.1gskp9sk9b8pol288qw4f0ladj6ow00a-2obk8zrvgd-0icd73x",
+        url: "ezopen://open.ys7.com/BA7248908/1.hd.live",
         template: "pcLive", // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
         plugin: ["talk"], // 加载插件，talk-对讲
         width: 600,

demos/base-demo/index.html

@@ -32,6 +32,7 @@ <h2>视频模式使用示例：</h2>
       <button onClick="ezopenStartTalk()">开始对讲</button>
       <button onClick="ezopenStopTalk()">结束对讲</button>
       <button onClick="fullScreen()">全屏</button>
+      <button onClick="destroy()">destroy</button>
     </div>
     <p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
   </div>
@@ -46,8 +47,8 @@ <h2>视频模式使用示例：</h2>
     player = new EZUIKit.EZUIKitPlayer({
       id: 'video-container', // 视频容器ID
       accessToken:
-        "at.5eust80k24rnxeao5ubhg3we8xg3fe2y-2obk7hy2h9-0c9z5t2-6gjyxouc",
-      url: "ezopen://open.ys7.com/L16120197/1.hd.live",
+        "at.1gskp9sk9b8pol288qw4f0ladj6ow00a-2obk8zrvgd-0icd73x-",
+      url: "ezopen://open.ys7.com/BA7248908/1.hd.live",
       template: 'mobileLive', // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
       plugin: ['talk'], // 加载插件，talk-对讲
       width: width,
@@ -122,6 +123,13 @@ <h2>视频模式使用示例：</h2>
     function ezopenStopTalk() {
       player.stopTalk();
     }
+
+    function destroy() {
+      if (player) {
+        player.destroy();
+      }
+      player = null;
+    }
   </script>
 </body>
 

demos/base-demo/mobileLive.html

@@ -30,6 +30,8 @@
       <button onClick="ezopenStartTalk()">开始对讲</button>
       <button onClick="ezopenStopTalk()">结束对讲</button>
       <button onClick="fullScreen()">全屏</button>
+      <button onClick="destroy()">destroy</button>
+
     </div>
     <p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
   </div>
@@ -47,8 +49,8 @@
     player = new EZUIKit.EZUIKitPlayer({
       id: 'video-container', // 视频容器ID
       accessToken:
-        "at.5eust80k24rnxeao5ubhg3we8xg3fe2y-2obk7hy2h9-0c9z5t2-6gjyxouc",
-      url: "ezopen://open.ys7.com/L16120197/1.rec",
+        "at.1gskp9sk9b8pol288qw4f0ladj6ow00a-2obk8zrvgd-0icd73x-",
+      url: "ezopen://open.ys7.com/BA7248908/1.rec",
       template: 'mobileRec', // simple: 极简版; pcLive: 预览; pcRec: 回放; security: 安防版; voice: 语音版;
       width: width,
       height: width * 9 / 16,
@@ -116,12 +118,21 @@
         console.log("promise 获取 数据", data)
       })
     }
+
     function ezopenStartTalk() {
       player.startTalk();
     }
+
     function ezopenStopTalk() {
       player.stopTalk();
     }
+
+    function destroy() {
+      if (player) {
+        player.destroy();
+      }
+      player = null;
+    }
   </script>
 </body>
 

demos/base-demo/mobileRec.html

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "ezuikit-js": "^8.1.1",
+    "ezuikit-js": "^8.1.2-alpha.1",
     "react": "^17",
     "react-dom": "^17",
     "react-scripts": "5.0.1",

demos/nginx-demo/html/ezuikit.js

@@ -5,6 +5,11 @@ import { isMobile } from "./utils";
 const Player = () => {
   const player = useRef();
 
+  /** @type {React.MutableRefObject<HTMLInputElement>} */
+  const urlRef = useRef();
+  /** @type {React.MutableRefObject<HTMLInputElement>} */
+  const accessTokenRef = useRef();
+
   const initPlayer = useCallback(() => {
     if (document.getElementById("player-container")) {
       let width = 600;
@@ -22,9 +27,8 @@ const Player = () => {
 
       player.current = new EZUIKit.EZUIKitPlayer({
         id: "player-container",
-        url: "ezopen://open.ys7.com/BB9480953/1.hd.live",
-        accessToken:
-          "at.2ec3m7dga2v59cps6rv0d1haa2vqsjka-1lbu5f5hyi-1j9rleq-npvuluse",
+        url: urlRef.current.value, // "ezopen://open.ys7.com/BB9480953/1.hd.live",
+        accessToken: accessTokenRef.current.value, // "at.2ec3m7dga2v59cps6rv0d1haa2vqsjka-1lbu5f5hyi-1j9rleq-npvuluse",
         width,
         height,
         template: "pcLive",
@@ -96,7 +100,7 @@ const Player = () => {
   /** 获取OSD时间 */
   const handleGetOSDTime = useCallback(() => {
     if (player.current) {
-      player.current.getOSDTime();
+      console.log("OSDTime", player.current.getOSDTime());
     }
   }, []);
 
@@ -130,7 +134,14 @@ const Player = () => {
       <h2>视频模式使用示例：</h2>
       <div id="player-container"></div>
       <div>
-        <button onClick={initPlayer}>初始化</button>
+        url: <input type="text" ref={urlRef} style={{ width: 500 }} />
+      </div>
+      <div>
+        accessToken:
+        <input type="text" ref={accessTokenRef} style={{ width: 500 }} />
+      </div>
+      <div>
+        <button onClick={initPlayer}>init</button>
         <button onClick={handleStop}>stop</button>
         <button onClick={handlePlay}>play</button>
         <button onClick={handleOpenSound}>openSound</button>
@@ -140,8 +151,8 @@ const Player = () => {
         <button onClick={handleCapturePicture}>capturePicture</button>
         <button onClick={handleFullscreen}>fullScreen</button>
         <button onClick={handleGetOSDTime}>getOSDTime</button>
-        <button onClick={handleStartTalk}>开始对讲</button>
-        <button onClick={handleStopTalk}>结束对讲</button>
+        <button onClick={handleStartTalk}>startTalk</button>
+        <button onClick={handleStopTalk}>stopTalk</button>
         <button onClick={handleDestroy}>destroy</button>
       </div>
     </div>

demos/react-demo/package.json

@@ -11,3 +11,10 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+#player-container {
+  width: 600px;
+  height: 400px;
+  background-color: #000;
+}