no message

src/components/OnlineRollCall/index.vue

@@ -19,10 +19,13 @@
       :showConfirmButton="false"
     >
       <div class="dialog-content">
-        <div class="img-box" />
+        
+        <video ref="video" class="img-box" autoplay></video>
+        <canvas ref="canvas" class="img-box" style="display: none;"></canvas>
+
         <div v-show="!img" class="text1">即将通过摄像头捕捉画面</div>
         <div v-show="!img" class="text2">请稍等</div>
-        <div v-show="img" class="btn" @click="handleToRollCall2">
+        <div v-show="img" class="btn">
           上传视频截图
         </div>
         <div v-show="img" class="text3">已完成</div>
@@ -40,6 +43,8 @@ const router = useRouter();
 
 // 在线点名弹窗
 let timer;
+const video = ref(null);
+const canvas = ref(null);
 let show = ref(false);
 let durationTime = ref("");
 let rollCallData = ref({
@@ -52,16 +57,35 @@ let img = ref("");
 const handleToRollCall = () => {
   show.value = false;
   show2.value = true;
+
+  navigator.mediaDevices
+    .getUserMedia({ video: true })
+    .then(stream => {
+      video.value.srcObject = stream;
+    })
+    .catch(err => {
+      console.error("访问摄像头被拒绝：", err);
+    });
+
   setTimeout(() => {
-    img.value = "2";
+    // 3秒后拍照
+    answerCall()
   }, 3000);
 };
-const handleToRollCall2 = () => {
-  ackMyCall({call_id: rollCallData.value.id}).then((res)=>{
-    router.push({
-      name: "rollCallRecord2",
-      query: { id: rollCallData.value.id }
-    });
+const answerCall = () => {
+  const context = canvas.value.getContext("2d");
+  context.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height);
+  const photoDataUrl = canvas.value.toDataURL("image/png");
+  
+  ackMyCall({call_id: rollCallData.value.id, photo_data: photoDataUrl}).then((res)=>{
+    img.value = "2";
+    setTimeout(() => {
+      // 3秒后切换到详情页
+      router.push({
+        name: "rollCallRecord2",
+        query: { id: rollCallData.value.id }
+      });
+    }, 3000);
   })
 };
 const calculateDuration = startTimeStr => {