ezuikit-js 0.2.6 → 0.3.0

package/README.md

@@ -46,18 +46,41 @@ import  EZUIKit from 'ezuikit-js';
 > 示例： 停止播放
 
 ```
-  player.stop();
+  1. player.stop();
+
+  2. player.stop()
+  .then(()=>{
+    console.log("执行播放成功后其他动作");
+  });
+
 ```
 > 示例： 执行播放（自动播放为false,自定义触发播放/切换播放地址）
 
 ```
   player.play();
-  // 切换播放地址场景（建议先执行stop方法停止上次取流）
+  // 切换播放地址场景（注意先执行stop方法停止上次取流）
   player.play({
    url: 'ezopen://open.ys7.com/203751922/1.rec?begin=202001000000&end=202001235959'
   });
 ```
 
+切换地址播放（注意需要先执行stop方法停止上次取流）
+
+```
+  player.stop()
+  .then(()=>{
+    player.play('ezopen://open.ys7.com/{其他设备}/{其他通道}.live');
+  });
+
+  // 其他账号下设备
+  
+  player.stop()
+  .then(()=>{
+    player.play({url:'ezopen://open.ys7.com/{其他设备}/{其他通道}.live',accessToken: 'xxxx'});
+  });
+  
+```
+
 ### 使用说明
 #### 初始化
 
@@ -67,6 +90,7 @@ import  EZUIKit from 'ezuikit-js';
 |accessToken|	String|	授权过程获取的access_token|	Y|
 |url	|String|	视频ezopen协议播放地址	|Y|
 |audio|	int	| 是否默认开启声音 1：打开（默认） 0：关闭	|N|
+|autoplay|	int	| 是否自动播放 1：开启 0：关闭	|N|
 |width |int	| 视频宽度，默认值为容器容器DOM宽度	|N|
 |height |int	| 视频高度，默认值为容器容器DOM高度	|N|
 |templete |string	| 播放器模板，可以通过选定模板，使用内置的播放器样式，组件 simple：极简版;standard：标准版;security：安防版(预览回放);vioce：语音版 |N|

package/demos/base-demo/ezuikit.js

@@ -86,6 +86,17 @@
 
     http_request.send(data);
   }
+  var requestFullScreen = function (element) {
+    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+    if (requestMethod) {
+      requestMethod.call(element);
+    } else if (typeof window.ActiveXObject !== "undefined") {
+      var wscript = new ActiveXObject("WScript.Shell");
+      if (wscript !== null) {
+        wscript.SendKeys("{F11}");
+      }
+    }
+  }
 
   ; // 全局属性
 
@@ -191,6 +202,9 @@
         this.opt.filePathDomain =  params.env.filePathDomain;
       }
     }
+    // if(typeof params.domain !== 'undefined'){
+    //   this.opt.apiDomain = params.domain + '/api/lapp/live/talk/url';
+    // }
 
     if (params.url) {
       this.opt.url = params.url;
@@ -257,6 +271,30 @@
         case 'security':
           return domain + "/ezopen/h5/iframe_se?bSupporDoubleClickFull=0&url=" + _this.opt.url.replace("?","&") + "&autoplay=" + _this.opt.autoplay + "&audio=" + _this.opt.audio + "&accessToken=" + params.accessToken + "&templete=0" + "&id=" + id + "&decoderVersion=" + _this.opt.decoderVersion;
 
+        case 'theme':
+          iframeUrl = domain +`/jssdk/theme.html?url=${params.url}&accessToken=${params.accessToken}&id=${id}&isMobile=${params.isMobile}`;
+          if(typeof params.isMobile !== 'undefined') {
+            iframeUrl += '&isMobile=' + params.isMobile;
+          } 
+          if(typeof params.autoplay !== 'undefined') {
+            iframeUrl += '&autoplay=' + params.autoplay;
+          } 
+          if(typeof params.domain !== 'undefined') {
+            if(params.domain == 'https://test12open.ys7.com')
+            iframeUrl += '&env=' + 'test12';
+          }
+          if (typeof params.env !== 'undefined') {
+            if(typeof params.env.domain !== 'undefined'){
+              if(params.env.domain == 'https://test12open.ys7.com'){
+              iframeUrl += '&env=' + 'test12';
+            }
+            }
+          }
+          if(typeof params.header !== 'undefined') {
+            iframeUrl += '&header=' + params.header;
+          }
+          return iframeUrl;
+
         default:
           return domain + "/ezopen/h5/iframe?bSupporDoubleClickFull=0&url=" + _this.opt.url.replace("?","&") + "&autoplay=" + _this.opt.autoplay + "&audio=" + _this.opt.audio + "&accessToken=" + params.accessToken + "&templete=0" + "&id=" + id + "&decoderVersion=" + _this.opt.decoderVersion;
       }
