feat: 优化带看问题

public/index.html

@@ -26,8 +26,8 @@
         <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/socket.io.min.js"></script>
         <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/zmjm.min.js"></script>
         <script src="<%= VUE_APP_STATIC_DIR %>/static/lib/jweixin-1.6.0.js"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.37.3-alpha.52"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.37.3-alpha.52"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.37.3-alpha.60"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.37.3-alpha.60"></script>
         <script>
             if ((query = window.location.href.indexOf('vlog') != -1)) {
                 var vConsole = new window.VConsole()

src/components/RTC/PageRtcLive.vue

@@ -6,42 +6,101 @@
     </div>
     <chat v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat>
 
-    <Trtccom :audioMuted="audioMuted" :videoMuted="videoMuted" v-if="isJoined" />
+    <Trtccom
+      :audioMuted="audioMuted"
+      :videoMuted="videoMuted"
+      v-if="isRunRTC"
+    />
 
     <div class="contorlBar" v-if="!showInput">
-      <div v-if="connectStatus == 1" :class="{ disabled: !user_info.IsWords }" class="saySomething" @click="onFocus">
+      <div
+        v-if="connectStatus == 1"
+        :class="{ disabled: !user_info.IsWords }"
+        class="saySomething"
+        @click="onFocus"
+      >
         <!-- <i class="speakIcon"
            :class="{'dis':!user_info.IsWords}"></i> -->
         <span v-if="user_info.IsWords">说点什么</span>
         <span v-if="!user_info.IsWords">已被禁言</span>
 
-        <div class="disSpeakBtn" @click.stop="chatShow = !chatShow" :class="{ dis: !chatShow }"></div>
+        <div
+          class="disSpeakBtn"
+          @click.stop="chatShow = !chatShow"
+          :class="{ dis: !chatShow }"
+        ></div>
+      </div>
+      <div style="text-align: right; width: 100%" v-if="connectStatus == 0">
+        连接中...
       </div>
-      <div style="text-align: right; width: 100%" v-if="connectStatus == 0">连接中...</div>
       <div v-if="connectStatus == 1" class="contorl_btn">
-        <div v-if="isBrushes && user_info.Role == 'leader'" @click="onDrawUndo" class="brushesBack" :class="{ disabled: !canUndo }"></div>
-        <div v-if="user_info.Role == 'leader'" @click="onDraw(!isBrushes)" :class="{ brushesed: isBrushes }" class="brushes"></div>
-
-        <div v-if="user_list.length < 5" class="invitation" @click="onClickShare"></div>
+        <div
+          v-if="isBrushes && user_info.Role == 'leader'"
+          @click="onDrawUndo"
+          class="brushesBack"
+          :class="{ disabled: !canUndo }"
+        ></div>
+        <div
+          v-if="user_info.Role == 'leader'"
+          @click="onDraw(!isBrushes)"
+          :class="{ brushesed: isBrushes }"
+          class="brushes"
+        ></div>
+
+        <div
+          v-if="user_list.length < 50"
+          class="invitation"
+          @click="onClickShare"
+        ></div>
         <div v-if="role == 'leader'" class="members" @click="openMember"></div>
-        <div v-if="!disableMic" @click="handleMuteAduio" :class="{ mic_off: audioMuted, disabled: !audioDeviceId }" class="mic_on"></div>
-        <div v-if="disableMic" class="mic_no" :class="{ disabled: !audioDeviceId }"></div>
-        <div v-if="role == 'leader'" @click="handleMuteVideo" :class="[videoMuted ? 'video_no' : 'video_on', videoDeviceId ? '' : 'disabled']"></div>
+        <div
+          v-if="!disableMic"
+          @click="handleMuteAduio"
+          :class="{ mic_off: audioMuted, disabled: !audioDeviceId }"
+          class="mic_on"
+        ></div>
+        <div
+          v-if="disableMic"
+          class="mic_no"
+          :class="{ disabled: !audioDeviceId }"
+        ></div>
+        <div
+          v-if="role == 'leader'"
+          @click="handleMuteVideo"
+          :class="[
+            videoMuted ? 'video_no' : 'video_on',
+            videoDeviceId ? '' : 'disabled',
+          ]"
+        ></div>
         <div class="exit" @click="openDialog('dialogIndex')"></div>
       </div>
     </div>
     <div class="layer" v-if="showInput" @click="closeInput">
       <div class="inputBox" @click.stop>
         <div class="msgBox">
