ezuikit-js 0.6.2-beta.0 → 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>  
 
@@ -125,7 +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>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>
@@ -220,6 +232,13 @@ themeData将主题数据本地化，设置本地数据，需要删除template参
                 "memo": "对讲按钮",
                 "isrender": 1
             },
+            {
+                "iconId": "zoom",
+                "part": "left",
+                "defaultActive": 0,
+                "memo": "电子放大",
+                "isrender": 1
+            },
             {
                 "iconId": "hd",
                 "part": "right",
@@ -376,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设置默认封面
@@ -389,6 +431,7 @@ options参数说明
 ```
 
 #### 开启电子放大
+>建议使用模板，模板中的电子放大功能更全
 
 ```
   // 方式1

package/demos/base-demo/ezuikit.js

@@ -28963,7 +28963,7 @@ var officeTemplateList = [{
   updateTime: '2021-06-14T08:04:37.000Z',
   label: '官方',
   labelPic: "https://resource.eziot.com/group1/M00/00/8A/CtwQEmLr_DmANlElAAA-xyivSaw030.png",
-  poster: "https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
+  poster: "",
   header: pcLiveSimpleData.data.header,
   footer: pcLiveSimpleData.data.footer
 }, {

package/demos/base-demo/ezuikit_static/v6/v1/css/theme.css

@@ -0,0 +1,121 @@
+.footer-controls .theme-icon-item {
+  margin: 0 1%;
+}
+.footer-controls.themeEditing .theme-icon-item {
+  position: relative;
+  /* margin: 0 8px; */
+}
+.footer-controls .footer-controls-left{
+  margin-left: 12px;
+}
+.footer-controls.themeEditing .footer-controls-left .theme-icon-item {
+  /* margin-left: 12px; */
+}
+.footer-controls.themeEditing .footer-controls-right .theme-icon-item {
+  /* margin-right: 12px; */
+}
+.footer-controls .theme-icon-item .icon-move {
+  display: none;
+}
+.footer-controls.themeEditing .theme-icon-item:hover .icon-move {
+  display: block;
+}
+.footer-controls.themeEditing .footer-controls-left .theme-icon-item:first-child .icon-move.left{
+  display: none;
+}
+.footer-controls.themeEditing .footer-controls-left .theme-icon-item:nth-last-child(1) .icon-move.right{
+  display: none;
+}
+.footer-controls .footer-controls-right {
+  margin-right: 12px;
+}
+
+.footer-controls.themeEditing .footer-controls-right .theme-icon-item:first-child .icon-move.left{
+  display: none;
+}
+.footer-controls.themeEditing .footer-controls-right .theme-icon-item:nth-last-child(1) .icon-move.right{
+  display: none;
+}
+
+.header-controls .theme-icon-item {
+  margin: 0 1%;
+}
+.header-controls.themeEditing .theme-icon-item {
+  position: relative;
+  /* margin: 0 8px; */
+}
+.header-controls.themeEditing .header-controls-left  {
+  margin-left: 12px;
+}
+.header-controls.themeEditing .header-controls-right {
+  margin-right: 12px;
+}
+.header-controls .theme-icon-item .icon-move {
+  display: none;
+}
+.header-controls.themeEditing .theme-icon-item:hover .icon-move {
+  display: block;
+}
+.header-controls.themeEditing .header-controls-left .theme-icon-item:first-child .icon-move.left{
+  display: none;
+}
+.header-controls.themeEditing .header-controls-left .theme-icon-item:nth-last-child(1) .icon-move.right{
+  display: none;
+}
+
+.header-controls.themeEditing .header-controls-right .theme-icon-item:first-child .icon-move.left{
+  display: none;
+}
+.header-controls.themeEditing .header-controls-right .theme-icon-item:nth-last-child(1) .icon-move.right{
+  display: none;
+}
+
+
+.time-area {
+  position: absolute;
+  color: #FFFFFF;
+  width: 68px;
+  height: 24px;
+  line-height: 24px;
+  background: #00000050;
+  border-radius: 12px;
+  display: none;
+  align-content: center;
+  left: calc(50% - 34px);
+  top: -30px;
+  align-items: center;
+  justify-content: space-around;
+  padding-left: 4px;
+  z-index: 9999999;
+
+}
+.time-area .dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background: red;
+  border-radius: 100%;
+  margin: 0 4px 1px 4px;
+}
+
+
+/* .footer-controls.themeEditing .theme-icon-item {
+  position: relative;
+  margin: 0 8px;
+}
+.footer-controls.themeEditing .footer-controls-left .theme-icon-item:nth-child(1) .ezuikit-theme-icon >span:first-child{
+  display: none!important;
+}
+.footer-controls.themeEditing .footer-controls-left .theme-icon-item:nth-last-child(2) .ezuikit-theme-icon >span:nth-child(3){
+  display: none!important;
+}
+
+.footer-controls.themeEditing .theme-icon-item:hover .ezuikit-theme-icon {
+  display: block!important;
+}
+.footer-controls.themeEditing .footer-controls-right .theme-icon-item:nth-child(1) .ezuikit-theme-icon >span:first-child{
+  display: none!important;
+}
+.footer-controls.themeEditing .footer-controls-right .theme-icon-item:nth-last-child(1) .ezuikit-theme-icon >span:nth-child(3){
+  display: none!important;
+} */

package/demos/base-demo/ezuikit_static/v6/v1/js/AudioRenderer.js

@@ -0,0 +1,225 @@
+/**
+ * Created by wangweijie5 on 2016/12/16.
+ */
+
+"use strict";
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var __instance = function () {
+    var instance = void 0;
+    return function (newInstance) {
+        if (newInstance) instance = newInstance;
+        return instance;
+    };
+}();
+
+var AudioRenderer = function () {
+    function AudioRenderer() {
+        _classCallCheck(this, AudioRenderer);
+
+        if (__instance()) return __instance();
+
+        // 确保只有单例
+        if (AudioRenderer.unique !== undefined) {
+            return AudioRenderer.unique;
+        }
+
+        AudioRenderer.unique = this;
+
+        this.oAudioContext = null;
+        this.currentVolume = 0.8; // 初始音量
+        this.bSetVolume = false;
+        this.gainNode = null;
+        this.iWndNum = -1; // 窗口号
+        this.mVolumes = new Map(); // 用于存储所有音量
+
+        // Init AudioContext
+        var AudioContext = window.AudioContext || window.webkitAudioContext;
+        this.oAudioContext = new AudioContext();
+
+        this.writeString = function (view, offset, string) {
+            for (var i = 0; i < string.length; i++) {
+                view.setUint8(offset + i, string.charCodeAt(i));
+            }
+        };
+
+        this.setBufferToDataview = function (output, offset, input) {
+            for (var i = 0; i < input.length; i++, offset++) {
+                output.setUint8(offset, input[i]);
+            }
+        };
+
+        __instance(this);
+    }
+
+    /**
+     * @synopsis 音频播放
+     *
+     *  @param dataBuf [IN] 音频缓存
+     *  @param dataLen [IN] 缓存长度
+     *  @param audioInfo [IN] 音频参数
+     *
+     * @returns 状态码
+     */
+
+
+    _createClass(AudioRenderer, [{
+        key: 'Play',
+        value: function Play(dataBuf, dataLen, audioInfo) {
+            var bufferData = new ArrayBuffer(44 + dataLen);
+            var viewTalk = new DataView(bufferData);
+            var sampleRates = audioInfo.samplesPerSec;
+            var channels = audioInfo.channels;
+            var bitsPerSample = audioInfo.bitsPerSample;
+
+            //console.log("audiorender sampleRates"+sampleRates+"channels:"+channels+"bitsPerSample:"+bitsPerSample);
+
+            /* RIFF identifier */
+            this.writeString(viewTalk, 0, 'RIFF');
+            /* file length */
+            viewTalk.setUint32(4, 32 + dataLen * 2, true);
+            /* RIFF type */
+            this.writeString(viewTalk, 8, 'WAVE');
+            /* format chunk identifier */
+            this.writeString(viewTalk, 12, 'fmt ');
+            /* format chunk length */
+            viewTalk.setUint32(16, 16, true);
+            /* sample format (raw) */
+            viewTalk.setUint16(20, 1, true);
+            /* channel count */
+            viewTalk.setUint16(22, channels, true);
+            /* sample rate */
+            viewTalk.setUint32(24, sampleRates, true);
+            /* byte rate (sample rate * block align) */
+            viewTalk.setUint32(28, sampleRates * 2, true);
+            /* block align (channel count * bytes per sample)/8 */
+            viewTalk.setUint16(32, channels * bitsPerSample / 8, true);
+            /* bits per sample */
+            viewTalk.setUint16(34, bitsPerSample, true);
+            /* data chunk identifier */
+            this.writeString(viewTalk, 36, 'data');
+            /* data chunk length */
+            viewTalk.setUint32(40, dataLen, true);
+            this.setBufferToDataview(viewTalk, 44, dataBuf);
+
+            var self = this;
+            this.oAudioContext.decodeAudioData(viewTalk.buffer, function (buffer) {
+
+                var bufferSource = self.oAudioContext.createBufferSource();
+                if (bufferSource == null) {
+                    return -1;
+                }
+
+                bufferSource.buffer = buffer;
+                bufferSource.start(0);
+
+                if (self.gainNode == null || self.bSetVolume) {
+                    self.gainNode = self.oAudioContext.createGain();
+                    // self.gainNode.gain.value = self.currentVolume;
+                    // // self.currentVolume = self.gainNode.gain.value;
+                    // self.gainNode.connect(self.oAudioContext.destination);
+
+                    self.bSetVolume = false;
+                }
+
+                self.gainNode.gain.value = self.currentVolume;
+                // self.currentVolume = self.gainNode.gain.value;
+                self.gainNode.connect(self.oAudioContext.destination);
+
+                bufferSource.connect(self.gainNode);
+            }, function (e) {
+                console.log("decode error");
+                return -1;
+            });
+
+            return 0;
+        }
+
+        /**
+         * @synopsis 停止播放
+         *
+         * @returns 返回音量
+         */
+
+    }, {
+        key: 'Stop',
+        value: function Stop() {
+            if (this.gainNode != null) {
+                this.gainNode.disconnect();
+                this.gainNode = null;
+            }
+
+            // this.oAudioContext.close();
+
+            // AudioRenderer.unique = undefined;
+            // __instance() = null;
+            return true;
+        }
+
+        /**
+         * @synopsis 设置音量
+         *
+         *  @param iVolume [IN] 音量
+         *
+         * @returns 状态码
+         */
+
+    }, {
+        key: 'SetVolume',
+        value: function SetVolume(iVolume) {
+            this.bSetVolume = true;
+            this.currentVolume = iVolume;
+
+            // 储存当前窗口设置音量值
+            this.mVolumes.set(this.iWndNum, iVolume);
+            return true;
+        }
+
+        /**
+         * @synopsis 设置窗口号
+         *
+         *  @param iWndNum [IN] 窗口号
+         *
+         * @returns 状态码
+         */
+
+    }, {
+        key: 'SetWndNum',
+        value: function SetWndNum(iWndNum) {
+            this.iWndNum = iWndNum;
+
+            // 获取当前窗口设置音量值
+            var iVolume = this.mVolumes.get(iWndNum);
+            if (iVolume == undefined) {
+                iVolume = 0.8; // 默认音量
+            }
+            this.currentVolume = iVolume;
+
+            return true;
+        }
+
+        /**
+         * @synopsis 获取音量
+         *
+         * @returns 返回音量
+         */
+
+    }, {
+        key: 'GetVolume',
+        value: function GetVolume() {
+            // 获取当前窗口设置音量值
+            var iVolume = this.mVolumes.get(this.iWndNum);
+            if (iVolume == undefined) {
+                iVolume = 0.8; // 默认音量
+            }
+
+            return iVolume;
+        }
+    }]);
+window.AudioRenderer = AudioRenderer;
+    return AudioRenderer;
+}();
+//# sourceMappingURL=AudioRenderer.js.map