ezuikit-js 0.2.9 → 0.3.0

package/README.md

@@ -90,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;
@@ -233,7 +247,6 @@
      */
 
     var iframe = document.createElement('iframe');
-    domain = 'http://y.ys7.com:3100'
 
     function matchIframeUrl() {
       switch (_this.opt.template) {
@@ -258,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;
       }
@@ -553,7 +590,6 @@
                 params.handleError(err);
               }
             }
-
             request(_this.opt.apiDomain, 'POST', {
               accessToken: _this.opt.accessToken,
               deviceSerial: _this.opt.deviceSerial,
@@ -1138,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) {
@@ -1211,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;
         }
       }
     });
@@ -1382,16 +1443,16 @@
       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")
       }, 500)
@@ -1518,11 +1579,14 @@
     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',
@@ -1567,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,6 +10,7 @@
   <div className="demo">
     <h2>视频模式使用示例：</h2>
     <div id="video-container"
+      style="width:600px;"
       >
     </div>
     <div>
@@ -29,35 +30,22 @@
     <p style="font-style: italic;">播放多个视频，可初始化多个实例，参考：/demos/base-demo/multi-demo</p>
   </div>
   <script>
-    document.getElementById("video-container").innerHTML="";
     var playr = new EZUIKit.EZUIKitPlayer({
       id: 'video-container', // 视频容器ID
-      accessToken: 'at.24gy1xhw62tw1ciod2rkbcn2cbs0esju-2h73bhdmbw-0lzya5g-yev2hyd5z',
-      url: 'ezopen://open.ys7.com/203751922/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-对讲
       // 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("播放失败回调1",data),
       handleTalkSuccess: () => console.log("对讲成功回调"),
       handleTalkError: (data) = function(){console.log("对讲失败",data)},
       decoderVersion: "v3.4",
-      width:"100%",
-      height:219,
+      width: 600,
+      height:400,
     });
     function fullScreen(){
       var playPromise = playr.fullScreen();