소스 검색

fix: update video postion

MSI\liwei 3 년 전
부모
커밋
f96dfecb4e
4개의 변경된 파일173개의 추가작업 그리고 96개의 파일을 삭제
  1. 1 0
      index.css
  2. 1 1
      index.html
  3. 129 76
      main.js
  4. 42 19
      meeting.js

+ 1 - 0
index.css

@@ -125,6 +125,7 @@ dt {
   color: #ffffff;
   font-size: calc(32 / 576 * 1rem);
   margin-right: calc(28 / 576 * 1rem);
+  cursor: pointer;
 }
 .video-container #vPlayArea {
   width: calc(2123 / 576 * 1rem);

+ 1 - 1
index.html

@@ -21,7 +21,7 @@
 
   </head>
   <body>
-    <div class="user-list-container">
+    <div class="user-list-container" style="visibility: hidden;">
         <div class="user-action">
           <div id="createMeAction">创建会议</div>
           <div id="closeMeAction">关闭</div>

+ 129 - 76
main.js

@@ -1,7 +1,7 @@
 // login
 
 var setting = {
-  username: "huashe1",
+  username: "huashe3",
   password: "huashe123",
   ip: "10.55.134.3",
   host: "http",
@@ -16,86 +16,139 @@ window.onload = () => {
   window.addEventListener(
     "message",
     async (e) => {
-      // 指定域名 防止xss 攻击
-      //   if (e.origin != "") return;
+        // 指定域名 防止xss 攻击
+        //   if (e.origin != "") return;
 
-      if (e.data === "onload") {
-        // 登陆 && 保活
-        var package = new Package(setting.URL, {
-          username: setting.username,
-          password: setting.password,
-        });
-        await package.login();
-      }
-      // 打开单兵视频
-      if (e.data.key === "danbing") {
-        const meeting = new Meeting();
-        await meeting.getLocalUserInfo();
-        const res = await meeting.queryUser(e.data.value);
+        if (e.data === "onload") {
+          // 登陆 && 保活
+          var package = new Package(setting.URL, {
+            username: setting.username,
+            password: setting.password,
+          });
+          await package.login();
+        }
+        // 打开单兵视频
+        if (e.data.key === "danbing") {
+          const 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();
-        await meeting.playVideo(meeting.InvitedMembers);
-      }
+          meeting.localUserInfo.name = "danbing_Meeting";
 
-      // 视频会议
-      if (e.data === "creatMeeting") {
-        const el = document.querySelector("#createMeAction");
-        const closeEl = document.querySelector("#closeMeAction");
-        const userEl = document.querySelector(".user-list");
-        const meeting = new 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.deviceId,
+            channelId: e.data.channelId,
+          });
+          $(".video-container").css({
+            visibility: "visible"
+          })
+          await meeting.openClient(
+            () => {
 
-        closeEl.addEventListener("click", () => {
-          window.parent.postMessage("closeIframe", "*");
-        });
+              $(".video-action").one("click", () => {
+                meeting.closeClient();
+                meeting.closeVideo();
+                meeting.deleteMeeting();
+                $(".video-container").css({
+                  visibility: "hidden"
+                })
+                window.parent.postMessage("closeIframe", "*");
+              })
+              meeting.playVideo({
+                type: "single",
+                number: res.userPhone,
+                deviceId: e.data.deviceId,
+                channelId: e.data.channelId,
+              })
+            }
+          )
+        }
 
-        // 创建会议并打开窗口
-        el.addEventListener("click", async () => {
-          await meeting.getLocalUserInfo();
-          const res = await meeting.queryUser(e.data.value);
-          meeting.localUserInfo.name = "video_Meeting";
-          await meeting.creatMeeting();
-          await meeting.startInvite();
-          await meeting.openClient();
+        // 视频会议
+        if (e.data === "creatMeeting") {
+          const meeting = new Meeting();
+
+          // close video meeting iframe
+          $("#closeMeAction").click(() => {
+            meeting.closeClient();
+            meeting.closeVideo();
+            meeting.deleteMeeting();
+            $(".video-container").css({
+              visibility: "hidden"
+            })
+            $(".video-user-content").css({
+              display: "none"
+            })
+            $(".user-list-container").css({
+              visibility: "hidden"
+            })
+            window.parent.postMessage("closeIframe", "*");
+          });
+
+          $(".user-list-container").css({
+            visibility: "visible"
+          })
 
-          const videoEl = document.querySelector(".video-container");
-          videoEl && (videoEl.style.visibility = "visible");
-        });
+          // 创建会议并打开窗口
+          $("#createMeAction").click(async () => {
+            $(".video-user-content").css({
+              display: "flex"
+            })
+            await meeting.getLocalUserInfo();
+            // const res = await meeting.queryUser(e.data.value);
+            meeting.localUserInfo.name = "video_Meeting";
+            await meeting.creatMeeting();
+            // await meeting.startInvite();
+            await meeting.openClient();
+            $(".video-container").css({
+              visibility: "visible"
+            })
+          });
+          $(".video-action").click(() => {
+            meeting.closeClient();
+            meeting.closeVideo();
+            meeting.deleteMeeting();
+            $(".video-container").css({
+              visibility: "hidden"
+            })
+          })
 
-        // 添加人员, 并播放视频
-        userEl.addEventListener("click", async (e) => {
-          console.log(e, e.target, e.target.className, e.target.dataset, "+++");
-          if (e.target.className === "videoAction" && e.target.dataset.code) {
-            const res = await meeting.queryUser(e.target.dataset.code);
-            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.playVideo(meeting.InvitedMembers);
-          }
-        });
-      }
-      if (e.data === "openClient") {
-        await meeting.openClient();
-      }
-    },
-    false
+          // 添加人员, 并播放视频
+          $(".user-list").click(async (e) => {
+            console.log(e, e.target, e.target.className, e.target.dataset, "+++");
+            if (e.target.className === "videoAction" && e.target.dataset.code) {
+              const res = await meeting.queryUser(e.target.dataset.code);
+              await meeting.startInvite({
+                userName: res.userName,
+                userId: res.userCode,
+                region: res.paasId,
+                type: "single",
+                // speak:'true',
+                number: res.userPhone,
+                deviceId: res.deviceId,
+                channelId: res.chnId,
+              });
+              // await meeting.playVideo(meeting.InvitedMembers);
+              meeting.playVideo({
+                type: "single",
+                number: res.userPhone,
+                deviceId: res.deviceId,
+                channelId: res.chnId,
+              })
+            }
+          });
+        }
+        if (e.data === "openClient") {
+          await meeting.openClient();
+        }
+      },
+      false
   );
