feat: open video

action.js

@@ -0,0 +1,12 @@
+const Action = function Action(el) {
+  this.creatEl = el;
+};
+
+Action.prototype = {
+  bindEvent: () => {
+    console.log(this.creatEl, "_-------");
+    this.creatEl.addEventListener("click", () => {
+      alert(11);
+    });
+  },
+};

index.css

@@ -4,8 +4,8 @@ body {
   height: 100vh;
 }
 
-.user-list {
-  background-image: url("./frame_sphy.png");
+.user-list-container {
+  background-image: url("./image/frame_sphy.png");
   background-size: contain;
   right: calc(58 / 576 * 1rem);
   top: calc(50% + calc(52 * 2 / 576 * 1rem));
@@ -14,3 +14,180 @@ body {
   width: calc(1090 / 576 * 1rem);
   height: calc(1580 / 576 * 1rem);
 }
+.user-list-container .user-action {
+  margin-top: calc(150 / 576 * 1rem);
+  text-align: center;
+}
+.user-list-container .user-action > div {
+  background-image: url("./image/frame_meeting.png");
+  background-size: cover;
+  display: inline-block;
+  /* padding: 0 calc(118 / 576 * 1rem); */
+  width: calc(476 / 576 * 1rem);
+  height: calc(130 / 576 * 1rem);
+  line-height: calc(130 / 576 * 1rem);
+  font-size: calc(40 / 576 * 1rem);
+  color: #39d6fe;
+  cursor: pointer;
+}
+.user-list-container .user-search {
+  margin-top: calc(60 / 576 * 1rem);
+  display: flex;
+}
+
+.user-list-container .user-search input {
+  flex: 1;
+  box-sizing: border-box;
+  padding: calc(46 / 576 * 1rem);
+  height: calc(88 / 576 * 1rem);
+  border-radius: 44px;
+  border: 0 none;
+  outline: none;
+  background: #ffffff;
+  margin: 0 calc(58 / 576 * 1rem);
+  font-size: calc(40 / 576 * 1rem);
+}
+input::placeholder {
+  color: #c5c5c5;
+}
+.user-list-container .user-list {
+  margin: 0 calc(58 / 576 * 1rem);
+  margin-top: calc(60 / 576 * 1rem);
+}
+dl,
+dd,
+dt {
+  margin: 0;
+  padding: 0;
+}
+.user-list-container .user-list .user-dep {
+  /* font-size: calc(46 / 576 * 1rem); */
+  /* color: #ffffff; */
+}
+
+.user-list-container .user-list .user-dep .dep-title {
+  font-size: calc(46 / 576 * 1rem);
+  color: #ffffff;
+  line-height: calc(96 / 576 * 1rem);
+}
+.user-list-container .user-list .user-dep .dep-user {
+  line-height: calc(96 / 576 * 1rem);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.user-list-container .user-list .user-dep .dep-user .dep-user-info {
+  display: flex;
+  flex-direction: column;
+  font-size: calc(40 / 576 * 1rem);
+  color: #ffffff;
+}
+.user-list-container
+  .user-list
+  .user-dep
+  .dep-user
+  .dep-user-info
+  > div:last-child {
+  color: #39d6fe;
+}
+
+.user-list-container .user-list .user-dep .dep-user .dep-user-action > img {
+  width: calc(80 / 576 * 1rem);
+  height: calc(80 / 576 * 1rem);
+  margin-left: calc(37 / 576 * 1rem);
+  cursor: pointer;
+}
+.video-container {
+  position: fixed;
+  display: flex;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(
+    calc(-2663 / 2 / 576 * 1rem),
+    calc(-1275 / 2 / 576 * 1rem),
+    0
+  );
+}
+.video-container .video-bar {
+  width: calc(2123 / 576 * 1rem);
+  height: calc(80 / 576 * 1rem);
+  background: #06076b;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.video-container .video-action {
+  width: calc(192 / 576 * 1rem);
+  height: calc(60 / 576 * 1rem);
+  line-height: calc(60 / 576 * 1rem);
+  text-align: center;
+  background: linear-gradient(0deg, #f74447 0%, #ff6665 100%);
+  color: #ffffff;
+  font-size: calc(32 / 576 * 1rem);
+  margin-right: calc(28 / 576 * 1rem);
+}
+.video-container #vPlayArea {
+  width: calc(2123 / 576 * 1rem);
+  height: calc(1195 / 576 * 1rem);
+  background: #06076b;
+}
+.video-container .video-user-content {
+  width: calc(540 / 576 * 1rem);
+  background: #000157;
+  display: flex;
+  flex-direction: column;
+}
+.video-container .video-user-title {
+  border-bottom: 2px solid #191a7d;
+  height: calc(98 / 576 * 1rem);
+  line-height: calc(98 / 576 * 1rem);
+  padding-left: calc(30 / 576 * 1rem);
+  color: #ffffff;
+  font-size: calc(30 / 576 * 1rem);
+}
+
+.video-container .video-user-list {
+  border-bottom: 2px solid #191a7d;
+  padding-left: calc(32 / 576 * 1rem);
+  color: #ffffff;
+  font-size: calc(30 / 576 * 1rem);
+  flex: 1;
+}
+
+.video-container .video-user-action {
+  height: calc(80 / 576 * 1rem);
+  padding: 0 calc(32 / 576 * 1rem);
+  color: #ffffff;
+  font-size: calc(32 / 576 * 1rem);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.video-container .video-user-action > div {
+  height: calc(60 / 576 * 1rem);
+  line-height: calc(60 / 576 * 1rem);
+  border: 2px solid #39d6fe;
+  padding: 0 calc(30 / 576 * 1rem);
+  color: #39d6fe;
+  cursor: pointer;
+}
+.video-container .video-user-action > div:last-child {
+  border-color: #fff;
+  color: #fff;
+}
+
+.video-container.only-video .video-user-content {
+  display: none;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #39d6fe;
+  border-radius: 3px;
+}

index.html

@@ -16,14 +16,63 @@
     <!-- <script src="./url.js"></script> -->
     <script src="./login.js"></script>
     <script src="./meeting.js"></script>
+    <script src="./action.js"> </script>
     <script src="./main.js"></script>
 
   </head>
   <body>
-    <div class="user-list">
-
+    <div class="user-list-container">
+        <div class="user-action">
+          <div id="createMeAction">创建会议</div>
+          <div id="closeMeAction">关闭</div>
+        </div>
+        <div class="user-search">
+          <input type="text" placeholder="请输入您要拨打的号码" >
+        </div>
+        <div class="user-list">
+          <dl class="user-dep">
+            <dt class="dep-title">部门1</dt>
+            <dd class="dep-user">
+              <div class="dep-user-info">
+                <div>华设2</div>
+                <div> - </div>
+              </div>
+              <div class="dep-user-action">
+                <img  data-code="5269853761765376" class="videoAction" src="./image/icon_vedio.png" alt="">
+                <img src="./image/icon_voice.png" alt="">
+                <img src="./image/icon_phone.png" alt="">
+              </div>
+            </dd>
+            <dd class="dep-user">
+              <div class="dep-user-info">
+                <div>华设3</div>
+                <div> - </div>
+              </div>
+              <div class="dep-user-action">
+                <img data-code="5269856264912896" class="videoAction" src="./image/icon_vedio.png" alt="">
+                <img src="./image/icon_voice.png" alt="">
+                <img src="./image/icon_phone.png" alt="">
+              </div>
+            </dd>
+          </dl>
+        </div>
+    </div>
+    <div class="video-container only-video" style="visibility: hidden;">
+      <div class="video-content">
+        <div id="vPlayArea"></div>
+        <div class="video-bar">
+          <div class="video-action">结束会议</div>
+        </div>
+      </div>
+      <div class="video-user-content">
+        <div class="video-user-title">参会成员</div>
+        <div class="video-user-list"></div>
+        <div class="video-user-action">
+          <div>全部静音</div>
+          <div>解除全部静音</div>
+        </div>
+      </div>
     </div>
-    <div id="vPlayArea"></div>
 
   </body>
 </html>

main.js

@@ -29,7 +29,7 @@ window.onload = () => {
       }
       // 打开单兵视频
       if (e.data.key === "danbing") {
-        var meeting = new Meeting();
+        const meeting = new Meeting();
         await meeting.getLocalUserInfo();
         const res = await meeting.queryUser(e.data.value);
 
@@ -46,19 +46,52 @@ window.onload = () => {
           channelId: e.data.channelId,
         });
         await meeting.openClient();
+        await meeting.playVideo(meeting.InvitedMembers);
       }
 
-      // 视频会议 人员信息?? 从哪来??
-
+      // 视频会议
       if (e.data === "creatMeeting") {
-        var meeting = new Meeting();
-        await meeting.getLocalUserInfo();
-        // 创建会议
-        meeting.localUserInfo.name = "HD_Meeting";
-        await meeting.creatMeeting();
-        localStorage.setItem("meeting", JSON.stringify(obj));
-      }
+        const el = document.querySelector("#createMeAction");
+        const closeEl = document.querySelector("#closeMeAction");
+        const userEl = document.querySelector(".user-list");
+        const meeting = new Meeting();
+
+        closeEl.addEventListener("click", () => {
+          window.parent.postMessage("closeIframe", "*");
+        });
 
+        // 创建会议并打开窗口
+        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();
+
+          const videoEl = document.querySelector(".video-container");
+          videoEl && (videoEl.style.visibility = "visible");
+        });
+
+        // 添加人员, 并播放视频
+        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();
       }

meeting.js

@@ -108,9 +108,9 @@ Meeting.prototype = {
       });
   },
   //初始化视频窗口实例,先获取自己用户code,再初始化窗口,严格按照封装参数传,别漏了
-  getUserCode() {
+  async getUserCode() {
     let self = this;
-    $.ajax({
+    await $.ajax({
       type: "GET",
       url: setting.URL + "/ras/user/info",
       contentType: "application/json", //如果提交的是json数据类型，则必须有此参数,表示提交的数据类型
@@ -213,7 +213,7 @@ Meeting.prototype = {
     let _this = this;
     _this.InvitedMembers.member = [
       _this.inviteSelf,
-      member,
+      ...(member || []),
       //   {
       //     type: "tandemPhone",
       //     number: _this.outLinenum,
@@ -375,7 +375,7 @@ Meeting.prototype = {
         },
         error: function (data) {},
       });
-    });  
+    });
   },
   /* app拉流 */
   slectOptionmini(userCode) {
@@ -415,8 +415,8 @@ Meeting.prototype = {
     });
   },
   /* 打开客户端 */
-  openClient() {
-    this.getUserCode();
+  async openClient() {
+    await this.getUserCode();
   },
   /* 获取群聊fromName */
   async getLocalUserInfo() {