ユーザーリストを作成

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue'
+import UserIcon from '/@/components/UI/UserIcon.vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 
 const { trackInfo } = defineProps<{
@@ -23,10 +24,30 @@ onMounted(() => {
 onUnmounted(() => {
   trackInfo.trackPublication?.track?.detach()
 })
+const userIdOfRamdos = '8f7a93ab-1e92-4dc6-b1a2-4231ab1681c7'
 </script>
 
 <template>
   <div>{{ trackInfo.participantIdentity }}</div>
-  <audio :id="trackInfo.trackPublication?.trackSid" ref="audioElement"></audio>
+  <div :class="$style.UserCard">
+    <audio
+      :id="trackInfo.trackPublication?.trackSid"
+      ref="audioElement"
+    ></audio>
+    <user-icon :class="$style.InnerIcon" :size="96" :user-id="userIdOfRamdos" />
+  </div>
   <input v-model="volume" type="range" min="0" max="1" step="0.01" />
 </template>
+<style lang="scss" module>
+.UserCard {
+  height: 108px;
+  width: 192px;
+  border: 1px solid black;
+}
+.InnerIcon {
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

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

@@ -2,6 +2,7 @@
 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 UserList from '/@/components/Main/MainView/QallView/UserList.vue'
 import { onMounted, ref } from 'vue'
 
 const { tracksMap, addScreenShareTrack, addCameraTrack } = useQall()
@@ -35,34 +36,12 @@ const selectedVideoInput = ref<MediaDeviceInfo>()
     >
       Add Camera Track
     </button>
-    <div :class="$style.TrackContainer">
-      <template
-        v-for="track of tracksMap.values()"
-        :key="track.trackPublication?.trackSid"
-      >
-        <VideoComponent
-          v-if="track.trackPublication?.kind === 'video'"
-          :track-info="track"
-          :participant-identity="track.participantIdentity"
-          :class="$style.video"
-        />
-        <AudioComponent
-          v-else-if="track.trackPublication?.kind === 'audio' && track.isRemote"
-          :track-info="track"
-        />
-      </template>
-    </div>
+    <UserList />
   </div>
 </template>
 
 <style lang="scss" module>
-.TrackContainer {
-  height: fit-content;
-}
-.video {
-  width: 50%;
-  height: 50%;
-}
+
 .Block {
   color: green;
   overflow: scroll;

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

@@ -0,0 +1,57 @@
+<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'
+import { onMounted, ref } from 'vue'
+
+const { tracksMap, addScreenShareTrack, addCameraTrack } = useQall()
+
+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.TrackContainer">
+    <template
+      v-for="track of tracksMap.values()"
+      :key="track.trackPublication?.trackSid"
+    >
+      <div :class="$style.UserBlock">
+        <VideoComponent
+          v-if="track.trackPublication?.kind === 'video'"
+          :track-info="track"
+          :participant-identity="track.participantIdentity"
+          :class="[$style.video, $style.UserCard]"
+        />
+        <AudioComponent
+          v-else-if="track.trackPublication?.kind === 'audio' && track.isRemote"
+          :track-info="track"
+          :class="[$style.UserCard]"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" module>
+.TrackContainer {
+  height: fit-content;
+}
+.UserBlock {
+  border: 1px solid black;
+  float: left;
+}
+.video {
+  width: 50%;
+  height: 50%;
+}
+.UserCard {
+  height: 108px;
+  width: 192px;
+  border: 1px solid black;
+}
+</style>

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

@@ -39,6 +39,7 @@ onUnmounted(() => {
       :id="trackInfo.trackPublication.trackSid"
       ref="videoElement"
       :class="$style.video"
+
     ></video>
     <input v-model="volume" type="range" min="0" max="1" step="0.01" />
     <button