-          <input id="input_msg" type="text" maxlength="200" v-model.trim="text" :placeholder="`说点什么~`" />
-          <span class="iconsend_icon" :class="{ disable: text == '' }" @click.stop="sendText">发送</span>
+          <input
+            id="input_msg"
+            type="text"
+            maxlength="200"
+            v-model.trim="text"
+            :placeholder="`说点什么~`"
+          />
+          <span
+            class="iconsend_icon"
+            :class="{ disable: text == '' }"
+            @click.stop="sendText"
+            >发送</span
+          >
         </div>
       </div>
     </div>
 
     <!-- 成員 -->
     <div class="layer" v-if="showMember" @click.self="closeMember">
-      <div class="memberContent animated" :class="animateActive ? 'fadeInUpBig' : 'fadeOutDownBig'">
+      <div
+        class="memberContent animated"
+        :class="animateActive ? 'fadeInUpBig' : 'fadeOutDownBig'"
+      >
         <div class="blurBox"></div>
         <div class="content">
           <div class="memberHeader">
@@ -52,9 +111,16 @@
             <div class="memberItem">
               <div class="userMsg">
                 <div class="avatar">
-                  <img :src="require('@/assets/images/rtcLive/avatar_small@2x.png')" alt="" />
+                  <img
+                    :src="
+                      require('@/assets/images/rtcLive/avatar_small@2x.png')
+                    "
+                    alt=""
+                  />
+                </div>
+                <div class="name" v-if="user_info.Role == 'leader'">
+                  {{ user_info.Nickname }} (主持人,我)
                 </div>
-                <div class="name" v-if="user_info.Role == 'leader'">{{ user_info.Nickname }} (主持人,我)</div>
                 <div class="name" v-else>{{ user_info.Nickname }} (我)</div>
               </div>
 
@@ -62,22 +128,44 @@
                 <!-- <div class="outBtn iconfont iconremove"></div> -->
                 <!-- <div v-if="audioDevices.length>0" class="micBtn iconfont" @click="changeMedia('audio',hideMic)" :class="user_info.muted ?'iconmic_off':'iconmic_on'"></div>
                 <div v-else class="micBtn iconfont iconmic_off"></div> -->
-                <div @click="setAllMuted(!all_mute_mic)" class="micBtn mute_all_mic" :class="{ open_all_mic: all_mute_mic }"></div>
+                <div
+                  @click="setAllMuted(!all_mute_mic)"
+                  class="micBtn mute_all_mic"
+                  :class="{ open_all_mic: all_mute_mic }"
+                ></div>
               </div>
             </div>
 
-            <div v-show="user_info.UserId != i.UserId && i.Role != 'leader'" class="memberItem" v-for="(i, idx) in user_list" :key="idx">
+            <div
+              v-show="user_info.UserId != i.UserId && i.Role != 'leader'"
+              class="memberItem"
+              v-for="(i, idx) in user_list"
+              :key="idx"
+            >
               <div class="userMsg">
                 <div class="avatar">
-                  <img :src="require('@/assets/images/rtcLive/avatar_small@2x.png')" alt="" />
+                  <img
+                    :src="
+                      require('@/assets/images/rtcLive/avatar_small@2x.png')
+                    "
+                    alt=""
+                  />
                 </div>
                 <div class="name">{{ i.Nickname }}</div>
               </div>
               <div class="button" v-if="user_info.Role == 'leader'">
-                <div class="micBtn" :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'" @click="userCanSpeak(i)"></div>
+                <div
+                  class="micBtn"
+                  :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'"
+                  @click="userCanSpeak(i)"
+                ></div>
 
                 <!-- <div class="outBtn icon_remove" @click="userGetOut(i, idx)"></div> -->
-                <div class="micBtn" :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'" @click="onMemberMuted(i)"></div>
+                <div
+                  class="micBtn"
+                  :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'"
+                  @click="onMemberMuted(i)"
+                ></div>
               </div>
             </div>
           </div>
