10.25

src/renderer/src/components/formcomponent.vue

@@ -16,11 +16,10 @@
             <template v-else-if="formItem.type === 'photo'">
               <div v-if="!disabled">
                 <el-row>
-                  <el-col :span="12">
-                    <button @click="openVedio(formItem)">打开摄像头</button>
-                  </el-col>
-                  <el-col :span="12">
-                    <button @click="takePhoto(formItem)">拍照</button>
+                  <el-col :span="24">
+                    <button @click="openVedio(formItem)" style="margin-right: 4px;">打开摄像头</button>
+                    <button @click="takePhoto(formItem)" style="margin-right: 4px;">拍照</button>
+                    <button @click="focus(formItem)" style="margin-right: 4px;">聚焦</button>
                   </el-col>
                 </el-row>
                 <el-row>
@@ -109,6 +108,27 @@ export default {
       let context = canvas.getContext('2d');
       context.drawImage(video, 0, 0, 202, 202);
       this.formData[formItem.prop] = canvas.toDataURL('image/png');
+    },
+    // 聚焦
+    focus(formItem) {
+      if (_.get(this.$refs[`${formItem.prop}video`], [0, "srcObject"], "")) {
+        let tracks = this.$refs[`${formItem.prop}video`][0].srcObject.getVideoTracks()
+        tracks.forEach(track => {
+          if (track.getCapabilities().focusMode && track.getCapabilities().focusMode.includes('continuous')) {
+            track.applyConstraints({ advanced: [{ focusMode: 'continuous' }] });
+          } else {
+            ElMessage({
+              type: 'error',
+              message: '摄像头不支持连续聚焦模式。',
+            })
+          }
+        });
+      } else {
+        ElMessage({
+          type: 'error',
+          message: '摄像头不支持连续聚焦模式。',
+        })
+      }
     }
   },
   async mounted() { },