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.71"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.37.3-alpha.71"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.37.3-alpha.75"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.37.3-alpha.75"></script>
         <script>
             if ((query = window.location.href.indexOf('vlog') != -1)) {
                 var vConsole = new window.VConsole()

src/components/RTC/PageRtcLive.vue

@@ -53,6 +53,7 @@
           @click="onClickShare"
         ></div>
         <div v-if="role == 'leader'" class="members" @click="openMember"></div>
+        <template v-if="role == 'leader'">
         <div
           v-if="!disableMic"
           @click="handleMuteAduio"
@@ -64,14 +65,15 @@
           class="mic_no"
           :class="{ disabled: !audioDeviceId }"
         ></div>
-        <div
+        </template>
+        <!-- <div
           v-if="role == 'leader'"
           @click="handleMuteVideo"
           :class="[
             videoMuted ? 'video_no' : 'video_on',
             videoDeviceId ? '' : 'disabled',
           ]"
-        ></div>
+        ></div> -->
         <div class="exit" @click="openDialog('dialogIndex')"></div>
       </div>
     </div>
@@ -124,16 +126,13 @@
                 <div class="name" v-else>{{ user_info.Nickname }} (我)</div>
               </div>
 
-              <div class="button" v-if="user_info.Role == 'leader'">
-                <!-- <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 class="button" v-if="user_info.Role == 'leader'">
                 <div
                   @click="setAllMuted(!all_mute_mic)"
                   class="micBtn mute_all_mic"
                   :class="{ open_all_mic: all_mute_mic }"
                 ></div>
-              </div>
+              </div> -->
             </div>
 
             <div
@@ -153,20 +152,18 @@
                 </div>
                 <div class="name">{{ i.Nickname }}</div>
               </div>
-              <div class="button" v-if="user_info.Role == 'leader'">
+              <!-- <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="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>
+              </div> -->
             </div>
           </div>
         </div>

src/components/RTC/Trtccom.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="trtccom" v-if="show">
     <Device @switchDevice="switchDevice" @canUseDevice="canUseDevice" />
-    <div class="local" :class="{ disabledlocal: role == 'customer' || !videoDeviceId }" id="local" v-if="isJoined">
+    <div
+      class="local"
+      :class="{ disabledlocal: role == 'customer' || !videoDeviceId }"
+      id="local"
+      v-if="isJoined"
+    >
       <div class="micBox">
-        <img v-if="muteAudioLeader" :src="require('@/assets/images/rtcLive/mic_off@2x.png')" alt="" />
+        <img
+          v-if="muteAudioLeader"
+          :src="require('@/assets/images/rtcLive/mic_off@2x.png')"
+          alt=""
+        />
         <i v-else class="speak_mic"></i>
       </div>
     </div>
@@ -12,22 +21,40 @@
       <div
         class="local"
         :data-role="item.userId_"
-        :class="{ disabledlocal: item.userId_.indexOf('customer') > -1 || !videoDeviceId }"
+        :class="{
+          disabledlocal:
+            item.userId_.indexOf('customer') > -1 || !videoDeviceId,
+        }"
         v-for="item in invitedRemoteStreams"
         :id="item.userId_"
         :key="item.userId_"
       >
         <div class="micBox">
-          <img v-if="muteAudioLeader" :src="require('@/assets/images/rtcLive/mic_off@2x.png')" alt="" />
+          <img
+            v-if="muteAudioLeader"
+            :src="require('@/assets/images/rtcLive/mic_off@2x.png')"
+            alt=""
+          />
           <i v-else class="speak_mic"></i>
         </div>
       </div>
     </template>
 
-    <div class="videoBox userVideo" v-show="props.videoMuted || muteVideoLeader">
-      <img :src="require('@/assets/images/rtcLive/avatar_small@2x.png')" alt="" />
+    <div
+      class="videoBox userVideo"
+      v-show="props.videoMuted || muteVideoLeader"
+      v-if="false"
+    >
+      <img
+        :src="require('@/assets/images/rtcLive/avatar_small@2x.png')"
+        alt=""
+      />
       <div class="micBox">
-        <img v-if="muteAudioLeader" :src="require('@/assets/images/rtcLive/mic_off@2x.png')" alt="" />
+        <img
+          v-if="muteAudioLeader"
+          :src="require('@/assets/images/rtcLive/mic_off@2x.png')"
+          alt=""
+        />
         <i v-else class="speak_mic"></i>
       </div>
     </div>
@@ -37,7 +64,15 @@
 <script setup>
 import TRTC, { Client, LocalStream } from "trtc-js-sdk";
 import { Dialog } from "@/global_components/";
-import { ref, computed, watch, defineEmits, defineProps, nextTick, onUnmounted } from "vue";
+import {
+  ref,
+  computed,
+  watch,
+  defineEmits,
+  defineProps,
+  nextTick,
+  onUnmounted,
+} from "vue";
 import Device from "./trtc/Device";
 import { useStore } from "vuex";
 import browser from "@/utils/browser";
