Vue.js 2中使用MediaDevices.getUserMedia()切换摄像头失败求助

看起来你遇到的核心问题是切换摄像头时没有正确关闭旧的媒体流，同时方法绑定和参数处理存在逻辑冲突，导致新的摄像头无法正常启动。我帮你梳理下问题点并给出修正后的代码：

问题分析 #

1. 方法绑定不匹配：模板里按钮绑定的是camera('environment')和camera('user')，但你定义的方法是Camera()（大小写不一致），而且这个方法没有接收参数，而是依赖front变量，逻辑混乱。
2. 未释放旧媒体流：每次调用getUserMedia获取新流之前，没有关闭之前的媒体轨道，浏览器可能会因为占用旧设备而拒绝新的请求。
3. Video元素初始化问题：data里的video: {}没有正确关联到DOM元素，应该通过$refs获取。
4. 切换逻辑未触发正确的摄像头调用：changeCamera方法没有被绑定到按钮点击，而且原方法的逻辑和按钮传参的方式不匹配。

修正后的完整代码 #

<template>
  <div class="container" id="scanIdCardPage">
    <div class="scanIdCardDiv">
      <div class="scanCardContainer" v-show="afterTakingPhoto">
        <video ref="video" id="video" :style="{width: divWidth}" autoplay playsinline></video>
        <canvas ref="canvas" id="canvas" width="320" height="240" style="display: none;"></canvas>
      </div>
    </div>
    <div class="takePhotoBtnDiv">
      <div>
        <button type="button" class="btn btn-info" @click="switchCamera('environment')">Back Camera</button>
        <button type="button" class="btn btn-info" @click="switchCamera('user')">Front Camera</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      afterTakingPhoto: true, // 确保视频容器默认显示
      divWidth: '100%', // 可根据需求调整视频宽度
      currentStream: null // 保存当前媒体流，用于切换时释放
    }
  },
  methods: {
    async switchCamera(facingMode) {
      // 先关闭旧的媒体流，避免设备占用冲突
      if (this.currentStream) {
        this.currentStream.getTracks().forEach(track => track.stop())
      }

      try {
        // 请求指定摄像头的媒体流
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { 
            facingMode: facingMode,
            width: { ideal: 1280 },
            height: { ideal: 720 }
          }
        })
        
        // 获取video元素并绑定新流
        const videoElement = this.$refs.video
        videoElement.srcObject = stream
        await videoElement.play()
        
        // 保存当前流，方便下次切换时释放
        this.currentStream = stream
      } catch (err) {
        console.error('摄像头切换失败:', err)
        alert('无法访问摄像头，请检查权限设置')
      }
    }
  },
  mounted() {
    // 页面加载完成后默认启动后置摄像头
    this.switchCamera('environment')
  }
}
</script>

关键改进点说明 #

• 媒体流释放：每次切换前调用track.stop()关闭旧流，这是解决切换失效的核心步骤——浏览器不允许同时占用多个摄像头设备。
• 方法逻辑统一：用switchCamera方法直接接收facingMode参数，和按钮的点击需求一一对应，逻辑更清晰易懂。
• 使用srcObject替代createObjectURL：createObjectURL已被废弃，直接用srcObject绑定媒体流更高效，还能避免内存泄漏。
• 添加playsinline属性：移动端Chrome需要这个属性才能让视频正常内联播放，避免自动全屏影响体验。
• 错误处理：用try/catch捕获权限拒绝、设备不可用等异常，提升用户体验并方便调试。

额外注意事项 #

• 确保网站使用HTTPS协议：getUserMedia在非安全上下文（HTTP）下无法正常工作，移动端Chrome对此限制严格。
• 权限引导：第一次访问时用户需要允许摄像头权限，如果用户之前拒绝过，需要引导他们在浏览器设置中开启权限。
• 兼容性降级：部分旧设备可能不支持facingMode参数，可以额外通过枚举设备deviceId的方式指定摄像头，作为降级方案。

内容的提问来源于stack exchange，提问作者Alauddin Ahmed