fix: media recorder

src/features/auth/components/studentRegister/MediaRecorder.vue

@@ -76,9 +76,9 @@
 <script setup>
 import { toast } from 'vue3-toastify'
 import useModal from '@/composables/useModal'
-import { computed, onBeforeUnmount, ref } from 'vue'
 import SvgIcon from '@/components/icons/SvgIcon.vue'
 import { objectToFormData } from '@/utils/object-to-formdata'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 import { useUploadMediaMutation } from '@/services/query/auth'
 import PermissionModal from '@/features/auth/components/studentRegister/PermissionModal.vue'
 
@@ -170,9 +170,6 @@ const onStart = async () => {
   try {
     const constraints = props.kind === 'video' ? { audio: true, video: true } : { audio: true }
     mediaStream = await navigator.mediaDevices.getUserMedia(constraints)
-    if (props.kind === 'video' && liveEl.value) {
-      liveEl.value.srcObject = mediaStream
-    }
     chunks = []
     recorderType = pickRecorderType(props.kind)
     mediaRecorder = new window.MediaRecorder(mediaStream, { mimeType: recorderType.mime })
@@ -180,8 +177,16 @@ const onStart = async () => {
       if (e.data?.size > 0) chunks.push(e.data)
     }
     mediaRecorder.onstop = () => handleStop()
-    mediaRecorder.start()
     isRecording.value = true
+
+    // The live video is conditionally rendered by isRecording, so wait until
+    // Vue mounts it before attaching the camera stream.
+    await nextTick()
+    if (props.kind === 'video' && liveEl.value) {
+      liveEl.value.srcObject = mediaStream
+    }
+
+    mediaRecorder.start()
     elapsedMs.value = 0
     timerStart = Date.now()
     timerHandle = setInterval(() => {