@@ -60,7 +95,13 @@ const isPublished = computed(() => store.getters["rtc/isPublished"]);
 const videoDeviceId = computed(() => store.getters["rtc/videoDeviceId"]);
 
 const initParamsStates = computed(
-  () => !!(store.getters["rtc/sdkAppId"] && store.getters["rtc/secretKey"] && store.getters["rtc/roomId"] && store.getters["rtc/userId"])
+  () =>
+    !!(
+      store.getters["rtc/sdkAppId"] &&
+      store.getters["rtc/secretKey"] &&
+      store.getters["rtc/roomId"] &&
+      store.getters["rtc/userId"]
+    )
 );
 const userSig = computed(() => store.getters["rtc/userSig"]);
 let localClient = "";
@@ -196,6 +237,9 @@ async function handlePublish() {
   if (isPublished.value) {
     return;
   }
+  if (role.value != "leader") {
+    return;
+  }
 
   try {
     await localClient.publish(localStream);
@@ -365,7 +409,9 @@ function handleStreamAdded(event) {
       console.info(`unsubscribe failed: ${error.message_}`);
     });
   } else {
-    console.log(`remote stream added: [${userId}] ID: ${id} type: ${remoteStream.getType()}`);
+    console.log(
+      `remote stream added: [${userId}] ID: ${id} type: ${remoteStream.getType()}`
+    );
     localClient.subscribe(remoteStream).catch((error) => {
       console.info(`subscribe failed: ${error.message_}`);
     });
@@ -378,9 +424,17 @@ async function handleStreamSubscribed(event) {
   if (remoteStream.userId_ == store.getters["rtc/userId"]) {
     return;
   }
-  console.info(remoteStream.userId_, store.getters["rtc/userId"], "handleStreamSubscribedhandleStreamSubscribed.value");
-
-  if (!invitedRemoteStreams.value.some((item) => item.userId_ == remoteStream.userId_)) {
+  console.info(
+    remoteStream.userId_,
+    store.getters["rtc/userId"],
+    "handleStreamSubscribedhandleStreamSubscribed.value"
+  );
+
+  if (
+    !invitedRemoteStreams.value.some(
+      (item) => item.userId_ == remoteStream.userId_
+    )
+  ) {
     invitedRemoteStreams.value.push(remoteStream);
   }
 
@@ -413,7 +467,9 @@ function handleStreamRemoved(event) {
 function handleStreamUpdated(event) {
   const remoteStream = event.stream;
   const userId = remoteStream.getUserId();
-  console.log(`RemoteStream updated: [${userId}] audio:${remoteStream.hasAudio()} video:${remoteStream.hasVideo()}`);
+  console.log(
+    `RemoteStream updated: [${userId}] audio:${remoteStream.hasAudio()} video:${remoteStream.hasVideo()}`
+  );
 }
 
 let switchDevice = async ({ videoId, audioId }) => {
@@ -453,7 +509,8 @@ let canUseDevice = () => {
     left: 20px;
     border-radius: 50%;
     overflow: hidden;
-    background: url(~@/assets/images/rtcLive/avatar_small@2x.png) center center no-repeat;
+    background: url(~@/assets/images/rtcLive/avatar_small@2x.png) center center
+      no-repeat;
   }
   .videoBox {
     width: 72px;

src/components/RTC/chat/chat.vue

@@ -30,6 +30,7 @@ const props = defineProps({
 #chat {
   // width: 7.03rem;
   width: 50%;
+  max-width: 4rem;
   max-height: 4.58rem;
   overflow: auto;
   position: fixed;

src/components/RTC/index.vue

@@ -79,7 +79,7 @@ const confirmDialog = async () => {
 const closeCreated = (str, link) => {
   store.commit("showShoppingguide", false);
   showCreated.value = false;
-  showguide();
+  //showguide();
   if (browser.getURLParam("role")) {
     let tempUrl = window.location.href;
     ["mode", "name", "role", "roomId", "vruserId"].forEach((item) => {

src/components/RTC/trtc/Device.vue

@@ -52,7 +52,7 @@ const updateDevice = async () => {
 
 let quxian = { audio: true };
 
-console.log(quxian, '--------quxian-------');
+console.log(quxian, "--------quxian-------");
 
 navigator.mediaDevices
   .getUserMedia(quxian)
@@ -72,7 +72,7 @@ navigator.mediaDevices.ondevicechange = updateDevice;
 
 const handleDeviceChange = () => {
   emit("switchDevice", {
-    videoId: '',
+    videoId: "",
     audioId: store.audioDeviceId,
   });
 };

vue.config.js

@@ -11,7 +11,7 @@ module.exports = defineConfig({
   },
   devServer: {
     // port: 443,
-    https: false,
+    https: true,
     // disableHostCheck: true,
     headers: {
       "Cache-Control": "no-store",