From ec296628c32f3c5fee39bb70086bdeb40fde5cc5 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Mon, 20 Jan 2025 21:41:43 +0900
Subject: [PATCH 1/9] little fix

---
 src/composables/qall/useLiveKitSDK.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 6e5d33a49..256d4f235 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -14,7 +14,7 @@ import type {
   Participant,
   LocalTrack
 } from 'livekit-client'
-import { ref, type Ref } from 'vue'
+import { ref, watch, type Ref } from 'vue'
 import { useToastStore } from '/@/store/ui/toast'
 import apis from '/@/lib/apis'
 
@@ -187,7 +187,7 @@ const addScreenShareTrack = async () => {
     const audioSid = localTracks.find(t => t.kind === Track.Kind.Audio)?.sid
     if (audioSid && videoSid) {
       Attributes.value = {
-        ...room.value.localParticipant.attributes,
+        ...Attributes.value,
         [videoSid]: audioSid
       }
       await room.value.localParticipant.setAttributes({
@@ -200,6 +200,11 @@ const addScreenShareTrack = async () => {
   }
 }
 
+watch(
+  () => Attributes.value,
+  () => console.log(Attributes.value)
+)
+
 const removeScreenShareTrack = async (
   localpublication: LocalTrackPublication
 ) => {

From c54cd097abf789233ead3db26b00e7cb59e1aa3e Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Mon, 20 Jan 2025 22:13:29 +0900
Subject: [PATCH 2/9] =?UTF-8?q?Audio=E3=81=AB=E3=82=82participantIdentity?=
 =?UTF-8?q?=E3=82=92=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Main/MainView/QallView/AudioTrack.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Main/MainView/QallView/AudioTrack.vue b/src/components/Main/MainView/QallView/AudioTrack.vue
index 3c99214b5..31c896437 100644
--- a/src/components/Main/MainView/QallView/AudioTrack.vue
+++ b/src/components/Main/MainView/QallView/AudioTrack.vue
@@ -26,6 +26,7 @@ onUnmounted(() => {
 </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" />
 </template>

From 59e2d5a5717e810e3987cb3b12672e734a448958 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Mon, 20 Jan 2025 23:01:01 +0900
Subject: [PATCH 3/9] =?UTF-8?q?=E3=82=AB=E3=83=A1=E3=83=A9=E3=83=88?=
 =?UTF-8?q?=E3=83=A9=E3=83=83=E3=82=AF=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 22 +++++++++++++
 package.json                                  |  1 +
 .../Main/MainView/QallView/QallView.vue       |  5 ++-
 .../Main/MainView/QallView/VideoTrack.vue     |  4 +--
 src/composables/qall/useLiveKitSDK.ts         | 31 ++++++++++++-------
 src/composables/qall/useQall.ts               |  6 ++--
 6 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0ef02b8e7..baeb5ad37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@mdi/js": "^7.4.47",
         "@sapphi-red/web-noise-suppressor": "^0.3.5",
+        "@shiguredo/virtual-background": "^2023.2.0",
         "@traptitech/traq": "^3.17.0-3",
         "@traptitech/traq-markdown-it": "^6.3.0",
         "autosize": "^6.0.1",
@@ -3892,6 +3893,14 @@
       "resolved": "https://registry.npmjs.org/@sapphi-red/web-noise-suppressor/-/web-noise-suppressor-0.3.5.tgz",
       "integrity": "sha512-jh3+V9yM+zxLriQexoGm0GatoPaJWjs6ypFIbFYwQp+AoUb55eUXrjKtKQyuC5zShzzeAQUl0M5JzqB7SSrsRA=="
     },
+    "node_modules/@shiguredo/virtual-background": {
+      "version": "2023.2.0",
+      "resolved": "https://registry.npmjs.org/@shiguredo/virtual-background/-/virtual-background-2023.2.0.tgz",
+      "integrity": "sha512-nvJAsf29ThXMN7tEvlvZ45MeIoXW2uoJxvBwsesYInjoSy0RASQr7qxrLMglX2yyztOeYZqJknQBttjJTGH/QA==",
+      "dependencies": {
+        "@types/dom-mediacapture-transform": "^0.1.4"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -4016,12 +4025,25 @@
       "integrity": "sha512-o0ZyU3ePp3+KRbhHsY4ogjc+ZQWgVN5h6j8BHW5RII4cFKi6PEKK9QPAcphJVkD0dGpyFnD3VRR0WMvHVjCv9w==",
       "dev": true
     },
+    "node_modules/@types/dom-mediacapture-transform": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@types/dom-mediacapture-transform/-/dom-mediacapture-transform-0.1.10.tgz",
+      "integrity": "sha512-zUxMN2iShu7p3Fz5sqfvLp93qW/3sLs+RwXWWOkMb969hsuoVqUUokqrENjXqTMNmEEcVXKoHuMMbIGcWyrVVA==",
+      "dependencies": {
+        "@types/dom-webcodecs": "*"
+      }
+    },
     "node_modules/@types/dom-screen-wake-lock": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@types/dom-screen-wake-lock/-/dom-screen-wake-lock-1.0.3.tgz",
       "integrity": "sha512-3Iten7X3Zgwvk6kh6/NRdwN7WbZ760YgFCsF5AxDifltUQzW1RaW+WRmcVtgwFzLjaNu64H+0MPJ13yRa8g3Dw==",
       "dev": true
     },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.13.tgz",
+      "integrity": "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
diff --git a/package.json b/package.json
index fea9c9601..0c44422e8 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
   "dependencies": {
     "@mdi/js": "^7.4.47",
     "@sapphi-red/web-noise-suppressor": "^0.3.5",
+    "@shiguredo/virtual-background": "^2023.2.0",
     "@traptitech/traq": "^3.17.0-3",
     "@traptitech/traq-markdown-it": "^6.3.0",
     "autosize": "^6.0.1",
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index e6ebe6e3a..136b7b2ab 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -3,13 +3,16 @@ import { useQall } from '/@/composables/qall/useQall'
 import VideoComponent from '/@/components/Main/MainView/QallView/VideoTrack.vue'
 import AudioComponent from '/@/components/Main/MainView/QallView/AudioTrack.vue'
 
-const { tracksMap, addScreenShareTrack } = useQall()
+const { tracksMap, addScreenShareTrack, addCameraTrack } = useQall()
+
+const devices = navigator.mediaDevices.enumerateDevices()
 </script>
 
 <template>
   <div :class="$style.Block">
     <h1 :class="$style.Header">Qall View</h1>
     <button @click="addScreenShareTrack">Add Screen Share Track</button>
+    <button @click="addCameraTrack">Add Camera Track</button>
     <div :class="$style.TrackContainer">
       <template
         v-for="track of tracksMap.values()"
diff --git a/src/components/Main/MainView/QallView/VideoTrack.vue b/src/components/Main/MainView/QallView/VideoTrack.vue
index 3bf6b9e46..5d14c2940 100644
--- a/src/components/Main/MainView/QallView/VideoTrack.vue
+++ b/src/components/Main/MainView/QallView/VideoTrack.vue
@@ -8,7 +8,7 @@ const { trackInfo, participantIdentity } = defineProps<{
   participantIdentity: string
 }>()
 
-const { removeScreenShareTrack } = useQall()
+const { removeVideoTrack } = useQall()
 
 const videoElement = useTemplateRef<HTMLVideoElement>('videoElement')
 const volume = ref(1)
@@ -43,7 +43,7 @@ onUnmounted(() => {
     <input v-model="volume" type="range" min="0" max="1" step="0.01" />
     <button
       v-if="!trackInfo.isRemote && trackInfo.trackPublication"
-      @click="removeScreenShareTrack(trackInfo.trackPublication)"
+      @click="removeVideoTrack(trackInfo.trackPublication)"
     >
       Remove Screen Share
     </button>
diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 256d4f235..53b6fbb4b 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -3,7 +3,8 @@ import {
   RoomEvent,
   AudioPresets,
   createLocalScreenTracks,
-  Room
+  Room,
+  createLocalVideoTrack
 } from 'livekit-client'
 import type {
   RemoteTrack,
@@ -168,6 +169,20 @@ async function leaveRoom() {
 
 const Attributes = ref<{ [key: string]: string }>({})
 
+const addCameraTrack = async () => {
+  try {
+    if (!room.value) {
+      addErrorToast('ルームが存在しません')
+      return
+    }
+    const localTrack = await createLocalVideoTrack()
+    room.value?.localParticipant.publishTrack(localTrack)
+  } catch {
+    addErrorToast('カメラの共有に失敗しました')
+    return
+  }
+}
+
 const addScreenShareTrack = async () => {
   try {
     if (!room.value) {
@@ -200,14 +215,7 @@ const addScreenShareTrack = async () => {
   }
 }
 
-watch(
-  () => Attributes.value,
-  () => console.log(Attributes.value)
-)
-
-const removeScreenShareTrack = async (
-  localpublication: LocalTrackPublication
-) => {
+const removeVideoTrack = async (localpublication: LocalTrackPublication) => {
   if (localpublication.track) {
     if (!room.value) {
       addErrorToast('ルームが存在しません')
@@ -217,12 +225,10 @@ const removeScreenShareTrack = async (
     const { [localpublication.trackSid]: audioSid, ...newAttributes } =
       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) {
@@ -267,7 +273,8 @@ export const useLiveKitSDK = () => {
     joinRoom,
     leaveRoom,
     addScreenShareTrack,
-    removeScreenShareTrack,
+    addCameraTrack,
+    removeVideoTrack,
     setTrackEnabled,
     setLocalTrackMute,
     tracksMap
diff --git a/src/composables/qall/useQall.ts b/src/composables/qall/useQall.ts
index 8577104b4..cafa41f4c 100644
--- a/src/composables/qall/useQall.ts
+++ b/src/composables/qall/useQall.ts
@@ -9,7 +9,8 @@ const {
   joinRoom,
   leaveRoom,
   addScreenShareTrack,
-  removeScreenShareTrack,
+  removeVideoTrack,
+  addCameraTrack,
   setLocalTrackMute,
   tracksMap
 } = useLiveKitSDK()
@@ -40,7 +41,8 @@ export const useQall = () => {
     isCalling,
     toggleCalling,
     addScreenShareTrack,
-    removeScreenShareTrack,
+    addCameraTrack,
+    removeVideoTrack,
     tracksMap
   }
 }

From a9601cb6a26124bdf5a0d5e9284f07d1d9446207 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Mon, 20 Jan 2025 23:24:33 +0900
Subject: [PATCH 4/9] =?UTF-8?q?=E3=82=AB=E3=83=A1=E3=83=A9=E3=82=92?=
 =?UTF-8?q?=E9=81=B8=E6=8A=9E=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/QallView.vue         | 17 +++++++++++++++--
 src/composables/qall/useLiveKitSDK.ts           |  6 ++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 136b7b2ab..9470792cf 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -2,17 +2,30 @@
 import { useQall } from '/@/composables/qall/useQall'
 import VideoComponent from '/@/components/Main/MainView/QallView/VideoTrack.vue'
 import AudioComponent from '/@/components/Main/MainView/QallView/AudioTrack.vue'
+import { onMounted, ref } from 'vue'
 
 const { tracksMap, addScreenShareTrack, addCameraTrack } = useQall()
 
-const devices = navigator.mediaDevices.enumerateDevices()
+const videoInputs = ref<MediaDeviceInfo[]>([])
+onMounted(async () => {
+  const devices = await navigator.mediaDevices.enumerateDevices()
+  videoInputs.value = devices.filter(d => d.kind === 'videoinput')
+})
+const selectedVideoInput = ref<MediaDeviceInfo>()
 </script>
 
 <template>
   <div :class="$style.Block">
     <h1 :class="$style.Header">Qall View</h1>
     <button @click="addScreenShareTrack">Add Screen Share Track</button>
-    <button @click="addCameraTrack">Add Camera Track</button>
+    <select v-model="selectedVideoInput">
+      <option v-for="videoInput in videoInputs" :key="videoInput.deviceId">
+        {{ videoInput.label }}
+      </option>
+    </select>
+    <button @click="addCameraTrack(selectedVideoInput)">
+      Add Camera Track
+    </button>
     <div :class="$style.TrackContainer">
       <template
         v-for="track of tracksMap.values()"
diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 53b6fbb4b..cc0985988 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -169,13 +169,15 @@ async function leaveRoom() {
 
 const Attributes = ref<{ [key: string]: string }>({})
 
-const addCameraTrack = async () => {
+const addCameraTrack = async (videoInputDevice?: MediaDeviceInfo) => {
   try {
     if (!room.value) {
       addErrorToast('ルームが存在しません')
       return
     }
-    const localTrack = await createLocalVideoTrack()
+    const localTrack = await createLocalVideoTrack({
+      deviceId: videoInputDevice?.deviceId
+    })
     room.value?.localParticipant.publishTrack(localTrack)
   } catch {
     addErrorToast('カメラの共有に失敗しました')

From 147fe2c0d47ab19682ebf62194c34d67f3433ab1 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Mon, 20 Jan 2025 23:40:39 +0900
Subject: [PATCH 5/9] fix

---
 src/components/Main/MainView/QallView/QallView.vue | 13 +++++++++++--
 src/composables/qall/useLiveKitSDK.ts              |  4 ++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 9470792cf..65f9924ed 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -19,11 +19,20 @@ const selectedVideoInput = ref<MediaDeviceInfo>()
     <h1 :class="$style.Header">Qall View</h1>
     <button @click="addScreenShareTrack">Add Screen Share Track</button>
     <select v-model="selectedVideoInput">
-      <option v-for="videoInput in videoInputs" :key="videoInput.deviceId">
+      <option
+        v-for="videoInput in videoInputs"
+        :key="videoInput.deviceId"
+        :value="videoInput"
+      >
         {{ videoInput.label }}
       </option>
     </select>
-    <button @click="addCameraTrack(selectedVideoInput)">
+    <button
+      @click="[
+        addCameraTrack(selectedVideoInput),
+        console.log(selectedVideoInput)
+      ]"
+    >
       Add Camera Track
     </button>
     <div :class="$style.TrackContainer">
diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index cc0985988..e2a4a7793 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -175,6 +175,10 @@ const addCameraTrack = async (videoInputDevice?: MediaDeviceInfo) => {
       addErrorToast('ルームが存在しません')
       return
     }
+    console.log({
+      deviceId: videoInputDevice?.deviceId,
+      deviceName: videoInputDevice?.label
+    })
     const localTrack = await createLocalVideoTrack({
       deviceId: videoInputDevice?.deviceId
     })

From 9d70ff1f283bcaf1ac172b75a6fa50402dbecf4b Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Tue, 21 Jan 2025 00:21:01 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=E3=81=BC=E3=81=8B=E3=81=97=E5=87=A6?=
 =?UTF-8?q?=E7=90=86=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/qall/useLiveKitSDK.ts | 38 ++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index e2a4a7793..9aefb26d6 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -4,7 +4,8 @@ import {
   AudioPresets,
   createLocalScreenTracks,
   Room,
-  createLocalVideoTrack
+  createLocalVideoTrack,
+  LocalVideoTrack
 } from 'livekit-client'
 import type {
   RemoteTrack,
@@ -18,6 +19,10 @@ import type {
 import { ref, watch, type Ref } from 'vue'
 import { useToastStore } from '/@/store/ui/toast'
 import apis from '/@/lib/apis'
+import { VirtualBackgroundProcessor } from '@shiguredo/virtual-background'
+
+const virtualBackgroundAssetsPath =
+  'https://cdn.jsdelivr.net/npm/@shiguredo/virtual-background@latest/dist'
 
 const { addErrorToast } = useToastStore()
 
@@ -169,18 +174,37 @@ async function leaveRoom() {
 
 const Attributes = ref<{ [key: string]: string }>({})
 
-const addCameraTrack = async (videoInputDevice?: MediaDeviceInfo) => {
+const addCameraTrack = async (
+  videoInputDevice?: MediaDeviceInfo,
+  isBlur?: boolean
+) => {
   try {
     if (!room.value) {
       addErrorToast('ルームが存在しません')
       return
     }
-    console.log({
-      deviceId: videoInputDevice?.deviceId,
-      deviceName: videoInputDevice?.label
+
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { deviceId: videoInputDevice?.deviceId }
     })
-    const localTrack = await createLocalVideoTrack({
-      deviceId: videoInputDevice?.deviceId
+    const track = stream.getVideoTracks()[0]
+    if (!track) {
+      addErrorToast('映像が取得できませんでした')
+      return
+    }
+    const processor = new VirtualBackgroundProcessor(
+      virtualBackgroundAssetsPath
+    )
+
+    const options = {
+      blurRadius: 15 // 背景ぼかし設定
+    }
+    const processedTrack = await processor.startProcessing(track, options)
+    const localTrack = new LocalVideoTrack(processedTrack)
+    localTrack.on('ended', () => {
+      console.log('ended')
+      processor.stopProcessing()
+      track.stop()
     })
     room.value?.localParticipant.publishTrack(localTrack)
   } catch {

From 631feb7a4882f2ad6f256fc2140d52f15f6b1ba4 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Tue, 21 Jan 2025 00:44:17 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=E3=82=AB=E3=83=A1=E3=83=A9=E3=81=AE?=
 =?UTF-8?q?=E9=96=8B=E6=94=BE=E5=87=A6=E7=90=86=E3=82=92=E8=A8=98=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/qall/useLiveKitSDK.ts | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 9aefb26d6..794693994 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -39,9 +39,15 @@ export type TrackInfo = (
   participantIdentity: string
 }
 
+type CameraProcessor = {
+  processor: VirtualBackgroundProcessor
+  track: MediaStreamVideoTrack
+}
+
 const room = ref<Room>()
 const speakerIdentity = ref<string[]>([])
 const tracksMap: Ref<Map<string, TrackInfo>> = ref(new Map())
+const cameraProcesserMap: Ref<Map<string, CameraProcessor>> = ref(new Map())
 
 function handleTrackSubscribed(
   track: RemoteTrack,
@@ -201,11 +207,12 @@ const addCameraTrack = async (
     }
     const processedTrack = await processor.startProcessing(track, options)
     const localTrack = new LocalVideoTrack(processedTrack)
-    localTrack.on('ended', () => {
-      console.log('ended')
-      processor.stopProcessing()
-      track.stop()
-    })
+    if (localTrack.sid) {
+      cameraProcesserMap.value.set(localTrack.sid, {
+        processor,
+        track
+      })
+    }
     room.value?.localParticipant.publishTrack(localTrack)
   } catch {
     addErrorToast('カメラの共有に失敗しました')
@@ -251,6 +258,15 @@ const removeVideoTrack = async (localpublication: LocalTrackPublication) => {
       addErrorToast('ルームが存在しません')
       return
     }
+    const cameraProcessor = cameraProcesserMap.value.get(
+      localpublication.trackSid
+    )
+    if (cameraProcessor) {
+      console.log('stopProcessing')
+      cameraProcessor.processor.stopProcessing()
+      cameraProcessor.track.stop()
+      cameraProcesserMap.value.delete(localpublication.trackSid)
+    }
 
     const { [localpublication.trackSid]: audioSid, ...newAttributes } =
       Attributes.value

From 2d905435f9161b04de07ae2980eda53e7b62a02b Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Tue, 21 Jan 2025 00:53:00 +0900
Subject: [PATCH 8/9] =?UTF-8?q?=E8=A7=A3=E6=94=BE=E5=87=A6=E7=90=86?=
 =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/qall/useLiveKitSDK.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index 794693994..d150b4802 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -47,7 +47,7 @@ type CameraProcessor = {
 const room = ref<Room>()
 const speakerIdentity = ref<string[]>([])
 const tracksMap: Ref<Map<string, TrackInfo>> = ref(new Map())
-const cameraProcesserMap: Ref<Map<string, CameraProcessor>> = ref(new Map())
+const cameraProcessorMap: Ref<Map<string, CameraProcessor>> = ref(new Map())
 
 function handleTrackSubscribed(
   track: RemoteTrack,
@@ -207,13 +207,19 @@ const addCameraTrack = async (
     }
     const processedTrack = await processor.startProcessing(track, options)
     const localTrack = new LocalVideoTrack(processedTrack)
+    await room.value?.localParticipant.publishTrack(localTrack).catch(e => {
+      addErrorToast('カメラの共有に失敗しました')
+      track.stop()
+      processor.stopProcessing()
+      return
+    })
     if (localTrack.sid) {
-      cameraProcesserMap.value.set(localTrack.sid, {
+      console.log(localTrack.sid)
+      cameraProcessorMap.value.set(localTrack.sid, {
         processor,
         track
       })
     }
-    room.value?.localParticipant.publishTrack(localTrack)
   } catch {
     addErrorToast('カメラの共有に失敗しました')
     return
@@ -258,14 +264,14 @@ const removeVideoTrack = async (localpublication: LocalTrackPublication) => {
       addErrorToast('ルームが存在しません')
       return
     }
-    const cameraProcessor = cameraProcesserMap.value.get(
+    const cameraProcessor = cameraProcessorMap.value.get(
       localpublication.trackSid
     )
     if (cameraProcessor) {
       console.log('stopProcessing')
       cameraProcessor.processor.stopProcessing()
       cameraProcessor.track.stop()
-      cameraProcesserMap.value.delete(localpublication.trackSid)
+      cameraProcessorMap.value.delete(localpublication.trackSid)
     }
 
     const { [localpublication.trackSid]: audioSid, ...newAttributes } =

From d20fc5c4a33d52ed419238279482be9e2149459a Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Tue, 21 Jan 2025 01:17:31 +0900
Subject: [PATCH 9/9] =?UTF-8?q?=E7=94=BB=E9=9D=A2=E5=85=B1=E6=9C=89?=
 =?UTF-8?q?=E3=81=AE=E9=9F=B3=E8=B3=AA=E3=82=92=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/qall/useLiveKitSDK.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/composables/qall/useLiveKitSDK.ts b/src/composables/qall/useLiveKitSDK.ts
index d150b4802..f2173b829 100644
--- a/src/composables/qall/useLiveKitSDK.ts
+++ b/src/composables/qall/useLiveKitSDK.ts
@@ -233,12 +233,26 @@ const addScreenShareTrack = async () => {
       return
     }
     const localTracks = await createLocalScreenTracks({
-      audio: true
+      audio: {
+        channelCount: 2,
+        autoGainControl: false,
+        noiseSuppression: false,
+        echoCancellation: false,
+        voiceIsolation: false
+      }
     })
 
     await Promise.all(
       localTracks.map(async t => {
-        await room.value?.localParticipant.publishTrack(t)
+        if (t.kind === Track.Kind.Video) {
+          await room.value?.localParticipant.publishTrack(t)
+        } else {
+          await room.value?.localParticipant.publishTrack(t, {
+            audioPreset: AudioPresets.musicHighQualityStereo,
+            dtx: false,
+            red: false
+          })
+        }
       })
     )
     const videoSid = localTracks.find(t => t.kind === Track.Kind.Video)?.sid