SDKの利用部分と仮組み

package.json

@@ -37,6 +37,7 @@
     "firebase": "^11.1.0",
     "highlight.js": "^11.11.1",
     "idb-keyval": "^6.2.0",
+    "livekit-client": "^2.8.0",
     "mitt": "^3.0.0",
     "skyway-js": "^4.4.5",
     "text-field-edit": "^4.1.1",
@@ -51,8 +52,8 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin-ts": "^2.12.1",
     "@pinia/testing": "^0.1.6",
+    "@stylistic/eslint-plugin-ts": "^2.12.1",
     "@types/autosize": "^4.0.3",
     "@types/dom-screen-wake-lock": "^1.0.3",
     "@types/katex": "^0.16.7",
@@ -63,24 +64,24 @@
     "@types/throttle-debounce": "^5.0.2",
     "@types/turndown": "^5.0.5",
     "@types/vue-select": "^3.16.8",
+    "@types/webappsec-credential-management": "^0.6.9",
     "@typescript-eslint/eslint-plugin": "^8.19.0",
     "@typescript-eslint/parser": "^8.19.0",
-    "@types/webappsec-credential-management": "^0.6.9",
     "@typescript/lib-dom": "npm:@types/web@^0.0.72",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^2.1.8",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.9",
     "browserslist": "^4.24.3",
+    "cypress": "^13.17.0",
+    "esbuild": "^0.24.2",
+    "esbuild-plugin-browserslist": "^0.15.0",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vue": "^9.32.0",
-    "cypress": "^13.17.0",
-    "esbuild": "^0.24.2",
-    "esbuild-plugin-browserslist": "^0.15.0",
     "fonteditor-core": "^2.4.1",
     "jsdom": "^25.0.1",
     "patch-package": "^8.0.0",

src/components/Main/MainView/ChannelView/ChannelHeader/ChannelHeaderToolsList.vue

@@ -10,7 +10,7 @@
         :data-is-active="$boolAttr(isQallSessionOpened)"
         :data-is-joined="$boolAttr(canEndQall)"
         :tooltip="qallLabel"
-        @click="toggleQall"
+        @click="toggleCalling(props.channelId)"
       />
       <header-tools-item
         :class="$style.notificationIcon"
@@ -57,6 +57,7 @@ import type { ChannelId } from '/@/types/entity-ids'
 import HeaderToolsItem from '/@/components/Main/MainView/PrimaryViewHeader/PrimaryViewHeaderToolsItem.vue'
 import useQall from './composables/useQall'
 import useStarChannel from './composables/useStarChannel'
+import { useQall as useNewQall } from '/@/composables/qall/useQall'
 
 const props = withDefaults(
   defineProps<{
@@ -88,6 +89,8 @@ const {
   toggleQall
 } = useQall(props)
 
+const { toggleCalling } = useNewQall()
+
 const { changeToNextSubscriptionLevel, currentChannelSubscription } =
   useChannelSubscriptionState(toRef(props, 'channelId'))
 const subscriptionChangeInfo = computed(() => {

src/components/Main/MainView/ChannelView/ChannelView.vue

@@ -4,7 +4,9 @@
       <channel-header :channel-id="channelId" />
     </template>
     <template #default>
+      <QallView v-if="isCalling" />
       <channel-view-content
+        v-else
         :channel-id="channelId"
         :entry-message-id="entryMessageId"
         :pinned-messages="pinnedMessages"
@@ -31,6 +33,8 @@ import type { ChannelId, MessageId } from '/@/types/entity-ids'
 import { toRef } from 'vue'
 import usePinnedMessages from '/@/composables/message/usePinnedMessages'
 import useCurrentViewers from '/@/composables/useCurrentViewers'
+import { useQall } from '/@/composables/qall/useQall'
+import QallView from '../QallView/QallView.vue'
 
 const props = defineProps<{
   isReady: boolean
@@ -41,4 +45,5 @@ const props = defineProps<{
 const channelId = toRef(props, 'channelId')
 const pinnedMessages = usePinnedMessages(channelId)
 const { viewingUsers, typingUsers } = useCurrentViewers(channelId)
+const { isCalling } = useQall()
 </script>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { LocalAudioTrack, RemoteAudioTrack } from 'livekit-client'
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
+
+const props = defineProps<{
+  track: LocalAudioTrack | RemoteAudioTrack
+}>()
+const audioElement = useTemplateRef<HTMLMediaElement>('audioElement')
+
+onMounted(() => {
+  if (audioElement.value) {
+    props.track.attach(audioElement.value)
+  }
+})
+
+onUnmounted(() => {
+  props.track.detach()
+})
+</script>
+
+<template>
+  <audio :id="track.sid" ref="audioElement"></audio>
+</template>

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

@@ -1,6 +1,30 @@
+<script setup lang="ts">
+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 } = useQall()
+</script>
+
 <template>
   <div :class="$style.Block">
     <h1 :class="$style.Header">Qall View</h1>
+    <div>
+      <template
+        v-for="track of tracksMap.values()"
+        :key="track.trackPublication?.trackSid"
+      >
+        <VideoComponent
+          v-if="track.trackPublication?.kind === 'video'"
+          :track="track.trackPublication.videoTrack!"
+          :participant-identity="track.participantIdentity"
+        />
+        <AudioComponent
+          v-else-if="track.trackPublication?.kind === 'audio'"
+          :track="track.trackPublication.audioTrack!"
+        />
+      </template>
+    </div>
   </div>
 </template>
 

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { VideoTrack } from 'livekit-client'
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
+
+const { track, participantIdentity } = defineProps<{
+  track: VideoTrack
+  participantIdentity: string
+}>()
+
+const videoElement = useTemplateRef<HTMLVideoElement>('videoElement')
+
+onMounted(() => {
+  if (videoElement.value) {
+    track.attach(videoElement.value)
+  }
+})
+
+onUnmounted(() => {
+  track.detach()
+})
+</script>
+
+<template>
+  <div :id="'camera-' + participantIdentity">
+    <div>
+      <p>{{ participantIdentity }}</p>
+    </div>
+    <video :id="track.sid" ref="videoElement"></video>
+  </div>
+</template>