-};
+};

+ 42 - 19
meeting.js

@@ -59,16 +59,21 @@ var Meeting = function Meeting() {
     type: "client",
   };
   this.meetingInfoback = ""; //各个接口返回信息
+  this.$Message = {
+    warning: (data) => {
+      console.log(data);
+
+    }
+  }
 };
 
 Meeting.prototype = {
-  initSocket(userCode) {
+  initSocket(userCode, callback) {
     const self = this;
     //初始websocket实例,保存在window中方便调用。一个浏览器tab页面只能初始化一次。所有的控件窗口,通过该websocket实例去生成不同的窗口实例,不同的控件窗口通过自己的窗口实例去调用初始化、关闭、隐藏等
     window.theSocket = this.theSocket = new InitWebSocketClass(
       userCode,
-      localStorage.getItem("token"),
-      {
+      localStorage.getItem("token"), {
         //客户端登陆成功通知;
         loginSuccess: (v) => {
           console.log("loginSuccess-->", v);
@@ -88,6 +93,7 @@ Meeting.prototype = {
           ) {
             if (data.params.handleName === "#vPlayArea") {
               //客户端窗口创建好后,界面显示窗口;
+              callback && callback()
               self.vPlayArea.resize();
               this.$Message.warning("视频窗口创建成功!");
             }
@@ -106,11 +112,12 @@ Meeting.prototype = {
       .catch((v) => {
         this.$Message.warning("若要观看实时视频,请先安装视频插件");
       });
+
   },
   //初始化视频窗口实例,先获取自己用户code,再初始化窗口,严格按照封装参数传,别漏了
-  async getUserCode() {
+  getUserCode(callback) {
     let self = this;
-    await $.ajax({
+    $.ajax({
       type: "GET",
       url: setting.URL + "/ras/user/info",
       contentType: "application/json", //如果提交的是json数据类型,则必须有此参数,表示提交的数据类型
@@ -122,9 +129,11 @@ Meeting.prototype = {
       success: (res) => {
         //obj
         if (res && res.userCode) {
-          let { userCode } = res;
+          let {
+            userCode
+          } = res;
           //初始化websocket;
-          self.initSocket(userCode);
+          return self.initSocket(userCode, callback);
         }
       },
     });
@@ -154,6 +163,8 @@ Meeting.prototype = {
   },
   //播放视频
   playVideo(item) {
+    console.log('++++++', 'playVideo');
+
     if (!this.theSocket.websocket) {
       this.$Message.warning("请先打开视频插件");
       return;
@@ -175,6 +186,14 @@ Meeting.prototype = {
       this.pullFlow(item.channelId);
     }
   },
+  //设备视频拉流
+  pullFlow(chinnelId) {
+    if (chinnelId) {
+      window.vPlayArea && window.vPlayArea.realTimeVideo && window.vPlayArea.realTimeVideo([{
+        "channelId": chinnelId
+      }]);
+    }
+  },
   /*  创建会商  */
   async creatMeeting() {
     let _this = this;
@@ -213,7 +232,7 @@ Meeting.prototype = {
     let _this = this;
     _this.InvitedMembers.member = [
       _this.inviteSelf,
-      ...(member || []),
+      ...([member] || []),
       //   {
       //     type: "tandemPhone",
       //     number: _this.outLinenum,
@@ -399,14 +418,12 @@ Meeting.prototype = {
         success: function (res) {
           //obj
           if (res && res.chnId) {
-            let arr = [
-              {
-                channelId: res.chnId,
-                userCode: res.userCode,
-                regionId: res.paasId,
-                domainId: "",
-              },
-            ];
+            let arr = [{
+              channelId: res.chnId,
+              userCode: res.userCode,
+              regionId: res.paasId,
+              domainId: "",
+            }, ];
             resolve(arr);
           }
         },
@@ -415,8 +432,14 @@ Meeting.prototype = {
     });
   },
   /* 打开客户端 */
-  async openClient() {
-    await this.getUserCode();
+  async openClient(callback) {
+    return this.getUserCode(callback);
+  },
+  closeClient() {
+    this.theSocket.closeClient && this.theSocket.closeClient();
+  },
+  closeVideo() {
+    this.theSocket.closeAllVideo && this.theSocket.closeAllVideo();
   },
   /* 获取群聊fromName */
   async getLocalUserInfo() {
@@ -476,4 +499,4 @@ Meeting.prototype = {
     // let container = _this.$el.querySelector("#meetResBack textarea");
     // container.scrollTop = container.scrollHeight;
   },
-};
+};