vue3 实现拍照 录像功能 demo

Vue3 中实现拍照和录像功能通常需要结合原生浏览器的 MediaDevices API 和一些前端框架库，如 @vue/cli、Element UI 等。以下是一个简单的步骤概述：

1. 安装依赖：

   npm install vue element-ui @vue/web-component-wrapper

2. 创建一个 Vue 组件，例如 `Camera.vue`：

   <template>
     <el-dialog title="摄像头" :visible.sync="dialogVisible">
       <video id="camera-preview" playsinline muted></video>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="startCamera">拍照</el-button>
         <el-button type="default" @click="toggleRecording">开始录像</el-button>
         <el-button type="danger" @click="stopRecording">停止录像</el-button>
       </div>
     </el-dialog>
   </template>

   <script>
   import { ref, onMounted, watch } from 'vue';
   import { ElButton, ElDialog } from 'element-plus';

   export default {
     setup() {
       const dialogVisible = ref(false);
       const cameraStream = ref(null);

       // ... (后续函数处理相机操作)

       async function startCamera() {
         if (!navigator.mediaDevices.getUserMedia) return;
         try {
           const constraints = { video: true };
           const stream = await navigator.mediaDevices.getUserMedia(constraints);
           cameraStream.value = stream;
           document.getElementById('camera-preview').srcObject = stream;
         } catch (error) {
           console.error('Error accessing media devices', error);
         }
       }

       function toggleRecording() {
         // 开始录像
         if (cameraStream.value && !recording) {
           // 添加到媒体源...
           recording = true;
         } else {
           // 结束录像并暂停流
           stopRecording();
         }
       }

       function stopRecording() {
         // 停止录制，并关闭流...
         recording = false;
         cameraStream.value = null;
       }

       onMounted(async () => {
         startCamera();
       });

       watch(dialogVisible, (value) => {
         if (value) {
           // 初始化用户交互元素...
         } else {
           // 清理资源...
         }
       });

       return {
         dialogVisible,
       };
     },
   };
   </script>

3. 引入组件并配置权限提示：

   <template>
     <div>
       <button @click="openCamera">打开摄像头</button>
       <Camera v-if="dialogVisible" />
     </div>
   </template>

   <script>
   import Camera from './Camera.vue';

   export default {
     components: {
       Camera,
     },
     methods: {
       openCamera() {
         this.dialogVisible = true;
       },
     },
   };
   </script>

这个示例展示了如何打开摄像头对话框以及基本的拍照和录像控制。实际应用中，你需要处理更多细节，比如错误处理、视频流的存储（可以使用 File API 或者上传服务）、录像时间限制等。记住，对于录像，你还需要访问用户的麦克风。