@@ -269,10 +307,16 @@
 
     if (params.height) {
       iframeHeight = parseInt(params.height);
+      if(/\%$/.test(params.height)) {
+        iframeWidth = document.getElementById(id).offsetWidth * (parseInt(params.height) /100);
+      }
     }
 
     if (params.width) {
       iframeWidth = parseInt(params.width);
+      if(/\%$/.test(params.width)) {
+        iframeWidth = document.getElementById(id).offsetWidth * (parseInt(params.width) /100);
+      }
     }
 
     iframe.width = iframeWidth;
@@ -546,7 +590,6 @@
                 params.handleError(err);
               }
             }
-
             request(_this.opt.apiDomain, 'POST', {
               accessToken: _this.opt.accessToken,
               deviceSerial: _this.opt.deviceSerial,
@@ -1131,7 +1174,6 @@
 
     var _this = this;
     window.addEventListener("message", function (event) {
-      console.log("EZUIKitPlayer收到反馈", event);
       var origin = event.origin;
       var id = _this.opt.id;
       if (event.data.type) {
@@ -1204,6 +1246,32 @@
               }
             }
             break;
+            case 'startTalk':
+                _this.startTalk();
+                // params.startTalk();
+                _this.closeSound();
+              break;
+              case 'stopTalk':
+                // window.stopTalk()
+                // params.stopTalk();
+                _this.openSound();
+                break;
+              case 'clickEventHandle':
+                console.log("event.data",event.data);
+                if(params.clickEventHandle) {
+                  params.clickEventHandle(event.data);
+                }
+                break;
+              case 'removeEventHandle':
+                if(params.removeEventHandle) {
+                  params.removeEventHandle(event.data);
+                }
+              break;
+              case 'esc':
+                if(params.clickEventHandle) {
+                  params.clickEventHandle(event.data);
+                }
+              break;
         }
       }
     });
@@ -1375,19 +1443,19 @@
       style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
       style += 'position: fixed;top: 0;left: 0;z-index:10';
       wrapper.style.cssText = style;
-      var cancelFullDOM = document.createElement('div');
-      cancelFullDOM.id = id + "cancel-full-screen"
-      var cancelFullDOMStyle="width:30px;height:"+height+"px;z-index:1000;position:fixed;top:0px;right:0px;";
-      cancelFullDOMStyle += "background-image: url(https://resource.ys7cloud.com/group1/M00/00/7E/CtwQE1-01qeAH2wAAAABOliqQ5g167.png);"
-      cancelFullDOMStyle += "background-size: contain;background-repeat:no-repeat;background-color:rgba(0,0,0,0.2)"
-      cancelFullDOM.style = cancelFullDOMStyle;
-      cancelFullDOM.onclick = function(){
-        _this.cancelFullScreen();
-      }
-      document.body.appendChild(cancelFullDOM);
+      // var cancelFullDOM = document.createElement('div');
+      // cancelFullDOM.id = id + "cancel-full-screen"
+      // var cancelFullDOMStyle="width:30px;height:"+height+"px;z-index:1000;position:fixed;top:0px;right:0px;";
+      // cancelFullDOMStyle += "background-image: url(https://resource.ys7cloud.com/group1/M00/00/7E/CtwQE1-01qeAH2wAAAABOliqQ5g167.png);"
+      // cancelFullDOMStyle += "background-size: contain;background-repeat:no-repeat;background-color:rgba(0,0,0,0.2)"
+      // cancelFullDOM.style = cancelFullDOMStyle;
+      // cancelFullDOM.onclick = function(){
+      //   _this.cancelFullScreen();
+      // }
+      // document.body.appendChild(cancelFullDOM);
       setTimeout(function () {
         player.postMessage('autoResize', domain + "/ezopen/h5/iframe")
-      }, 200)
+      }, 500)
 
     } else {
         // console.log('pc端全屏');
@@ -1403,9 +1471,6 @@
           }
         }
         requestFullScreen(document.getElementById(id));
-        setTimeout(function () {
-          player.postMessage("autoResize", domain + "/ezopen/h5/iframe")
-        }, 200)
     }
     if (this.params.fullScreenCallBack) {
       this.params.fullScreenCallBack(this.opt.id);
@@ -1433,7 +1498,7 @@
       wrapper.style.cssText = style;
       setTimeout(function () {
         player.postMessage("autoResize",  domain + "/ezopen/h5/iframe")
-      }, 200);
+      }, 500);
       var cancelFullDOMId = id + "cancel-full-screen";
       var cancelFullDOM = document.getElementById(cancelFullDOMId);
       if(cancelFullDOM){
@@ -1514,16 +1579,19 @@
     var containerDOM = document.getElementById(this.opt.id);
     containerDOM.style.width = width + 'px';
     containerDOM.style.height = height +  'px';
+    document.getElementById(this.opt.id).style.width = width + 'px';
+    document.getElementById(this.opt.id).style.height =  height +  'px';
 
     var playDOM  = document.getElementById(id);
     playDOM.setAttribute("width",width);
     playDOM.setAttribute("height",height);
-
+    playDOM.style.width = width + 'px';
+    playDOM.style.height = height +  'px';
     setTimeout(function(){
       player.postMessage({
         action: 'autoResize',
       }, domain + "/ezopen/h5/iframe");
-    },200)
+    },500)
   };
 
   EZUIKitPlayer.prototype.startTalk = function () {
@@ -1563,6 +1631,31 @@
     console.log("执行结束对讲");
     window.stopTalk();
   };
