Browse Source

fix: device video

hi-cactus! 3 years ago
parent
commit
ecdd87030b
6 changed files with 328 additions and 217 deletions
  1. 138 0
      flexible.js
  2. BIN
      frame_sphy.png
  3. 16 0
      index.css
  4. 7 141
      index.html
  5. 30 5
      main.js
  6. 137 71
      meeting.js

+ 138 - 0
flexible.js

@@ -0,0 +1,138 @@
+(function (win, lib) {
+  var doc = win.document;
+  var docEl = doc.documentElement;
+  var metaEl = doc.querySelector('meta[name="viewport"]');
+  var flexibleEl = doc.querySelector('meta[name="flexible"]');
+  var dpr = 0;
+  var scale = 0;
+  var tid;
+  var flexible = lib.flexible || (lib.flexible = {});
+
+  if (metaEl) {
+    console.warn("将根据已有的meta标签来设置缩放比例");
+    var match = metaEl
+      .getAttribute("content")
+      .match(/initial\-scale=([\d\.]+)/);
+    if (match) {
+      scale = parseFloat(match[1]);
+      dpr = parseInt(1 / scale);
+    }
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute("content");
+    if (content) {
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1]);
+        scale = parseFloat((1 / dpr).toFixed(2));
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1]);
+        scale = parseFloat((1 / dpr).toFixed(2));
+      }
+    }
+  }
+
+  if (!dpr && !scale) {
+    var isAndroid = win.navigator.appVersion.match(/android/gi);
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+    var devicePixelRatio = win.devicePixelRatio;
+    if (isIPhone) {
+      // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3;
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+        dpr = 2;
+      } else {
+        dpr = 1;
+      }
+    } else {
+      // 其他设备下,仍旧使用1倍的方案
+      dpr = 1;
+    }
+    scale = 1 / dpr;
+  }
+
+  docEl.setAttribute("data-dpr", dpr);
+  if (!metaEl) {
+    metaEl = doc.createElement("meta");
+    metaEl.setAttribute("name", "viewport");
+    metaEl.setAttribute(
+      "content",
+      "initial-scale=" +
+        scale +
+        ", maximum-scale=" +
+        scale +
+        ", minimum-scale=" +
+        scale +
+        ", user-scalable=no"
+    );
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl);
+    } else {
+      var wrap = doc.createElement("div");
+      wrap.appendChild(metaEl);
+      doc.write(wrap.innerHTML);
+    }
+  }
+
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width;
+    if (width / dpr > 5760) {
+      width = 5760 * dpr;
+    }
+    var rem = width / 10;
+    docEl.style.fontSize = rem + "px";
+    flexible.rem = win.rem = rem;
+  }
+
+  win.addEventListener(
+    "resize",
+    function () {
+      clearTimeout(tid);
+      tid = setTimeout(refreshRem, 300);
+    },
+    false
+  );
+  win.addEventListener(
+    "pageshow",
+    function (e) {
+      if (e.persisted) {
+        clearTimeout(tid);
+        tid = setTimeout(refreshRem, 300);
+      }
+    },
+    false
+  );
+
+  if (doc.readyState === "complete") {
+    doc.body.style.fontSize = 12 * dpr + "px";
+  } else {
+    doc.addEventListener(
+      "DOMContentLoaded",
+      function (e) {
+        doc.body.style.fontSize = 12 * dpr + "px";
+      },
+      false
+    );
+  }
+
+  refreshRem();
+
+  flexible.dpr = win.dpr = dpr;
+  flexible.refreshRem = refreshRem;
+  flexible.rem2px = function (d) {
+    var val = parseFloat(d) * this.rem;
+    if (typeof d === "string" && d.match(/rem$/)) {
+      val += "px";
+    }
+    return val;
+  };
+  flexible.px2rem = function (d) {
+    var val = parseFloat(d) / this.rem;
+    if (typeof d === "string" && d.match(/px$/)) {
+      val += "rem";
+    }
+    return val;
+  };
+})(window, window["lib"] || (window["lib"] = {}));

