画面共有が停止したときに、すべてのstreamをstopするように

traPtitech · Jan 20, 2025 · 04c35b6 · 04c35b6
1 parent b70691c
commit 04c35b6
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 24 deletions.
diff --git a/src/components/Main/MainView/QallView/AudioTrack.vue b/src/components/Main/MainView/QallView/AudioTrack.vue
@@ -27,5 +27,5 @@ onUnmounted(() => {
 
 <template>
   <audio :id="trackInfo.trackPublication?.trackSid" ref="audioElement"></audio>
-  <input v-model="volume" type="slider" min="0" max="1" step="0.01" />
+  <input v-model="volume" type="range" min="0" max="1" step="0.01" />
 </template>
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
@@ -10,7 +10,7 @@ const { tracksMap, addScreenShareTrack } = useQall()
   <div :class="$style.Block">
     <h1 :class="$style.Header">Qall View</h1>
     <button @click="addScreenShareTrack">Add Screen Share Track</button>
-    <div>
+    <div :class="$style.TrackContainer">
       <template
         v-for="track of tracksMap.values()"
         :key="track.trackPublication?.trackSid"
@@ -22,7 +22,7 @@ const { tracksMap, addScreenShareTrack } = useQall()
           :class="$style.video"
         />
         <AudioComponent
-          v-else-if="track.trackPublication?.kind === 'audio'"
+          v-else-if="track.trackPublication?.kind === 'audio' && track.isRemote"
           :track-info="track"
         />
       </template>
@@ -31,12 +31,16 @@ const { tracksMap, addScreenShareTrack } = useQall()
 </template>
 
 <style lang="scss" module>
+.TrackContainer {
+  height: fit-content;
+}
 .video {
   width: 50%;
   height: 50%;
 }
 .Block {
   color: green;
+  overflow: scroll;
 }
 
 .Header {

diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
@@ -74,7 +74,7 @@ function handleLocalTrackPublished(
   participant: LocalParticipant
 ) {
   // when local tracks are ended, update UI to remove them from rendering
-  if (!publication.track || publication.track.kind === Track.Kind.Audio) return
+  if (!publication.track) return
   tracksMap.value.set(publication.trackSid, {
     isRemote: false,
     trackPublication: publication,
@@ -93,22 +93,20 @@ function handleDisconnect() {
 
 const joinRoom = async (roomName: string, userName: string) => {
   try {
-    // const traQtoken = (await apis.getMyQRCode(true)).data
-    // console.log(traQtoken)
-    // const res = await fetch(
-    //   `https://easy-livekit-token-publisher.trap.show/token`,
-    //   {
-    //     method: 'GET',
-    //     headers: {
-    //       Authorization: `Bearer ${traQtoken}`,
-    //       'Content-Type': 'application/json'
-    //     }
-    //   }
-    // )
-    // const json = await res.json()
-    // const token = json.token
-    const token =
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3Mzc0NDI5MDksImlzcyI6IkFQSTdUZWZvc1FoaWdXUiIsIm5hbWUiOiJub2M3dCIsIm5iZiI6MTczNzM1NjUwOSwic3ViIjoibm9jN3QiLCJ2aWRlbyI6eyJyb29tIjoibXktcm9vbSIsInJvb21Kb2luIjp0cnVlfX0.7AAPmZlHMgXHtZ1FwhLn_zW5k038pFWSx3JBHcUc-hs'
+    const traQtoken = (await apis.getMyQRCode(true)).data
+    console.log(traQtoken)
+    const res = await fetch(
+      `https://easy-livekit-token-publisher.trap.show/token`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${traQtoken}`,
+          'Content-Type': 'application/json'
+        }
+      }
+    )
+    const json = await res.json()
+    const token = json.token
 
     // pre-warm connection, this can be called as early as your page is loaded
     //room.prepareConnection("https://livekit-test.trap.show:39357", token);
@@ -168,6 +166,8 @@ async function leaveRoom() {
   window.removeEventListener('beforeunload', leaveRoom)
 }
 
+const Attributes = ref<{ [key: string]: string }>({})
+
 const addScreenShareTrack = async () => {
   try {
     if (!room.value) {
@@ -186,6 +186,10 @@ const addScreenShareTrack = async () => {
     const videoSid = localTracks.find(t => t.kind === Track.Kind.Video)?.sid
     const audioSid = localTracks.find(t => t.kind === Track.Kind.Audio)?.sid
     if (audioSid && videoSid) {
+      Attributes.value = {
+        ...room.value.localParticipant.attributes,
+        [videoSid]: audioSid
+      }
       await room.value.localParticipant.setAttributes({
         ...room.value.localParticipant.attributes,
         [videoSid]: audioSid
@@ -206,14 +210,23 @@ const removeScreenShareTrack = async (
     }
 
     const { [localpublication.trackSid]: audioSid, ...newAttributes } =
-      room.value.localParticipant.attributes
-    room.value.localParticipant.unpublishTrack(localpublication.track)
+      Attributes.value
+    //room.value.localParticipant.attributes
+    console.log(audioSid)
+    await room.value.localParticipant.unpublishTrack(
+      localpublication.track,
+      true
+    )
+    console.log(audioSid)
     room.value.localParticipant.setAttributes(newAttributes)
+    Attributes.value = newAttributes
     if (!audioSid) {
       return
     }
 
     const audioTrack = tracksMap.value.get(audioSid)
+    console.log(audioTrack)
+    console.log(tracksMap.value)
     if (
       !audioTrack ||
       audioTrack.isRemote ||
@@ -222,8 +235,9 @@ const removeScreenShareTrack = async (
       return
     }
 
-    room.value.localParticipant.unpublishTrack(
-      audioTrack.trackPublication.track
+    await room.value.localParticipant.unpublishTrack(
+      audioTrack.trackPublication.track,
+      true
     )
   }
 }