https://qall-microservice-for-livekit.trap.show/token?room=test をテストする用のPR

src/composables/qall/useLiveKitSDK.ts

@@ -1,4 +1,4 @@
 import {
   Track,
   RoomEvent,
   AudioPresets,
@@ -21,13 +21,13 @@
 import { VirtualBackgroundProcessor } from '@shiguredo/virtual-background'
 import mitt from 'mitt'
 
 const virtualBackgroundAssetsPath =
   'https://cdn.jsdelivr.net/npm/@shiguredo/virtual-background@latest/dist'
 type QallEventMap = {
   pushStamp: string
 }
 const { addErrorToast } = useToastStore()
 const qallMitt = mitt<QallEventMap>()
 
 export type TrackInfo = (
   | {
@@ -48,422 +48,422 @@
   backgroundImageSrc?: MediaStream
 }
 
 const room = ref<Room>()
 const speakerIdentity = ref<string[]>([])
 const tracksMap: Ref<Map<string, TrackInfo>> = ref(new Map())
 const cameraProcessorMap: Ref<Map<string, CameraProcessor>> = ref(new Map())
 const screenShareTrackSidMap = ref<Map<string, string>>(new Map())
 
 function handleTrackSubscribed(
   track: RemoteTrack,
   publication: RemoteTrackPublication,
   participant: RemoteParticipant
 ) {
   if (track.kind === Track.Kind.Video || track.kind === Track.Kind.Audio) {
     // attach it to a new HTMLVideoElement or HTMLAudioElement
     tracksMap.value.set(publication.trackSid, {
       isRemote: true,
       trackPublication: publication,
       participantIdentity: participant.identity
     })
   }
 }
 
 function handleTrackUnsubscribed(
   track: RemoteTrack,
   publication: RemoteTrackPublication,
   participant: RemoteParticipant
 ) {
   // remove tracks from all attached elements
   tracksMap.value.delete(publication.trackSid)
   screenShareTrackSidMap.value.delete(publication.trackSid)
 }
 
 function handleLocalTrackUnpublished(
   publication: LocalTrackPublication,
   participant: LocalParticipant
 ) {
   // when local tracks are ended, update UI to remove them from rendering
   tracksMap.value.delete(publication.trackSid)
   screenShareTrackSidMap.value.delete(publication.trackSid)
 }
 
 function handleLocalTrackPublished(
   publication: LocalTrackPublication,
   participant: LocalParticipant
 ) {
   // when local tracks are ended, update UI to remove them from rendering
   if (!publication.track) return
   tracksMap.value.set(publication.trackSid, {
     isRemote: false,
     trackPublication: publication,
     participantIdentity: participant.identity
   })
 }
 
 function handleActiveSpeakerChange(speakers: Participant[]) {
   // show UI indicators when participant is speaking
   speakerIdentity.value = speakers.map(s => s.identity)
 }
 
 function handleDisconnect() {
   //
 }
 
 function handleDataReceived(payload: Uint8Array<ArrayBufferLike>) {
   const data = JSON.parse(decoder.decode(payload))
   if (!data.type || !data.message) return
   if (data.type === 'stamp') {
     qallMitt.emit('pushStamp', data.message)
   }
 }
 
 function handleParticipantAttributesChanged(
   changed: Record<string, string>,
   participant: Participant
 ) {
   Object.keys(changed).forEach(key =>
     screenShareTrackSidMap.value.set(key, changed[key] ?? '')
   )
 }
 
 const joinRoom = async (roomName: string, userName: string) => {
   try {
     const traQtoken = (await apis.getMyQRCode(true)).data
     const res = await fetch(
-      `https://easy-livekit-token-publisher.trap.show/token`,
+      `https://qall-microservice-for-livekit.trap.show/api/token?room=test`,
       {
         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);
     room.value = new Room({ dynacast: true, adaptiveStream: true })
     await room.value.prepareConnection(
       'wss://livekit.qall-dev.trapti.tech',
       token
     )
 
     // set up event listeners
     room.value
       .on(RoomEvent.TrackSubscribed, handleTrackSubscribed)
       .on(RoomEvent.TrackUnsubscribed, handleTrackUnsubscribed)
       .on(RoomEvent.ActiveSpeakersChanged, handleActiveSpeakerChange)
       .on(RoomEvent.Disconnected, handleDisconnect)
       .on(RoomEvent.LocalTrackUnpublished, handleLocalTrackUnpublished)
       .on(RoomEvent.LocalTrackPublished, handleLocalTrackPublished)
       .on(RoomEvent.DataReceived, handleDataReceived)
       .on(
         RoomEvent.ParticipantAttributesChanged,
         handleParticipantAttributesChanged
       )
 
     // connect to room
     await room.value.connect('wss://livekit.qall-dev.trapti.tech', token)
 
     // publish local camera and mic tracks
     await room.value.localParticipant.setMicrophoneEnabled(
       true,
       {
         channelCount: 2,
         voiceIsolation: true,
         echoCancellation: true,
         noiseSuppression: true
       },
       {
         audioPreset: AudioPresets.musicHighQualityStereo,
         forceStereo: true,
         red: false,
         dtx: false
       }
     )
     await room.value.localParticipant.setAttributes({})
     room.value.remoteParticipants.forEach(participant => {
       Object.keys(participant.attributes).forEach(key =>
         screenShareTrackSidMap.value.set(key, participant.attributes[key] ?? '')
       )
     })
   } catch {
     addErrorToast('Qallの接続に失敗しました')
     await leaveRoom()
   }
 
   window.addEventListener('beforeunload', leaveRoom)
 }
 
 async function leaveRoom() {
   // Leave the room by calling 'disconnect' method over the Room object
   await room.value?.disconnect()
 
   // Empty all variables
   room.value = undefined
   tracksMap.value.clear()
   screenShareTrackSidMap.value.clear()
 
   window.removeEventListener('beforeunload', leaveRoom)
 }
 
 const Attributes = ref<{ [key: string]: string }>({})
 
 const addCameraTrack = async (
   videoInputDevice?: MediaDeviceInfo,
   backgroundType?: 'original' | 'blur' | 'file' | 'screen',
   backgroundFile?: File
 ) => {
   try {
     if (!room.value) {
       addErrorToast('ルームが存在しません')
       return
     }
 
     const stream = await navigator.mediaDevices.getUserMedia({
       video: { deviceId: videoInputDevice?.deviceId }
     })
     const track = stream.getVideoTracks()[0]
     if (!track) {
       addErrorToast('映像が取得できませんでした')
       return
     }
     let backgroundImageSrc: MediaStream | undefined
     const processor = new VirtualBackgroundProcessor(
       virtualBackgroundAssetsPath
     )
     let options = {}
 
     if (backgroundType === 'blur') {
       options = {
         blurRadius: 10
       }
     } else if (backgroundType === 'file' && backgroundFile) {
       const blob = new Blob([backgroundFile], { type: backgroundFile.type })
 
       if (backgroundFile.type.startsWith('image/')) {
         //画像のとき
         const imageBitmap = await createImageBitmap(blob)
         options = {
           backgroundImage: imageBitmap
         }
       } else if (backgroundFile.type.startsWith('video/')) {
         //動画のとき
         const videoElement = await new Promise<HTMLVideoElement>(resolve => {
           const video = document.createElement('video')
           video.addEventListener('loadedmetadata', () => {
             video.play()
             resolve(video)
           })
           video.src = URL.createObjectURL(blob)
           video.muted = true
           video.loop = true
         })
         const canvas = drawVideoToCanvas(videoElement)
         options = {
           backgroundImage: canvas
         }
       }
     } else if (backgroundType === 'screen') {
       backgroundImageSrc = await navigator.mediaDevices.getDisplayMedia({
         video: true
       })
       const videoElement = await new Promise<HTMLVideoElement>(resolve => {
         const video = document.createElement('video')
         video.addEventListener('loadedmetadata', () => {
           video.play()
           resolve(video)
         })
         if (backgroundImageSrc) {
           video.srcObject = backgroundImageSrc
           video.autoplay = true
           video.muted = true
         }
       })
 
       const canvas = drawVideoToCanvas(videoElement)
       options = {
         backgroundImage: canvas
       }
     }
     const processedTrack = await processor.startProcessing(track, options)
     const localTrack = new LocalVideoTrack(processedTrack)
     await room.value?.localParticipant
       .publishTrack(localTrack, { simulcast: true })
       .catch(() => {
         addErrorToast('カメラの共有に失敗しました')
         track.stop()
         processor.stopProcessing()
         return
       })
     if (localTrack.sid) {
       cameraProcessorMap.value.set(localTrack.sid, {
         processor,
         track,
         backgroundImageSrc
       })
     }
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(e)
     addErrorToast('カメラの共有に失敗しました')
     return
   }
 }
 
 const drawVideoToCanvas = (video: HTMLVideoElement) => {
   const canvas = new OffscreenCanvas(video.videoWidth, video.videoHeight)
   const canvasCtx = canvas.getContext('2d', {
     desynchronized: true
   })
   if (!canvasCtx) return
   const updateCanvas = () => {
     canvasCtx.drawImage(video, 0, 0)
     requestAnimationFrame(updateCanvas)
   }
   updateCanvas()
   return canvas
 }
 
 const addScreenShareTrack = async () => {
   try {
     if (!room.value) {
       addErrorToast('ルームが存在しません')
       return
     }
     const localTracks = await createLocalScreenTracks({
       audio: {
         channelCount: 2,
         autoGainControl: false,
         noiseSuppression: false,
         echoCancellation: false,
         voiceIsolation: false
       }
     })
 
     await Promise.all(
       localTracks.map(async t => {
         if (t.kind === Track.Kind.Video) {
           await room.value?.localParticipant.publishTrack(t, {
             simulcast: true
           })
         } 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
     const audioSid = localTracks.find(t => t.kind === Track.Kind.Audio)?.sid
     if (audioSid && videoSid) {
       Attributes.value = {
         ...Attributes.value,
         [videoSid]: audioSid
       }
       screenShareTrackSidMap.value.set(videoSid, audioSid)
       // await room.value.localParticipant.setAttributes({
       //   ...room.value.localParticipant.attributes,
       //   [videoSid]: audioSid
       // })
     }
   } catch {
     // TODO:シェアをキャンセルした時も失敗しましたメッセージがでるのはちょっと違和感があるかも
     addErrorToast('スクリーン共有に失敗しました')
     throw new Error('スクリーン共有に失敗しました')
   }
 }
 
 const removeVideoTrack = async (localpublication: LocalTrackPublication) => {
   if (localpublication.track) {
     if (!room.value) {
       addErrorToast('ルームが存在しません')
       return
     }
     const cameraProcessor = cameraProcessorMap.value.get(
       localpublication.trackSid
     )
     if (cameraProcessor) {
       cameraProcessor.processor.stopProcessing()
       cameraProcessor.track.stop()
       cameraProcessor.backgroundImageSrc
         ?.getTracks()
         .forEach(track => track.stop())
       cameraProcessorMap.value.delete(localpublication.trackSid)
     }
 
     const { [localpublication.trackSid]: audioSid, ...newAttributes } =
       Attributes.value
     //room.value.localParticipant.attributes
     await room.value.localParticipant.unpublishTrack(
       localpublication.track,
       true
     )
     room.value.localParticipant.setAttributes(newAttributes)
     Attributes.value = newAttributes
     if (!audioSid) {
       return
     }
 
     const audioTrack = tracksMap.value.get(audioSid)
     if (
       !audioTrack ||
       audioTrack.isRemote ||
       !audioTrack.trackPublication?.track
     ) {
       return
     }
 
     await room.value.localParticipant.unpublishTrack(
       audioTrack.trackPublication.track,
       true
     )
   }
 }
 
 const setLocalTrackMute = async (track: LocalTrack, muted: boolean) => {
   if (muted) {
     await track.mute()
   } else {
     await track.unmute()
   }
 }
 
 const setTrackEnabled = (
   publication: RemoteTrackPublication,
   muted: boolean
 ) => {
   publication.setEnabled(!muted)
 }
 
 const publishData = async (data: { type: 'stamp'; message: string }) => {
   if (!room.value) return
   const strData = JSON.stringify(data)
   const encoder = new TextEncoder()
 
   // publishData takes in a Uint8Array, so we need to convert it
   const encoded = encoder.encode(strData)
   await room.value.localParticipant.publishData(encoded, { reliable: true })
 }
 const decoder = new TextDecoder()
 
 export const useLiveKitSDK = () => {
   return {
     joinRoom,
     leaveRoom,
     addScreenShareTrack,
     addCameraTrack,
     removeVideoTrack,
     publishData,
     setTrackEnabled,
     setLocalTrackMute,
     tracksMap,
     screenShareTrackSidMap,
     qallMitt
   }
 }