BIN
frame_sphy.png


+ 16 - 0
index.css

@@ -0,0 +1,16 @@
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+}
+
+.user-list {
+  background-image: url("./frame_sphy.png");
+  background-size: contain;
+  right: calc(58 / 576 * 1rem);
+  top: calc(50% + calc(52 * 2 / 576 * 1rem));
+  transform: translateY(calc(-50% - calc(52 / 576 * 1rem)));
+  position: fixed;
+  width: calc(1090 / 576 * 1rem);
+  height: calc(1580 / 576 * 1rem);
+}

+ 7 - 141
index.html

@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>交通运输应急指挥系统</title>
+    <link rel="stylesheet" href="./index.css"></link>
+    <script src="./flexible.js"></script>
     <script src="./webClient/defaultConfig.js"></script>
     <script src="./webClient/initWebSocket.js"></script>
     <script src="./webClient/webClient_initWnd.js"></script>
@@ -16,148 +18,12 @@
     <script src="./meeting.js"></script>
     <script src="./main.js"></script>
 
-    <script>
-      (function (win, lib) {
-        var doc = win.document;
-        var docEl = doc.documentElement;
-        var metaEl = doc.querySelector('meta[name="viewport"]');
-        var flexibleEl = doc.querySelector('meta[name="flexible"]');
-        var dpr = 0;
-        var scale = 0;
-        var tid;
-        var flexible = lib.flexible || (lib.flexible = {});
-
-        if (metaEl) {
-          console.warn("将根据已有的meta标签来设置缩放比例");
-          var match = metaEl
-            .getAttribute("content")
-            .match(/initial\-scale=([\d\.]+)/);
-          if (match) {
-            scale = parseFloat(match[1]);
-            dpr = parseInt(1 / scale);
-          }
-        } else if (flexibleEl) {
-          var content = flexibleEl.getAttribute("content");
-          if (content) {
-            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
-            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
-            if (initialDpr) {
-              dpr = parseFloat(initialDpr[1]);
-              scale = parseFloat((1 / dpr).toFixed(2));
-            }
-            if (maximumDpr) {
-              dpr = parseFloat(maximumDpr[1]);
-              scale = parseFloat((1 / dpr).toFixed(2));
-            }
-          }
-        }
-
-        if (!dpr && !scale) {
-          var isAndroid = win.navigator.appVersion.match(/android/gi);
-          var isIPhone = win.navigator.appVersion.match(/iphone/gi);
-          var devicePixelRatio = win.devicePixelRatio;
-          if (isIPhone) {
-            // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
-            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
-              dpr = 3;
-            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
-              dpr = 2;
-            } else {
-              dpr = 1;
-            }
-          } else {
-            // 其他设备下,仍旧使用1倍的方案
-            dpr = 1;
-          }
-          scale = 1 / dpr;
-        }
-
-        docEl.setAttribute("data-dpr", dpr);
-        if (!metaEl) {
-          metaEl = doc.createElement("meta");
-          metaEl.setAttribute("name", "viewport");
-          metaEl.setAttribute(
-            "content",
-            "initial-scale=" +
-              scale +
-              ", maximum-scale=" +
-              scale +
-              ", minimum-scale=" +
-              scale +
-              ", user-scalable=no"
-          );
-          if (docEl.firstElementChild) {
-            docEl.firstElementChild.appendChild(metaEl);
-          } else {
-            var wrap = doc.createElement("div");
-            wrap.appendChild(metaEl);
-            doc.write(wrap.innerHTML);
-          }
-        }
-
-        function refreshRem() {
-          var width = docEl.getBoundingClientRect().width;
-          if (width / dpr > 540) {
-            width = 540 * dpr;
-          }
-          var rem = width / 10;
-          docEl.style.fontSize = rem + "px";
-          flexible.rem = win.rem = rem;
-        }
-
-        win.addEventListener(
-          "resize",
-          function () {
-            clearTimeout(tid);
-            tid = setTimeout(refreshRem, 300);
-          },
-          false
-        );
-        win.addEventListener(
-          "pageshow",
-          function (e) {
-            if (e.persisted) {
-              clearTimeout(tid);
-              tid = setTimeout(refreshRem, 300);
-            }
-          },
-          false
-        );
-
-        if (doc.readyState === "complete") {
-          doc.body.style.fontSize = 12 * dpr + "px";
-        } else {
-          doc.addEventListener(
-            "DOMContentLoaded",
-            function (e) {
-              doc.body.style.fontSize = 12 * dpr + "px";
-            },
-            false
-          );
-        }
+  </head>
+  <body>
+    <div class="user-list">
 
-        refreshRem();
+    </div>
+    <div id="vPlayArea"></div>
 
-        flexible.dpr = win.dpr = dpr;
-        flexible.refreshRem = refreshRem;
-        flexible.rem2px = function (d) {
-          var val = parseFloat(d) * this.rem;
-          if (typeof d === "string" && d.match(/rem$/)) {
-            val += "px";
-          }
-          return val;
-        };
-        flexible.px2rem = function (d) {
-          var val = parseFloat(d) / this.rem;
-          if (typeof d === "string" && d.match(/px$/)) {
-            val += "rem";
-          }
-          return val;
-        };
-      })(window, window["lib"] || (window["lib"] = {}));
-    </script>
-  </head>
-  <body style="background-color: red">
-    <div id="app"></div>
   </body>
 </html>