+  EZUIKitPlayer.prototype.edit = function () {
+    var id = 'EZUIKitPlayer-' + this.opt.id;
+    var player = document.getElementById(id).contentWindow;
+    player.postMessage("edit", domain + "/ezopen/h5/iframe");
+  };
+  EZUIKitPlayer.prototype.btnReRender = function (data) {
+    var id = 'EZUIKitPlayer-' + this.opt.id;
+    var player = document.getElementById(id).contentWindow;
+    player.postMessage({action: "btnReRender",data: data}, domain + "/ezopen/h5/iframe")
+  };
+  EZUIKitPlayer.prototype.changePlayUrl = function (data) {
+    var id = 'EZUIKitPlayer-' + this.opt.id;
+    var player = document.getElementById(id).contentWindow;
+    player.postMessage({action: "changePlayUrl",data: data}, domain + "/ezopen/h5/iframe");
+  };
+  EZUIKitPlayer.prototype.fetchThemeData = function () {
+    var id = 'EZUIKitPlayer-' + this.opt.id;
+    var player = document.getElementById(id).contentWindow;
+    player.postMessage({action: "fetchThemeData"}, domain + "/ezopen/h5/iframe")
+  };
+  EZUIKitPlayer.prototype.setThemeData = function (accessToken, header, footer) {
+    var id = 'EZUIKitPlayer-' + this.opt.id;
+    var player = document.getElementById(id).contentWindow;
+    player.postMessage({action: "setThemeData",data:{accessToken, header, footer}}, domain + "/ezopen/h5/iframe")
+  };
   /**
    * 视频播放器-结束
    */

package/demos/base-demo/index.html

@@ -10,7 +10,7 @@
   <div className="demo">
     <h2>视频模式使用示例：</h2>
     <div id="video-container"
-      style="width:375px;"
+      style="width:600px;"
       >
     </div>
     <div>
@@ -25,39 +25,34 @@
     <button onClick="stopSave()">stopSave</button>
     <button onClick="startTalk()">开始对讲</button>
     <button onClick="stopTalk()">结束对讲</button>
+    <button onClick="fullScreen()">全屏</button>
     </div>
     <p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
   </div>
   <script>
     var playr = new EZUIKit.EZUIKitPlayer({
       id: 'video-container', // 视频容器ID
-      accessToken: 'at.37xkb1049n2wcwwwdseys2bia0wpohl6-4n6euy2q2j-0k0eng6-yqmv5ipwp',
-      url: 'ezopen://open.ys7.com/C69594192/1.live',
-      template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
+      accessToken: 'at.9or7li380hkqjr1c7rdke11abs1pa8sq-77ce7r93s1-1mjbwne-dmg4okcji',
+      url: 'ezopen://open.ys7.com/C78957921/1.live',
+      template: 'theme', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
       autoplay: true,
-      // 视频上方头部控件
-      header: ['capturePicture','save','zoom'],            // 如果templete参数不为simple,该字段将被覆盖
-      // 视频下方底部控件
-       footer: ['talk','broadcast','hd','fullScreen'],      // 如果template参数不为simple,该字段将被覆盖
       // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
-      // plugin: ['talk'],                       // 加载插件，talk-对讲
+      plugin: ['talk'],                       // 加载插件，talk-对讲
       // controls: true, //['play','voice','hd','fullScreen'], // 视频控制相关控件，如果template参数不为simple,该字段将被覆盖
-      openSoundCallBack: (data) => console.log("开启声音回调",data),
-      closeSoundCallBack: (data) => console.log("关闭声音回调",data),
-      startSaveCallBack: (data) => console.log("开始录像回调",data),
-      stopSaveCallBack: (data) => console.log("录像回调",data),
-      capturePictureCallBack: (data) => console.log("截图成功回调",data),
-      fullScreenCallBack: (data) => console.log("全屏回调",data),
-      fullScreenChangeCallBack: (data) => console.log("全屏变化回调",data),
-      getOSDTimeCallBack: (data) => console.log("获取OSDTime回调",data),
       handleSuccess: (data) = function(){console.log("播放成功回调",data)},
-      handleError: (data) => console.log("播放失败回调",data),
-      handleTalkSuccess: () => console.log("对讲成功回掉"),
+      handleError: (data) => console.log("播放失败回调1",data),
+      handleTalkSuccess: () => console.log("对讲成功回调"),
       handleTalkError: (data) = function(){console.log("对讲失败",data)},
-      decoderVersion: "v2.6.4",
-      width:375,
+      decoderVersion: "v3.4",
+      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)=>{
@@ -114,4 +109,4 @@
     }
   </script>
 </body>
-</html>
+</html>