如何在多虚拟相机环境下通过Vue.js访问系统内置相机？

核心思路 #

先枚举系统所有视频设备，通过设备标签（label）筛选出内置相机，再指定其deviceId调用相机权限并获取媒体流。

完整实现代码 #

1. Vue 组件模板

<template>
  <div class="camera-container">
    <!-- 渲染相机画面的video元素 -->
    <video ref="cameraVideo" autoplay playsinline></video>
    <!-- 触发打开内置相机的按钮 -->
    <button @click="openBuiltInCamera">打开内置相机</button>
  </div>
</template>

2. 组件逻辑实现

<script>
export default {
  data() {
    return {
      enabledDeviceId: '', // 保存当前启用的内置相机ID
      cameraStream: null // 保存相机媒体流，用于后续关闭
    };
  },
  methods: {
    // 获取所有视频输入设备
    async getVideoDevices() {
      try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        return devices.filter(device => device.kind === 'videoinput');
      } catch (err) {
        console.error('获取设备列表失败:', err);
        return [];
      }
    },
    // 筛选内置相机（根据label关键词匹配，可根据设备实际情况调整）
    async getBuiltInCamera() {
      const videoDevices = await this.getVideoDevices();
      // 常见内置相机label关键词：内置、Integrated、FaceTime（苹果设备）等
      return videoDevices.find(device => 
        device.label.includes('内置') || 
        device.label.includes('Integrated') ||
        device.label.includes('FaceTime HD Camera')
      );
    },
    // 打开指定的内置相机
    async openBuiltInCamera() {
      // 先关闭已存在的相机流
      if (this.cameraStream) {
        this.cameraStream.getTracks().forEach(track => track.stop());
      }

      const builtInCamera = await this.getBuiltInCamera();
      if (!builtInCamera) {
        alert('未检测到系统内置相机');
        return;
      }

      try {
        // 指定内置相机的deviceId请求媒体流
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { 
            deviceId: { exact: builtInCamera.deviceId },
            width: { ideal: 1280 },
            height: { ideal: 720 }
          }
        });

        // 将媒体流绑定到video元素
        this.$refs.cameraVideo.srcObject = stream;
        this.cameraStream = stream;
        this.enabledDeviceId = builtInCamera.deviceId;
      } catch (err) {
        console.error('打开内置相机失败:', err);
        alert('打开相机失败，请检查权限设置');
      }
    }
  },
  beforeUnmount() {
    // 组件销毁时关闭相机流
    if (this.cameraStream) {
      this.cameraStream.getTracks().forEach(track => track.stop());
    }
  }
};
</script>

关键说明 #

• 设备筛选逻辑：不同设备的内置相机标签（label）可能存在差异，需要根据实际测试结果调整getBuiltInCamera中的关键词匹配规则。
• 权限要求：必须在HTTPS环境下运行（本地开发的localhost或127.0.0.1不受限制），且需要用户授权相机访问权限。
• 流管理：每次打开新相机前需关闭旧的媒体流，避免资源占用；组件销毁时也要主动停止流，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Momina Asif