init

pages/sys/camera/camera.vue

@@ -0,0 +1,73 @@
+<template>
+  <view class="container">
+    <!-- 视频播放区域 -->
+    <video ref="videoElement" autoplay muted playsinline></video>
+    <button @click="toggleCamera">切换摄像头</button>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      videoStream: null,
+      videoFacingMode: 'user' // 默认使用前置摄像头
+    };
+  },
+  methods: {
+    async startCamera() {
+      try {
+        // 请求访问用户摄像头
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: false,
+          video: true
+        });
+        this.videoStream = stream;
+
+        // 将视频流设置为video元素的源
+        if (this.$refs.videoElement) {
+          this.$refs.videoElement.srcObject = this.videoStream;
+          this.$refs.videoElement.play();
+        }
+      } catch (error) {
+        console.error('Error accessing camera:', error);
+      }
+    },
+    toggleCamera() {
+      // 切换摄像头
+      this.videoFacingMode = this.videoFacingMode === 'user' ? 'environment' : 'user';
+      this.stopCamera();
+      this.startCamera();
+    },
+    stopCamera() {
+      // 停止视频流
+      if (this.videoStream) {
+        this.videoStream.getTracks().forEach(track => track.stop());
+        this.videoStream = null;
+      }
+    }
+  },
+  mounted() {
+    // 页面加载时启动摄像头
+    this.startCamera();
+  },
+  beforeDestroy() {
+    // 页面销毁前关闭摄像头
+    this.stopCamera();
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+video {
+  width: 100%;
+  max-width: 600px;
+}
+</style>