ezuikit-js 0.4.0 → 0.4.2

package/demos/base-demo/index.html

@@ -33,9 +33,9 @@
     var playr = new EZUIKit.EZUIKitPlayer({
       id: 'video-container', // 视频容器ID
       accessToken: 'at.740rax9017850gps4kxruugu30cr9gqy-6ezmv0q5bp-0k6u4f4-pgu1gtspi',
-      url: 'ezopen://open.ys7.com/C78957921/1.live',
-      template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
-      //themeId: "89d071ff92f941118d7920f9ca347190",
+      url: 'ezopen://open.ys7.com/C78957921/1.rec',
+      //template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
+      themeId: "mobileRec",
       autoplay: true,
       // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
       plugin: ['talk'],                       // 加载插件，talk-对讲
@@ -45,8 +45,8 @@
       handleTalkSuccess: () => console.log("对讲成功回调"),
       handleTalkError: (data) = function(){console.log("对讲失败",data)},
       decoderVersion: "v3.4",
-      width: 600,
-      height:400,
+      width: 375,
+      height:210,
     });
     function fullScreen(){
       var playPromise = playr.fullScreen();

package/ezuikit.js

@@ -23789,6 +23789,9 @@ var TimeLine$1 = function (jsPlugin) {
 class Rec {
   constructor(jSPlugin) {
     this.jSPlugin = jSPlugin;
+    if(!document.getElementById(`${this.jSPlugin.id}-audioControls`)) {
+      return false;
+    }
     this.currentTimeWidth = 1; //回放时间轴尺度 1~4
     this.timer = null;
     this.date = new Date();
@@ -23909,10 +23912,10 @@ C11.4,16.3,11,16.6,10.6,16.6z" />
     });
     this.syncTimeLine();
     // 加载日期选择器
-    addCss("https://open.ys7.com/assets/ezuikit_theme/css/datepicker.min.css");
-    addJs("https://open.ys7.com/assets/ezuikit_v2.6.4/js/jquery.min.js", () => {
-      addJs("https://open.ys7.com/assets/ezuikit_theme/js/datepicker.js", () => {
-        addJs("https://open.ys7.com/assets/ezuikit_theme/js/datepicker.zh-CN.js", () => {
+    addCss(`${this.jSPlugin.staticPath}/rec/datepicker.min.css`);
+    addJs(`${this.jSPlugin.staticPath}/rec/jquery.min.js`, () => {
+      addJs(`${this.jSPlugin.staticPath}/rec/datepicker.js`, () => {
+        addJs(`${this.jSPlugin.staticPath}/rec/datepicker.zh-CN.js`, () => {
           // 日期选择：
           $(`#${this.jSPlugin.id}-datepicker`).datepicker({
             autoShow: false,
@@ -25216,9 +25219,9 @@ class Talk {
     audioRightDOM.setAttribute("controls", true);
     audioRight.appendChild(audioRightDOM);
     
-    addJs("https://open.ys7.com/assets/ezuikit_v2.6.4/npm/js/adapeter.js", () => {
-      addJs("https://open.ys7.com/assets/ezuikit_v2.6.4/npm/js/janus.js", () => {
-        addJs("https://open.ys7.com/assets/ezuikit_v4.0/js/tts-v4.js", () => {
+    addJs(`${this.jSPlugin.staticPath}/talk/adapeter.js`, () => {
+      addJs(`${this.jSPlugin.staticPath}/talk/janus.js`, () => {
+        addJs(`${this.jSPlugin.staticPath}/talk/tts-v4.js`, () => {
           // 临时处理
           window.EZUIKit["handleTalkError"] = {
             handleTalkError: (err)=>{
@@ -26067,69 +26070,6 @@ class Theme {
      PC端 & 直播 =》 pcLive
      PC端 & 回放地址 => pcRec
     */
-    // switch (matchEzopenUrl(jSPlugin.url).type) {
-    // case 'live':
-    //   this.themeData = pcLiveData.data;
-    //   if (this.isMobile) {
-    //     this.themeData = mobileLiveData.data;
-    //   }
-    //   break;
-    // case 'rec':
-    // case 'cloud.rec':
-    //   this.themeData = pcRecData.data;
-    //   if (this.isMobile) {
-    //     this.themeData = mobileRecData.data;
-    //   }
-    //   break;
-    // default:
-    //   break;
-    // }
-    // const videoId = jSPlugin.id;
-    // this.header = defaultTheme.header;
-    // this.footer = defaultTheme.footer;
-    // if (!document.getElementById(`${this.jSPlugin.id}-headControl`)) {
-    //   const headerContainer = document.createElement('div');
-    //   headerContainer.setAttribute('id', `${this.jSPlugin.id}-headControl`);
-    //   headerContainer.setAttribute('class', 'head-message');
-    //   headerContainer.innerHTML = `<div id='${this.jSPlugin.id}}-headControl-left' style='display:flex'></div><div id='${this.jSPlugin.id}}-headControl-right' style='display:flex'></div>`;
-    //   var headerStyle = {
-    //     height: "48px",
-    //     "line-height": "48px",
-    //     display: "flex",
-    //     "justify-content": "space-between",
-    //     top: 0,
-    //     "z-index": 1,
-    //     background: "#000000",
-    //     color: "#FFFFFF",
-    //     width: "100%"
-    //   };
-    //   headerContainer.style = styleToString(headerStyle);
-    //   document.getElementById(`${videoId}-wrap`).insertBefore(headerContainer, document.getElementById(videoId));
-    // }
-    // if (!document.getElementById(`${this.jSPlugin.id}-ez-iframe-footer-container`)) {
-    //   const footerContainer = document.createElement('div');
-    //   footerContainer.setAttribute('id', `${this.jSPlugin.id}-ez-iframe-footer-container`);
-    //   footerContainer.setAttribute('class', 'ez-iframe-footer-container');
-    //   var footerStyle = {
-    //     "min-height": "48px",
-    //     "max-height": "96px",
-    //     "position": "relative",
-    //     "margin-top": "-48px",
-    //     display: "flex",
-    //     "flex-wrap": "wrap",
-    //     "justify-content": "space-between",
-    //     top: 0,
-    //     "z-index": 1,
-    //     color: "#FFFFFF",
-    //     width: "100%"
-    //   };
-    //   footerContainer.style = styleToString(footerStyle);
-    //   footerContainer.innerHTML = `<div id="${this.jSPlugin.id}-audioControls" style='display:flex;justify-content: space-between;height: 48px;width:100%;'><div id='${this.jSPlugin.id}-audioControls-left' style='display:flex'></div><div id='${this.jSPlugin.id}-audioControls-right' style='display:flex'></div></div>`;
-    //   insertAfter(footerContainer, document.getElementById(videoId));
-    // }
-    // if (!this.jSPlugin.inited) {
-    //   this.initThemeData();
-    // }
     if (this.jSPlugin.themeId) {
       switch (this.jSPlugin.themeId) {
       case 'pcLive':
@@ -26175,11 +26115,9 @@ class Theme {
         this.Ptz = new Ptz(jSPlugin);
       }
     }
-    //设备信息
-    this.getDeviceInfo();
   }
   fetchThemeData(themeId) {
-    const url = `https://open.ys7.com/jssdk/ezopen/template/getDetail?accessToken=${this.jSPlugin.accessToken}&id=${themeId}`;
+    const url = `${this.jSPlugin.env.domain}/jssdk/ezopen/template/getDetail?accessToken=${this.jSPlugin.accessToken}&id=${themeId}`;
     fetch(url, {
       method: 'GET'
     })
@@ -26351,9 +26289,16 @@ class Theme {
         }
         break;
       case 'hd':
-        if (document.getElementById(`${this.jSPlugin.id}-hd`)) {
-          document.getElementById(`${this.jSPlugin.id}-hd`).className = options[item] ? 'active' : '';
-          document.getElementById(`${this.jSPlugin.id}-hd-content`).childNodes[1].childNodes[0].style.fill = options[item] ? activeColor : color;
+        if (options[item]) {
+          if(document.getElementById(`${this.jSPlugin.id}-hd`)) {
+            document.getElementById(`${this.jSPlugin.id}-hd-content`).children[1].children[0].style = "display:block";
+            document.getElementById(`${this.jSPlugin.id}-hd-content`).children[1].children[1].style = "display:none";
+          }
+        } else {
+          if(document.getElementById(`${this.jSPlugin.id}-hd`)) {
+            document.getElementById(`${this.jSPlugin.id}-hd-content`).children[1].children[1].style = "display:block";
+            document.getElementById(`${this.jSPlugin.id}-hd-content`).children[1].children[0].style = "display:none";
+          }
         }
         break;
       case 'cloudRec':
@@ -26807,8 +26752,7 @@ class Theme {
       btnItem.onclick = (e) => {
         const { hd } = this.decoderState.state;
         // 选择清晰度选项时才触发事件
-        console.log(`选择画面清晰度-${e.target.innerHTML}`);
-        if (hd && e.target.id === 'select-sd') {
+        if (hd && e.target.id ===  `${this.jSPlugin.id}-select-sd`) {
           //decoder.changePlayUrl({ hd: false });
           console.log("切换到标清");
           this.jSPlugin.changePlayUrl({ hd: false });
@@ -27019,6 +26963,8 @@ class Theme {
       window.addEventListener(item, (data) => fullscreenchange());
     });
     this.inited = true;
+    //设备信息
+    this.getDeviceInfo();
   }
   getDeviceInfo() {
     const deviceAPISuccess = (data) => {
@@ -28639,15 +28585,47 @@ var EZUIKitV3$1 = EZUIKitV3;
 
 /* eslint-disable valid-jsdoc */
 
+// iframe模板 - 兼容旧版本
+const matchTemplate = (templateName, params) => {
+  const IFRAMETEMPLATE = ['simple','standard','security','vioce','theme'];
+  const LOCALTEMPLATE = ['pcLive','pcRec','mobileLive','mobileRec','noData'];
+  if(typeof templateName === 'undefined') {
+    return {
+      templateType: 'local',
+      templateId: ''
+    }
+  }  if (typeof templateName === 'string') {
+
+    if(templateName.length === 32) {
+      return {
+        templateType: 'remote',
+        templateId: templateName
+      }
+    } else if (IFRAMETEMPLATE.indexOf(templateName) !== -1) {
+       // 精简版且不使用头部，底部，仅播放视频，建议使用按需加载避免iframe内存额外消耗
+      if (templateName === 'simple' && typeof params.header === 'undefined' && typeof params.footer === 'undefined') {
+        return {
+          templateType: 'local',
+          templateId: ''
+        }
+      }
+      return {
+        templateType: 'iframe',
+        templateId: templateName
+      }
+    } else if (LOCALTEMPLATE.indexOf(templateName) !== -1) {
+      return {
+        templateType: 'local',
+        templateId: templateName
+      }
+    }
+  }
+};
+
 class EZUIKitPlayer {
   constructor(params) {
     const { autoplay = true } = params;
     this.params = params;
-    // 精简版且不使用头部，底部，仅播放视频，建议使用按需加载避免iframe内存额外消耗
-    if (this.params.template && this.params.template === 'simple' && typeof this.params.header === 'undefined' && typeof this.params.footer === 'undefined') {
-      this.params.themeId = "";
-      delete this.params.template;
-    }
     window.EZUIKit[params.id] = {state: {
       EZUIKitPlayer: {
         init: window.EZUIKit[params.id] && window.EZUIKit[params.id].state && window.EZUIKit[params.id].state.EZUIKitPlayer.init || false,
@@ -28655,18 +28633,22 @@ class EZUIKitPlayer {
         talkInit: window.EZUIKit[params.id] && window.EZUIKit[params.id].state && window.EZUIKit[params.id].state.EZUIKitPlayer.talkInit || false
       }}
     };
-    if (!(typeof this.params.template === 'string')) {
+    if(matchTemplate(this.params.template, params).templateType !== 'iframe'){
       this.id = params.id;
       this.width = params.width;
       this.height = params.height;
       this.url = params.url;
       this.accessToken = params.accessToken;
-      this.themeId = params.themeId;
+      this.themeId = matchTemplate(params.template, params).templateId;
       this.id = params.id;
       this.audio = params.audio;
-      addJs("https://open.ys7.com/assets/ezuikit_v4.0/js/AudioRenderer.js", () => {
-        addJs("https://open.ys7.com/assets/ezuikit_v4.0/js/SuperRender_10.js", () => {
-          addJs("https://open.ys7.com/assets/ezuikit_v4.0/js/jsPlugin-4.0.1.min.js", () => {
+      this.staticPath = "https://open.ys7.com/assets/ezuikit_v4.0";
+      if(typeof params.staticPath === 'string') {
+        this.staticPath = params.staticPath;
+      }
+      addJs(`${this.staticPath}/js/AudioRenderer.js`, () => {
+        addJs(`${this.staticPath}/js/SuperRender_10.js`, () => {
+          addJs(`${this.staticPath}/js/jsPlugin-4.0.2.min.js`, () => {
             var initEZUIKitPlayerPromise = this.initEZUIKitPlayer(params);
             initEZUIKitPlayerPromise.then((data) => {
               console.log("初始化成功", data);
@@ -28691,7 +28673,7 @@ class EZUIKitPlayer {
     }
   }
   initEZUIKitPlayer(params) {
-    const { id, themeId, width = 600, height = 400 } = params;
+    const { id, width = 600, height = 400 } = params;
     if (!document.getElementById(`${id}-wrap`)) {
       document.getElementById(id).style = `display:inline-block;width:${width}px;height:${height}px;`;
       var wapDom = document.createElement("div");
@@ -28710,6 +28692,7 @@ class EZUIKitPlayer {
         iMaxSplit: 1,
         iCurrentSplit: 1,
         szBasePath: "",
+        staticPath: params.staticPath,
         oStyle: {
           border: "none",
           background: "#000000"
@@ -28768,7 +28751,7 @@ class EZUIKitPlayer {
       }
       this.errorHander = new Code();
       this.jSPlugin = jSPlugin;
-      if (themeId && !window.EZUIKit[params.id].state.EZUIKitPlayer.themeInit) {
+      if (this.themeId && !window.EZUIKit[params.id].state.EZUIKitPlayer.themeInit) {
         this.Theme = new Theme(this, id);
         window.EZUIKit[params.id].state.EZUIKitPlayer.themeInit = true;
       }
@@ -29100,6 +29083,9 @@ class EZUIKitPlayer {
             };
           }
           var wsUrl = getPlayParams(data).websocketConnectUrl;
+          if(this.env && this.env.wsUrl) {
+            wsUrl = this.env.wsUrl;
+          }
           var wsParams = {
             playURL: getPlayParams(data).websocketStreamingParam
           };
@@ -29275,7 +29261,7 @@ class EZUIKitPlayer {
     return promise;
   }
   capturePicture(name, callback = false) {
-    var capturePictureRT = this.jSPlugin.JS_CapturePicture(0, name, "JPEG", callback);
+    var capturePictureRT = this.jSPlugin.JS_CapturePicture(0, name, "JPEG", callback, !!callback);
     if (isPromise(capturePictureRT)) {
       return capturePictureRT;
     }
@@ -29353,9 +29339,39 @@ class EZUIKitPlayer {
   reSize(width, height) {
     this.width = width;
     this.height = height;
-    document.getElementById(`${this.id}-wrap`).style.width = `${width}px;position:relative;`;
+    document.getElementById(`${this.id}-wrap`).style = `width:${width}px;position:relative;`;
     this.jSPlugin.JS_Resize(width, height);
   }
+  fast() {
+    var fastRT = this.jSPlugin.JS_Fast(0);
+    console.log("JS_Fast", fastRT);
+    if (isPromise(fastRT)) {
+      return fastRT;
+    }
+    return new Promise(function (resolve) {
+      resolve(fastRT);
+    });
+  }
+  slow() {
+    var slowRT = this.jSPlugin.JS_Slow(0);
+    console.log("slowRT", slowRT);
+    if (isPromise(slowRT)) {
+      return slowRT;
+    }
+    return new Promise(function (resolve) {
+      resolve(slowRT);
+    });
+  }
+  seek(startTime, endTime) {
+    var seekRT = this.jSPlugin.JS_Seek(0,startTime, endTime);
+    console.log("seekRT", seekRT);
+    if (isPromise(seekRT)) {
+      return seekRT;
+    }
+    return new Promise(function (resolve) {
+      resolve(seekRT);
+    });
+  }
   fullScreen() {
     var promise = requestFullScreenPromise(document.getElementById(`${this.id}`));
     promise.then((data) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezuikit-js",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "ezuikit javascript for npm",
   "main": "ezuikit.js",
   "scripts": {