音量が100%以上にできるように

src/components/Main/MainView/QallView/AudioTrack.vue

@@ -7,28 +7,40 @@
 }>()
 const audioElement = useTemplateRef<HTMLMediaElement>('audioElement')
 const volume = ref(1)
+const audioContext = new AudioContext()
+const gainNode = audioContext.createGain()
+gainNode.gain.value = 1
 
 watchEffect(() => {
   if (audioElement.value) {
-    audioElement.value.volume = volume.value
+    gainNode.gain.value = volume.value
   }
 })
 
 onMounted(() => {
   if (audioElement.value) {
+    // chromeだと一回要素に入れないと上手く再生してくれない
     trackInfo.trackPublication?.track?.attach(audioElement.value)
+    if (trackInfo.trackPublication?.track?.mediaStream) {
+      audioContext
+        .createMediaStreamSource(trackInfo.trackPublication?.track?.mediaStream)
+        .connect(gainNode)
+        .connect(audioContext.destination)
+      audioElement.value.muted = true
+    }
   }
 })
 
 onUnmounted(() => {
   if (audioElement.value) {
     trackInfo.trackPublication?.track?.detach(audioElement.value)
+    audioContext.close()
   }
 })
 </script>
 
 <template>
   <div>{{ trackInfo.participantIdentity }}</div>
   <audio :id="trackInfo.trackPublication?.trackSid" ref="audioElement"></audio>
-  <input v-model="volume" type="range" min="0" max="1" step="0.01" />
+  <input v-model="volume" type="range" min="0" max="3" step="0.01" />
 </template>

src/components/Main/MainView/QallView/DanmakuContainer.vue