@@ -88,13 +176,27 @@
 
   <teleport :to="`#app`">
     <div v-if="showShare" @click="showShare = false" class="sharetip">
-      <img @click.stop :style="`right:${isMP ? '16%' : '6%'}`" :src="require('@/assets/images/icon/img_scene_share.png')" alt="" />
+      <img
+        @click.stop
+        :style="`right:${isMP ? '16%' : '6%'}`"
+        :src="require('@/assets/images/icon/img_scene_share.png')"
+        alt=""
+      />
     </div>
   </teleport>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, watch, defineEmits, ref, reactive, computed, nextTick } from "vue";
+import {
+  onMounted,
+  onUnmounted,
+  watch,
+  defineEmits,
+  ref,
+  reactive,
+  computed,
+  nextTick,
+} from "vue";
 import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 import { Dialog } from "@/global_components/";
@@ -116,7 +218,11 @@ let jumpNewScene = (sceneFirstView) => {
   if (!browser.hasURLParam("pose")) {
     url += `&${sceneFirstView.sceneview}`;
   } else {
-    url = browser.replaceQueryString(url, "pose", sceneFirstView.sceneview.replace("pose=", ""));
+    url = browser.replaceQueryString(
+      url,
+      "pose",
+      sceneFirstView.sceneview.replace("pose=", "")
+    );
   }
 
   url = browser.replaceQueryString(url, "m", sceneFirstView.num);
@@ -146,7 +252,10 @@ let getUrl = (href, queryArr) => {
     if (!browser.hasURLParam(item.key)) {
       let ttt = href.split("index.html?");
       href = `${ttt[0]}index.html?${item.key}=${item.val}&${ttt[1]}`;
-      console.log(href, "------index.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.html----------");
+      console.log(
+        href,
+        "------index.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.html----------"
+      );
     } else {
       href = browser.replaceQueryString(href, item.key, item.val);
     }
@@ -182,6 +291,8 @@ const roomId = computed(() => store.getters["rtc/roomId"]);
 
 const isJoined = ref(false);
 
+const isRunRTC = ref(false);
+
 const paint = reactive({});
 
 const chatList = ref([]);
@@ -200,22 +311,7 @@ const tags = computed(() => {
 });
 
 const onClickShare = () => {
-  if (browser.detectWeixin()) {
-    //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
-    wx.miniProgram.getEnv((res) => {
-      showShare.value = true;
-
-      if (res.miniprogram) {
-        isMP.value = true;
-        //在小程序里
-      } else {
-        // 不在小程序里
-        isMP.value = false;
-      }
-    });
-  } else {
-    openDialog("dialogShare", shareLink.value);
-  }
+  openDialog("dialogShare", shareLink.value);
 };
 
 const userGetOut = (item, i) => {
@@ -233,7 +329,11 @@ const userGetOut = (item, i) => {
 const setUserWords = (res) => {
   if (res.userId == user_info.value.UserId) {
     user_info.value.IsWords = res.words;
-    Dialog.toast({ content: !user_info.value.IsWords ? `主持人設置了禁言` : `主持人已解除禁言` });
+    Dialog.toast({
+      content: !user_info.value.IsWords
+        ? `主持人设置了禁言`
+        : `主持人已解除禁言`,
+    });
   }
 };
 
@@ -244,7 +344,11 @@ const handleMuteVideo = () => {
 const handleMuteAduio = () => {
   audioMuted.value = !audioMuted.value;
   if (role.value == "leader") {
-    socket.value.emit("action", { type: "users-muted", muted: audioMuted.value, userId: user_info.value.UserId });
+    socket.value.emit("action", {
+      type: "users-muted",
+      muted: audioMuted.value,
+      userId: user_info.value.UserId,
+    });
   }
 };
 
@@ -252,7 +356,11 @@ const setUserMuted = (res) => {
   if (res.userId) {
     if (res.userId == user_info.value.UserId && role.value == "customer") {
       user_info.value.IsMuted = res.muted;
-      Dialog.toast({ content: !user_info.value.IsMuted ? `主持人设置了开麦` : `主持人设置了静音` });
+      Dialog.toast({
+        content: !user_info.value.IsMuted
+          ? `主持人设置了开麦`
+          : `主持人设置了静音`,
+      });
       disableMic.value = res.muted;
       audioMuted.value = res.muted;
     }
@@ -282,7 +390,11 @@ const onAllMuted = (res) => {
     user_info.value.IsMuted = res.muted;
     item.IsMuted = res.muted;
     if (role.value == "customer") {
-      Dialog.toast({ content: !user_info.value.IsMuted ? `主持人設置了开麦` : `主持人設置了静音` });
+      Dialog.toast({
+        content: !user_info.value.IsMuted
+          ? `主持人设置了开麦`
+          : `主持人设置了静音`,
+      });
       disableMic.value = res.muted;
       audioMuted.value = res.muted;
     }
@@ -305,7 +417,7 @@ const setUserJoin = async (res) => {
     name = "主持人";
     Dialog.toast({ content: `主持人进入房间` });
     socket.value.emit("action", { type: "user-init" });
-  } 
+  }
   let data = {
     role: res.user.Role,
     mode: mode.value,
@@ -332,7 +444,10 @@ const onDrawUndo = async () => {
 const onDraw = async (status) => {
   isBrushes.value = status;
   if (isBrushes.value) {
-    await getApp().Connect.paint.show({ role: role.value, paint: role.value == "leader" ? true : false });
+    await getApp().Connect.paint.show({
+      role: role.value,
+      paint: role.value == "leader" ? true : false,
+    });
     if (role.value == "leader") {
       socket.value.emit("action", { type: "user-paint", open: true });
     }
@@ -420,7 +535,11 @@ const openDialog = (str, link) => {
 
 const onMemberMuted = (item) => {
   item.IsMuted = !item.IsMuted;
-  socket.value.emit("action", { type: "users-muted", muted: item.IsMuted, userId: item.UserId });
+  socket.value.emit("action", {
+    type: "users-muted",
+    muted: item.IsMuted,
+    userId: item.UserId,
+  });
 };
 
 const onMemberLeave = async (res) => {
@@ -452,7 +571,11 @@ const onMemberLeave = async (res) => {
 
 const userCanSpeak = (item) => {
   item.IsWords = !item.IsWords;
-  socket.value.emit("action", { type: "users-words", words: item.IsWords, userId: item.UserId });
+  socket.value.emit("action", {
+    type: "users-words",
+    words: item.IsWords,
+    userId: item.UserId,
+  });
 };
 
 const onGetOuT = (data) => {
@@ -466,7 +589,9 @@ watch(
   user_list,
   () => {
     if (role.value == "leader") {
-      all_mute_mic.value = !user_list.value.some((item) => !item.IsMuted && item.Role == "customer");
+      all_mute_mic.value = !user_list.value.some(
+        (item) => !item.IsMuted && item.Role == "customer"
+      );
     }
   },
   {
@@ -477,8 +602,16 @@ watch(
 const startFollow = (app) => {
   app.Connect.follow.start({ follow: role.value == "customer" });
 
-  store.commit("rtc/setUserId", browser.getURLParam("vruserId") || `user_${role.value}${Math.floor(Math.random() * 100000000)}`);
-  store.commit("rtc/setRoomId", browser.getURLParam("roomId") || `room_${Math.floor(Math.random() * 100000000)}`);
+  store.commit(
+    "rtc/setUserId",
+    browser.getURLParam("vruserId") ||
+      `user_${role.value}${Math.floor(Math.random() * 100000000)}`
+  );
+  store.commit(
+    "rtc/setRoomId",
+    browser.getURLParam("roomId") ||
+      `room_${Math.floor(Math.random() * 100000000)}`
+  );
 
   socket.value.on("connect", (e) => {
     socket.value.emit("join", {
@@ -498,7 +631,7 @@ const startFollow = (app) => {
       return tempArr;
     }, []);
 
-    if (meblist.length > 5 && role.value == "customer") {
+    if (meblist.length > 50 && role.value == "customer") {
       Dialog.toast({ content: `房间已满员` });
       emit("closeSocket");
       return;
@@ -507,7 +640,10 @@ const startFollow = (app) => {
     connectStatus.value = 1;
     if (role.value == "customer") {
       socket.value.emit("action", { type: "ask-currentscene" });
-      socket.value.emit("action", { type: "user-init" });
+      setTimeout(() => {
+        socket.value.emit("action", { type: "user-init" });  
+      }, 1500);
+      
       if (data.user.IsMuted) {
         disableMic.value = true;
         audioMuted.value = true;
@@ -520,6 +656,10 @@ const startFollow = (app) => {
 
     isJoined.value = true;
 
+    setTimeout(() => {
+      isRunRTC.value = true
+    }, 3000);
+
     user_info.value = data.user;
     user_list.value = meblist;
 
@@ -547,7 +687,6 @@ const startFollow = (app) => {
       },
     ]);
 
-  
     let tmp = "";
 
     if (user_info.value.Role == "leader") {
@@ -569,13 +708,13 @@ const startFollow = (app) => {
         },
       ]);
     }
-    
+
     store.commit("rtc/setRole", user_info.value.Role);
     history.replaceState(null, null, tmp);
   });
 
   socket.value.on("action", (data) => {
-    console.log(data,'=============');
+    console.log(data, "=============");
     if (data.type == "error") {
       Dialog.toast({ content: `房间未找到`, type: "error" });
       emit("closeSocket");
@@ -636,7 +775,6 @@ const startFollow = (app) => {
         });
       }
     } else if (data.type == "ask-currentscene") {
-      console.log(111111111);
       if (role.value == "leader") {
         socket.value.emit("action", {
           type: "answer-currentscene",
@@ -649,9 +787,13 @@ const startFollow = (app) => {
     } else if (data.type == "answer-currentscene") {
       if (role.value == "customer") {
         if (data.data.scene != browser.getURLParam("m")) {
-          let url1 = browser.replaceQueryString(window.location.href, "m", data.data.scene);
+          let url1 = browser.replaceQueryString(
+            window.location.href,
+            "m",
+            data.data.scene
+          );
           let url = browser.replaceQueryString(url1, "pose", data.data.pose);
-          location.replace(url)
+          location.replace(url);
         }
       }
     }
@@ -671,10 +813,37 @@ const startFollow = (app) => {
     }
   });
 };
-
+let count = 0;
+let mod = 0;
+let width = 0;
 let onfollowData = (data) => {
   if (isJoined.value) {
-    socket.value.emit("sync", data);
+    if (data.type == "rotate") {
+      if (count > 100000) {
+        count = 0;
+      }
+      count++;
+      width = window.innerWidth;
+      if (width < 600) {
+        mod = 6;
+      } else if (width < 1024) {
+        mod = 4;
+      } else if (width < 1433) {
+        mod = 2;
+      } else {
+        mod = 0;
+      }
+      if (mod) {
+        if (count % mod == 0) {
+          console.log(count);
+          socket.value.emit("sync", data);
+        }
+      } else {
+        socket.value.emit("sync", data);
+      }
+    } else {
+      socket.value.emit("sync", data);
+    }
   }
 };
 
@@ -769,11 +938,13 @@ onUnmounted(async () => {
       .disSpeakBtn {
         width: 0.533333rem;
         height: 0.533333rem;
-        background: url(~@/assets/images/rtcLive/pop-up_screen_on@2x.png) no-repeat;
+        background: url(~@/assets/images/rtcLive/pop-up_screen_on@2x.png)
+          no-repeat;
         background-size: 100% 100%;
         cursor: pointer;
         &.dis {
-          background: url(~@/assets/images/rtcLive/pop-up_screen_off@2x.png) no-repeat;
+          background: url(~@/assets/images/rtcLive/pop-up_screen_off@2x.png)
+            no-repeat;
           background-size: 100% 100%;
         }
       }

src/components/RTC/dialog/index.vue

@@ -29,11 +29,11 @@ const socket = computed(() => store.getters["rtc/socket"]);
 const props = defineProps({
   title: {
     type: String,
-    default: "溫馨提示",
+    default: "温馨提示",
   },
   desc: {
     type: String,
-    default: "是否結束帶看？",
+    default: "是否结束帶看？",
   },
 });