+ 30 - 5
main.js

@@ -8,8 +8,9 @@ var setting = {
   port: "6699",
 };
 
-var DA_HUA_URL_PREFIX = setting.host + "://" + setting.ip + ":" + setting.port;
-localStorage.setItem("url", DA_HUA_URL_PREFIX);
+setting.URL = setting.host + "://" + setting.ip + ":" + setting.port;
+
+localStorage.setItem("url", setting.URL);
 
 window.onload = () => {
   window.addEventListener(
@@ -17,20 +18,44 @@ window.onload = () => {
     async (e) => {
       // 指定域名 防止xss 攻击
       //   if (e.origin != "") return;
+      console.log(e.data, "____");
 
       if (e.data === "onload") {
         // 登陆 && 保活
-        var package = new Package(DA_HUA_URL_PREFIX, {
+        var package = new Package(setting.URL, {
           username: setting.username,
           password: setting.password,
         });
-        var meeting = new Meeting();
         await package.login();
       }
+      console.log();
+      // 打开单兵视频
+      if (e.data.key === "danbing") {
+        var meeting = new Meeting();
+        await meeting.getLocalUserInfo();
+        const res = await meeting.queryUser(e.data.value);
+
+        meeting.localUserInfo.name = "danbing_Meeting";
+        await meeting.creatMeeting();
+        await meeting.startInvite({
+          userName: res.userName,
+          userId: res.userCode,
+          region: res.paasId,
+          type: "single",
+          // speak:'true',
+          number: res.userPhone,
+          deviceId: e.data.deviceCode,
+          channelId: e.data.channelId,
+        });
+        await meeting.openClient();
+      }
       if (e.data === "creatMeeting") {
+        var meeting = new Meeting();
         await meeting.getLocalUserInfo();
         // 创建会议
-        await meeting.creatMeeting({});
+        meeting.localUserInfo.name = "HD_Meeting";
+        await meeting.creatMeeting();
+        localStorage.setItem("meeting", JSON.stringify(obj));
       }
 
       if (e.data === "openClient") {

+ 137 - 71
meeting.js

@@ -1,4 +1,65 @@
-var Meeting = function Meeting() {};
+var Meeting = function Meeting() {
+  this.localUserInfo = {
+    //创建会议的参数对象
+    name: "", //会议名称
+    masterId: "", //主持人用户ID
+    masterName: "", //主持人名字
+    masterNumber: "", //主持人号码
+    region: "", //号码对应的PAAS域ID
+    record: true, //是否录像录音true:录像录音 false:不录
+    type: "video", //会议类型“audio”: 音频会议 “video”: 音视频会议
+    mode: "group", //会议模式“p2p”:点对点“group”:群聊
+  };
+  this.InvitedMembers = {
+    //邀请会议的参数对象
+    id: "", //会议id
+    inviteId: "", //邀请人ID
+    inviteName: "", //邀请人名字
+    inviteNumber: "", //邀请人号码
+    member: [],
+  };
+  this.InvitedMembersSingle = {
+    //单兵
+    id: "", //会议id
+    inviteId: "", //邀请人ID
+    inviteName: "", //邀请人名字
+    inviteNumber: "", //邀请人号码
+    member: [],
+  };
+  this.InvitedMembersVehicle = {
+    //车载
+    id: "", //会议id
+    inviteId: "", //邀请人ID
+    inviteName: "", //邀请人名字
+    inviteNumber: "", //邀请人号码
+    member: [],
+  };
+  this.InvitedMembersUav = {
+    //无人机
+    id: "", //会议id
+    inviteId: "", //邀请人ID
+    inviteName: "", //邀请人名字
+    inviteNumber: "", //邀请人号码
+    member: [],
+  };
+  this.InvitedMembersTalkie = {
+    //对讲机
+    id: "", //会议id
+    inviteId: "", //邀请人ID
+    inviteName: "", //邀请人名字
+    inviteNumber: "", //邀请人号码
+    member: [],
+  };
+  this.inviteSelf = {
+    userName: "",
+    department: "",
+    userId: "",
+    region: "",
+    number: "",
+    type: "client",
+  };
+  this.meetingInfoback = ""; //各个接口返回信息
+};
 
 Meeting.prototype = {
   initSocket(userCode) {
@@ -147,6 +208,46 @@ Meeting.prototype = {
       error: function (data) {},
     });
   },
+  getD
+  /* 邀请会商成员 */
+  startInvite(member) {
+    let _this = this;
+    _this.InvitedMembers.member = [
+      _this.inviteSelf,
+      member,
+      //   {
+      //     type: "tandemPhone",
+      //     number: _this.outLinenum,
+      //     userName: _this.outLinenum,
+      //     region: _this.paasId,
+      //   },
+    ];
+    $.ajax({
+      type: "POST",
+      url: setting.URL + "/mcu/meeting/member",
+      contentType: "application/json", //如果提交的是json数据类型,则必须有此参数,表示提交的数据类型
+      dateType: "json",
+      data: JSON.stringify(_this.InvitedMembers),
+      beforeSend: function (xhr) {
+        xhr.setRequestHeader("X-Subject-Token", localStorage.getItem("token"));
+        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+      },
+      success: function (res) {
+        //obj
+        _this._debug("邀请会商成后的信息", res);
+        //_this.searchMeetingMember(); //add创建会商然后,开始查会议成员显示在列表中;
+      },
+      error: function (data) {
+        if (data.responseJSON.code == "mcuIdNotExist") {
+          _this.$Message.warning("未创建会商");
+        } else if (data.responseJSON.code == "mcuIdInvalid") {
+          _this.$Message.warning("会议ID无效");
+        } else if (data.responseJSON.code == "mcuMeetingMemMax") {
+          _this.$Message.warning("会议用户数满");
+        }
+      },
+    });
+  },
   /*  关闭会商操作 */
   deleteMeeting() {
     let _this = this;
@@ -183,58 +284,6 @@ Meeting.prototype = {
       },
     });
   },
-  /*  获取用户  */
-  getUserInformation() {
-    let _this = this;
-    $.ajax({
-      type: "POST",
-      url: setting.URL + "/ras/acd/user/information",
-      // url: setting.URL + "/ras/acd/user/list",
-      contentType: "application/json", //如果提交的是json数据类型,则必须有此参数,表示提交的数据类型
-      dateType: "json",
-      data: JSON.stringify({
-        condition: {},
-        keyCondition: {},
-        page: 1,
-        pageSize: 10000,
-      }),
-      /* data: JSON.stringify(Object.assign({"page":_this.curpage},{
-							"condition": {},
-							"keyCondition": {},
-							"pageSize": 10000
-						})), */
-      beforeSend: function (xhr) {
-        xhr.setRequestHeader("X-Subject-Token", localStorage.getItem("token"));
-        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
-      },
-      success: function (res) {
-        //obj
-        if (res && res.results.length == 0) {
-          return;
-        } else {
-          _this.groupList = res.results;
-          /* let num=Math.ceil(res.totalCount/512);
-								if(_this.curpage<=num){
-									_this.curpage++;
-									_this.groupList=[..._this.groupList,...res.results];
-									_this.getUserInformation();
-									
-								} */
-        }
-      },
-      error: function (data) {
-        _this._debug("获取用户错误信息", data);
-      },
-    });
-  },
-  /* 选择邀请用户 */
-  slectOptionUserCode(v) {
-    console.log(v, this.memberUserCode);
-    if (v == undefined) {
-      return;
-    }
-    this.slectOption(v);
-  },
   /* 通过deviceCode查询设备channelId */
   searchChinnelId(deviceCode, deviceType) {
     let _this = this;
@@ -301,6 +350,34 @@ Meeting.prototype = {
       });
     });
   },
+  queryUser(userCode) {
+    let _this = this;
+    return new Promise((resolve) => {
+      $.ajax({
+        type: "GET",
+        url: setting.URL + "/ras/user/" + userCode,
+        contentType: "application/json", //如果提交的是json数据类型,则必须有此参数,表示提交的数据类型
+        dateType: "json",
+        beforeSend: function (xhr) {
+          xhr.setRequestHeader(
+            "X-Subject-Token",
+            localStorage.getItem("token")
+          );
+          xhr.setRequestHeader(
+            "Content-Type",
+            "application/json;charset=UTF-8"
+          );
+        },
+        success: function (res) {
+          //obj
+          if (res && res.chnId) {
+            resolve(res);
+          }
+        },
+        error: function (data) {},
+      });
+    });  
+  },
   /* app拉流 */
   slectOptionmini(userCode) {
     let _this = this;
@@ -342,26 +419,9 @@ Meeting.prototype = {
   openClient() {
     this.getUserCode();
   },
-  /* 
-				 获取群聊fromName
-				 */
+  /* 获取群聊fromName */
   async getLocalUserInfo() {
     let _this = this;
-    /* var localUserInfo={
-						masterId:"",//主持人用户ID
-						masterName:"",//主持人名字
-						masterNumber:"",//主持人号码
-						region:"",//号码对应的PAAS域ID
-						record:true,//是否录像录音true:录像录音 false:不录
-						type:"video",//会议类型“audio”: 音频会议 “video”: 音视频会议
-						mode:"group",//会议模式“p2p”:点对点“group”:群聊
-					} */
-    /* var InvitedMembers={
-						id:"",//会议id
-						inviteId:"",//邀请人ID
-						inviteName: "", //邀请人名字
-						inviteNumber: "", //邀请人号码
-					} */
     await $.ajax({
       type: "GET",
       url: setting.URL + "/ras/user/info",
@@ -411,4 +471,10 @@ Meeting.prototype = {
       error: function (data) {},
     });
   },
+  _debug(tip, res) {
+    let _this = this;
+    _this.meetingInfoback += tip + "--》  " + JSON.stringify(res) + "\n\n";
+    // let container = _this.$el.querySelector("#meetResBack textarea");
+    // container.scrollTop = container.scrollHeight;
+  },
 };