@@ -125,7 +125,7 @@ onMounted(() => {
 .danmakuContainer {
   pointer-events: none;
   width: 100%;
-  height: 100%; /* 適切な高さを設定 */
+  height: 100%;
   position: absolute;
   bottom: 0;
   left: 0;

src/components/Main/MainView/QallView/QallMessageView.vue

@@ -1,12 +1,15 @@
 <template>
-  <div :class="$style.container">
+  <div
+    :class="$style.container"
+    :data-is-not-messages-show="$boolAttr(!isMessageShow)"
+  >
     <scroll-loading-bar
       :class="$style.loadingBar"
       :show="isLoading && isMessageShow"
     />
     <transition name="fade-bottom" mode="out-in">
       <messages-scroller
-        v-show="isMessageShow"
+        v-if="isMessageShow"
         ref="scrollerEle"
         :message-ids="messageIds"
         :is-reached-end="isReachedEnd"
@@ -31,26 +34,28 @@
         </template>
       </messages-scroller>
     </transition>
-    <FormButton
-      label="メッセージを表示"
-      @click="
-        () => {
-          if (isMessageShow) {
-            isMessageShow = false
-            toNewMessage('smooth')
-          } else {
-            isMessageShow = true
-            nextTick(() => toNewMessage())
+    <div :class="$style.uiElement">
+      <FormButton
+        label="メッセージを表示"
+        @click="
+          () => {
+            if (isMessageShow) {
+              isMessageShow = false
+              toNewMessage('smooth')
+            } else {
+              isMessageShow = true
+              nextTick(() => toNewMessage())
+            }
           }
-        }
-      "
-    />
-    <message-input
-      :channel-id="channelId"
-      :typing-users="typingUsers"
-      :show-to-new-message-button="showToNewMessageButton"
-      @click-to-new-message-button="toNewMessage"
-    />
+        "
+      />
+      <message-input
+        :channel-id="channelId"
+        :typing-users="typingUsers"
+        :show-to-new-message-button="showToNewMessageButton"
+        @click-to-new-message-button="toNewMessage"
+      />
+    </div>
   </div>
 </template>
 
@@ -122,8 +127,11 @@
   flex-direction: column;
   justify-content: end;
   position: relative;
-  height: 100%;
   width: 100%;
+  height: 100%;
+  &[data-is-not-messages-show] {
+    pointer-events: none;
+  }
 }
 
 .loadingBar {
@@ -146,4 +154,7 @@
   margin: 4px 0;
   contain: content;
 }
+.uiElement {
+  pointer-events: all;
+}
 </style>

src/components/Main/MainView/QallView/ScreenShareComponent.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue'
 import { useQall } from '/@/composables/qall/useQall'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
+import AudioTrack from './AudioTrack.vue'
+import VideoTrack from './VideoTrack.vue'
 
 const { trackInfo, audioTrackInfo, participantIdentity } = defineProps<{
   trackInfo: TrackInfo
@@ -12,25 +14,16 @@
 const { removeVideoTrack } = useQall()
 
 const videoElement = useTemplateRef<HTMLVideoElement>('videoElement')
-const audioElement = useTemplateRef<HTMLAudioElement>('audioElement')
-const volume = ref(1)
-watchEffect(() => {
-  if (audioElement.value) {
-    audioElement.value.volume = volume.value
-  }
-})
 
 onMounted(() => {
-  if (videoElement.value && audioElement.value) {
+  if (videoElement.value) {
     trackInfo.trackPublication?.track?.attach(videoElement.value)
-    audioTrackInfo?.trackPublication?.track?.attach(audioElement.value)
   }
 })
 
 onUnmounted(() => {
-  if (videoElement.value && audioElement.value) {
+  if (videoElement.value) {
     trackInfo.trackPublication?.track?.detach(videoElement.value)
-    audioTrackInfo?.trackPublication?.track?.detach(audioElement.value)
   }
 })
 </script>
@@ -40,24 +33,11 @@
     <div>
       <p>{{ participantIdentity }}</p>
     </div>
-    <video
-      v-if="trackInfo.trackPublication"
-      :id="trackInfo.trackPublication.trackSid"
-      ref="videoElement"
-      :class="$style.video"
-    ></video>
-    <audio
+    <VideoTrack v-if="trackInfo.trackPublication" :track-info="trackInfo" />
+    <AudioTrack
       v-if="audioTrackInfo?.trackPublication"
-      :id="audioTrackInfo.trackPublication.trackSid"
-      ref="audioElement"
-    ></audio>
-    <input v-model="volume" type="range" min="0" max="1" step="0.01" />
-    <button
-      v-if="!trackInfo.isRemote && trackInfo.trackPublication"
-      @click="removeVideoTrack(trackInfo.trackPublication)"
-    >
-      Remove Screen Share
-    </button>
+      :track-info="audioTrackInfo"
+    />
   </div>
 </template>
 

src/views/Settings/QallTab.vue

@@ -68,6 +68,17 @@
           <p v-else>デバイスが取得できませんでした。</p>
         </div>
       </section>
+      <section :class="$style.element">
+        <h3 :class="$style.heading">出力デバイス</h3>
+        <div>
+          <form-selector
+            v-if="!fetchFailed && audioOutputDevices.length"
+            v-model="state.audioOutputDeviceId"
+            :options="audioOutputDeviceOptions"
+          />
+          <p v-else>デバイスが取得できませんでした。</p>
+        </div>
+      </section>
       <section :class="$style.element">
         <h3 :class="$style.heading">マスターボリューム</h3>
         <form-range-with-value
@@ -199,7 +210,7 @@
 
 const formatNoiseGateThreshold = (v: number) => `${v}dB`
 
-const { fetchFailed, audioInputDevices } = useDevicesInfo()
+const { fetchFailed, audioInputDevices, audioOutputDevices } = useDevicesInfo()
 
 const audioInputDeviceOptions = computed(() =>
   audioInputDevices.value.map(d => ({
@@ -208,6 +219,13 @@
   }))
 )
 
+const audioOutputDeviceOptions = computed(() =>
+  audioOutputDevices.value.map(d => ({
+    key: d.label,
+    value: d.deviceId
+  }))
+)
+
 const voiceOptions = useVoices()
 </script>