From af0149d72229eaa6d808d7999cc3f44dab34ba36 Mon Sep 17 00:00:00 2001
From: sajjadtalkhabi <97734061+sajjadtalkhabi@users.noreply.github.com>
Date: Sat, 15 Aug 2026 13:01:18 +0330
Subject: [PATCH] fix: media recorder

---
 .../components/studentRegister/MediaRecorder.vue  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/features/auth/components/studentRegister/MediaRecorder.vue b/src/features/auth/components/studentRegister/MediaRecorder.vue
index 0be5b7d..90a3ef6 100644
--- a/src/features/auth/components/studentRegister/MediaRecorder.vue
+++ b/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(() => {