ezuikit-js 0.6.1-beta.4 → 0.6.2

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+v 0.6.2  
+
+[feta] 支持用户通过开启谷歌实验室特性启动多线程解码  
+
+[feta] 支持用户在开放平台控制台（https://open.ys7.com/console/ezuikit/template.html）创建，修改，删除，查询多个模板  
+
+[feta] 优化模板内高清/标清切换缓慢问题。  
+
+[feta] 支持切换主题  
+
+[feta] 支持根据主题ID自定义主题  
+
+[feta] 新增pc端电子放大，移动端双指缩放功能  
+
+[feta] 新增倍速回放功能  
+
+
+v 0.6.1  
+
+[feta] 支持本地配置解码库，解决远程拉取缓慢问题。  
+
 v 0.6.0  
 
 [fix]兼容低版本火狐浏览器播放视频   

package/README.md

@@ -62,6 +62,18 @@ import  EZUIKit from 'ezuikit-js';
 
 你可以通过以下地址获取到测试accessToken <a href="https://open.ys7.com/jssdk/ezopen/demo/token" target="_blank">获取测试accessToken</a> 用来播放上述测试播放地址。 
 
+#### 最佳实践tips
+
+1. 我们在v0.6.2及以上版本持用户通过开启谷歌实验室特性启动多线程解码，多线程模式将大大提升解码效率，降低解码内存消耗。  
+
+>>[开启多线程方式1](https://open.ys7.com/help/384)  (https://open.ys7.com/help/384)
+
+>>[开启多线程方式2](https://open.ys7.com/help/385)(https://open.ys7.com/help/385)  
+
+2. 视频解码库默认从开放平台远程拉取，你可以将解码库放到本地或者你的服务内，可以提升加载解码库速度。 
+
+ >> <b>使用本地解码库提升加载速度</b>  <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/localDecoder.html" target="_blank">本地解码库示例</a> 
+
 ### 使用示例
 <b>基本使用：</b>  <a href="https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/blob/master/demos/base-demo/base.html" target="_blank">基本使用示例</a>  
 
@@ -106,7 +118,7 @@ ezopen://open.ys7.com/${设备序列号}/{通道号}.rec?begin=yyyyMMddhhmmss
 初始化参数 url值为：<br/>
 ezopen://open.ys7.com/${设备序列号}/{通道号}.cloud.rec?begin=yyyyMMddhhmmss
 视频ezopen协议播放地址 详见：<a href="http://open.ys7.com/doc/zh/readme/ezopen.html" target="_blank">ezopen协议</a>	</td><td>Y</td></tr>
-<tr><td>audio</td><td>int</td><td>是否默认开启声音 1：打开（默认） 0：关闭	</td><td>N</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>template</td><td>String</td><td>  
@@ -125,10 +137,7 @@ ezopen://open.ys7.com/${设备序列号}/{通道号}.cloud.rec?begin=yyyyMMddhhm
 <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>（建议使用）开放平台提供了查询账号下主题列表，增加主题<br />，修改主题，删除主题接口。<br />你可以通过调用开放平台提供的接口自定义创建多个主题，根据主题Id动<br />态渲染头部，底部样式，按钮隐藏显示，排布及按钮样式<br />
-<a href="https://resource.eziot.com/group2/M00/00/79/CtwQFmI8d_mAC8-eAAA1PBGvsds71.json" target="_blank">接口示例下载（请导入postman查看示例）</a>
-</td></tr>
-<tr><td>theme</td><td>自定义主题，<a href="https://open.ys7.com/console/ezopenIframe.html" target="_blank">开放平台控制台配置</a><br />（v0.3.0版本及以上支持，建议使用 自定义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>
 
 </td></tr>
@@ -223,6 +232,13 @@ themeData将主题数据本地化，设置本地数据，需要删除template参
                 "memo": "对讲按钮",
                 "isrender": 1
             },
+            {
+                "iconId": "zoom",
+                "part": "left",
+                "defaultActive": 0,
+                "memo": "电子放大",
+                "isrender": 1
+            },
             {
                 "iconId": "hd",
                 "part": "right",
@@ -379,6 +395,29 @@ options参数说明
 |begin|	String	| type类型为回放有效，开始时间 格式为“YYYYMMDDHHmmss”	|N|
 |end|	String	| type类型为回放有效，结束时间 格式为 “YYYYMMDDHHmmss”	|N|
 
+
+  
+
+#### 切换模板主题  
+> 可用于在播放中切换模板主题，同切换播放地址一起调用
+
+```
+  player.Theme.changeTheme(template)
+  .then(()=>{
+    console.log("切换成功")
+  });
+
+  // 预览切回放场景示例
+  player.changePlayUrl({type:"rec"});
+  player.Theme.changeTheme("pcRec");
+
+```
+template参数说明
+
+|参数名|类型|描述|是否必选|
+|:--|:--|:--|:--|
+|type|	String| 模板名称，详见初始化参数template|	Y|
+
 #### 设置封面
 
 >你可以在初始化时，通过参数poster设置默认封面
@@ -392,6 +431,7 @@ options参数说明
 ```
 
 #### 开启电子放大
+>建议使用模板，模板中的电子放大功能更全
 
 ```
   // 方式1

package/demos/base-demo/base.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <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>
+  <script src="./ezuikit.js"></script>
+</head>
+
+<body>
+  <div className="demo">
+    <h2>视频模式使用示例：</h2>
+    <div id="video-container" style="width:600px;">
+    </div>
+    <div>
+      <button onClick="play()">play</button>
+      <button onClick="stop()">stop</button>
+      <button onClick="getOSDTime()">getOSDTime</button>
+      <button onClick="getOSDTime2()">getOSDTime2</button>
+      <button onClick="capturePicture()">capturePicture</button>
+      <button onClick="openSound()">openSound</button>
+      <button onClick="closeSound()">closeSound</button>
+      <button onClick="startSave()">startSave</button>
+      <button onClick="stopSave()">stopSave</button>
+      <button onClick="ezopenStartTalk()">开始对讲</button>
+      <button onClick="ezopenStopTalk()">结束对讲</button>
+      <button onClick="fullScreen()">全屏</button>
+    </div>
+    <p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
+  </div>
+  <script>
+    var playr;
+    fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
+      .then(response => response.json())
+      .then(res => {
+        var accessToken = res.data.accessToken;
+        playr = new EZUIKit.EZUIKitPlayer({
+          id: 'video-container', // 视频容器ID
+          accessToken: accessToken,
+          url: 'ezopen://open.ys7.com/G39444019/1.live',
+          template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
+          plugin: ['talk'],                       // 加载插件，talk-对讲
+          width: 600,
+          height: 400,
+        });
+      });
+    function fullScreen() {
+      var playPromise = playr.fullScreen();
+      playPromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function play() {
+      var playPromise = playr.play();
+      playPromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function stop() {
+      var stopPromise = playr.stop();
+      stopPromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function getOSDTime() {
+      var getOSDTimePromise = playr.getOSDTime();
+      getOSDTimePromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function getOSDTime2() {
+      var getOSDTimePromise = playr2.getOSDTime();
+      getOSDTimePromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function capturePicture() {
+      var capturePicturePromise = playr.capturePicture();
+      capturePicturePromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function openSound() {
+      var openSoundPromise = playr.openSound();
+      openSoundPromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function closeSound() {
+      var closeSoundPromise = playr.closeSound();
+      closeSoundPromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function startSave() {
+      var startSavePromise = playr.startSave();
+      startSavePromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function stopSave() {
+      var stopSavePromise = playr.stopSave();
+      stopSavePromise.then((data) => {
+        console.log("promise 获取 数据", data)
+      })
+    }
+    function ezopenStartTalk() {
+      playr.startTalk();
+    }
+    function ezopenStopTalk() {
+      playr.stopTalk();
+    }
+  </script>
+</body>
+
+</html>