daikan-international/src/components/chatRoom/camera.vue

<template>
  <div
    :id="cameraBoxId"
    class="camera_box"
    v-show="
      isLeader &&
      isRTCJoined &&
      isPanoramaMode &&
      hosterhasVideo &&
      globalVideoEnable &&
      !muteVideoLeader
    "
  >
    <!--  -->
    <span class="micBox">
      <i class="speak_mic" v-if="!roomLeader?.IsMuted"></i>
      <i class="speak_mic_off" v-else></i>
    </span>
  </div>
  <!-- :id="cameraRemoteBoxId" -->
  <!-- muteVideoLeader：{{ muteVideoLeader }} -->
  <div
    id="cameraRemoteBox"
    class="camera_box"
    v-show="
      !isLeader &&
      isRTCJoined &&
      roomLeader &&
      isPanoramaMode &&
      !muteVideoLeader &&
      globalVideoEnable
    "
  >
    <span class="micBox">
      <i class="speak_mic" v-if="!roomLeader?.IsMuted"></i>
      <i class="speak_mic_off" v-else></i>
    </span>
  </div>
</template>
<script lang="ts" setup>
  import { computed, onMounted } from 'vue';
  import { useAppStore } from '/@/store/modules/app';
  import { useRtcSdk } from '/@/hooks/useTRTC';
  import { useRtcStore } from '/@/store/modules/rtc';

  const rtcStore = useRtcStore();
  const appStore = useAppStore();

  const isRTCJoined = computed(() => rtcStore.isRTCJoined);
  const isLeader = computed(() => rtcStore.isLeader);
  const roomLeader = computed(() => rtcStore.getRoomLeader());
  const cameraBoxId = computed(() => 'camera_box_' + rtcStore.userId);
  // const cameraRemoteBoxId = computed(() => 'camera_remote_box_' + rtcStore.userId);
  const isPanoramaMode = computed(() => appStore.mode === 'panorama');
  const { muteVideoLeader, globalVideoEnable } = useRtcSdk();
  const hosterhasVideo = computed(() => rtcStore.isHasCamera);

  // const remoteStreams = computed(() => rtcStore.remoteStreams);
  // console.log('hosterhasVideo', unref(hosterhasVideo));
  onMounted(() => {});
</script>
<style lang="scss">
  .camera_box {
    width: 1.94rem;
    height: 1.94rem;
    position: fixed;
    top: 1.59rem;
    left: 0.53rem;
    overflow: hidden;
    z-index: 10000;
    border-radius: 50%;
    video {
      display: none;
    }
    video:last-child {
      display: block;
    }
    > div {
      background-color: transparent !important;
      position: absolute !important;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10;
    }
    .micBox {
      width: 100%;
      height: 0.44rem;
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 0;
      bottom: 0 !important;
      top: unset;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      .speak_mic {
        display: block;
        background-size: 720px auto;
        width: 12px;
        height: 12px;
        background-image: url(/@/assets/images/rtcLive/speed.png);
        // width: 0.69rem;
        // height: 0.69rem;
        animation: myAnimation 3s steps(59) infinite;
      }
      .speak_mic_off {
        display: block;
        background-size: center center;
        background-size: contain;
        width: 12px;
        height: 12px;
        background-image: url(/@/assets/images/rtcLive/scene_mic_off@2x.png);
      }
    }
  }
  @keyframes myAnimation {
    0% {
      background-position: 0px 0px;
    }

    100% {
      background-position: -708px 0px;
    }
  }
</style>