update

src/components/RTC/PageRtcLive.vue

@@ -4,10 +4,9 @@
       <div class="members"></div>
       <span>{{ user_list.length }}观看</span>
     </div>
-    <chat  v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat>
+    <chat v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat>
 
-    <Trtccom ref="trtccom$" :audioMuted="audioMuted" :videoMuted="videoMuted" v-if="showTest && isJoined" />
-    
+    <Trtccom :audioMuted="audioMuted" :videoMuted="videoMuted" v-if="isJoined" />
 
     <div class="contorlBar" v-if="!showInput">
       <div v-if="connectStatus == 1" :class="{ disabled: !user_info.IsWords }" class="saySomething" @click="onFocus">
@@ -67,7 +66,7 @@
                 <!-- <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="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>
 
@@ -148,7 +147,6 @@ const audioMuted = ref(false);
 const videoMuted = ref(false);
 
 const socket = computed(() => store.getters["rtc/socket"]);
-const showTest = ref(browser.getURLParam("test"));
 
 const myVideoShow = ref(false);
 const userVideoShow = ref(false);
@@ -173,9 +171,7 @@ const audioDevices = ref([1]);
 const videoDevices = ref([1]);
 const disableMic = ref(false);
 const chatShow = ref(true);
-const all_mute_mic = ref(true);
-
-const trtccom$ = ref(null);
+const all_mute_mic = ref(false);
 
 const userGetOut = (item, i) => {
   socket.value &&
@@ -195,20 +191,52 @@ const setUserWords = (res) => {
   }
 };
 
-const handleMuteVideo = () =>{
-  videoMuted.value=!videoMuted.value
-}
+const handleMuteVideo = () => {
+  videoMuted.value = !videoMuted.value;
+};
 
-const handleMuteAduio = () =>{
-  audioMuted.value=!audioMuted.value
-}
+const handleMuteAduio = () => {
+  audioMuted.value = !audioMuted.value;
+};
 
 const setUserMuted = (res) => {
-  if (res.userId == user_info.value.UserId) {
+  if(res.userId){
+    if (res.userId == user_info.value.UserId) {
+      user_info.value.IsMuted = res.muted;
+      disableMic.value = res.muted;
+      audioMuted.value = res.muted;
+    } 
+  }else{
+    onAllMuted(res)
+  }
+
+};
+
+const setAllMuted = (data) => {
+  console.log(data,'IsMuted');
+  socket.value.emit("action", { type: "users-muted", muted: data});
+};
+
+
+const onAllMuted = (res) => {
+
+  user_list.value = res.members.reduce(function (tempArr, item) {
+    if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {
+      tempArr.push(item);
+    }
+    return tempArr;
+  }, []);
+
+  if (role.value == "leader") {
+    all_mute_mic.value = res.muted;
+  }
+
+  user_list.value.forEach((item) => {
     user_info.value.IsMuted = res.muted;
     disableMic.value = res.muted;
     audioMuted.value = res.muted;
-  }
+    item.IsMuted = res.muted;
+  });
 };
 
 //用戶加入
@@ -226,7 +254,6 @@ const setUserJoin = async (res) => {
   if (res.user.Role == "leader") {
     name = "主持人";
     Dialog.toast({ content: `主持人进入房间` });
-
   }
   let data = {
     role: res.user.Role,
@@ -345,6 +372,8 @@ const onMemberMuted = (item) => {
   socket.value.emit("action", { type: "users-muted", muted: item.IsMuted, userId: item.UserId });
 };
 
+
+
 const onMemberLeave = (res) => {
   console.log("有人离开了", res);
   user_list.value = res.members.reduce(function (tempArr, item) {
@@ -375,7 +404,7 @@ const startFollow = (app) => {
   app.Connect.follow.start({ follow: role.value == "customer" });
 
   store.commit("rtc/setUserId", browser.getURLParam("userId") || `user_${Math.floor(Math.random() * 100000000)}`);
-  store.commit("rtc/setRoomId", browser.getURLParam("roomId") || Math.floor(Math.random() * 100000));
+  store.commit("rtc/setRoomId", browser.getURLParam("roomId") || Math.floor(Math.random() * 100000000));
 
   socket.value.on("connect", () => {
     socket.value.emit("join", {

src/components/RTC/trtc/Device.vue

@@ -3,15 +3,17 @@
 </template>
 
 <script setup>
-import { defineEmits, computed } from "vue";
+import { defineEmits, computed,ref } from "vue";
 import TRTC from "trtc-js-sdk";
 import { useStore } from "vuex";
 import { Dialog } from "@/global_components/";
+import browser from "@/utils/browser";
 
 const store = useStore();
 
 const videoDeviceId = computed(() => store.getters["rtc/videoDeviceId"]);
 const audioDeviceId = computed(() => store.getters["rtc/audioDeviceId"]);
+const role = ref(browser.getURLParam("role"));
 
 const emit = defineEmits(["switchDevice","canUseDevice"]);
 
@@ -41,7 +43,7 @@ const updateDevice = async () => {
 };
 
 navigator.mediaDevices
-  .getUserMedia({ audio: true, video: true })
+  .getUserMedia({ audio: true, video: role.value == "customer" })
   .then((stream) => {
     stream.getTracks().forEach((track) => {
       track.stop();
@@ -51,7 +53,7 @@ navigator.mediaDevices
   })
   .catch((error) => {
     console.log(error,'error');
-    Dialog.toast({ content: `请授权您的麦克风和摄像头权限`, type: "error" });
+    Dialog.toast({ content: `请授权您的麦克风${role.value == "leader"?'和摄像头':''}权限`, type: "error" });
   });
 
 navigator.mediaDevices.ondevicechange = updateDevice;