在Vue项目中调用摄像头

JxHillMan

于 2025-02-27 00:30:00 发布

阅读量805

点赞数 9

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/hz_lgf/article/details/145883801

版权

Vue 专栏收录该内容

10 篇文章

订阅专栏

以下是在Vue项目中实现手机浏览器调用摄像头的完整技术方案，综合多个来源的关键信息整理而成：

一、核心技术实现

1. 基础摄像头调用

通过HTML5的navigator.mediaDevices.getUserMedia API实现，需注意以下要点：

<template>
  <video ref="video" autoplay></video>
  <button @click="startCamera">开启摄像头</button>
</template>

<script>
export default {
  methods: {
    async startCamera() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { facingMode: 'user' }, // 明确指定前置摄像头
          audio: false
        })
        this.$refs.video.srcObject = stream
      } catch (error) {
        this.handleCameraError(error) // 统一错误处理
      }
    }
  }
}
</script>

关键点：

facingMode: 'user'强制调用前置摄像头（iOS有效，安卓部分机型需手动切换）1
必须部署在HTTPS环境（本地调试可用localhost）1 4

2. 拍照功能实现

<template>
  <canvas ref="canvas" style="display:none"></canvas>
  <img :src="capturedImage" v-if="capturedImage">
</template>

<script>
export default {
  data() {
    return { capturedImage: null }
  },
  methods: {
    capturePhoto() {
      const canvas = this.$refs.canvas
      const video = this.$refs.video
      canvas.width = video.videoWidth
      canvas.height = video.videoHeight
      canvas.getContext('2d').drawImage(video, 0, 0)
      this.capturedImage = canvas.toDataURL('image/png')
    }
  }
}
</script>

特性：

通过Canvas实现画面截取2 4
Base64格式图片可直接用于上传4

二、兼容性处理方案

1. 设备差异处理

设备类型	特性表现	解决方案
iOS	严格遵循W3C标准，支持`capture="user"`	无需特殊处理1
安卓	首次调用可能默认后置摄像头	需用户手动切换，后续自动记忆1
X5内核浏览器	部分支持HTML5规范	使用腾讯X5内核适配方案1

2. 浏览器适配策略

// 兼容旧版API
if (!navigator.mediaDevices?.getUserMedia) {
  navigator.mediaDevices.getUserMedia = function(constraints) {
    const legacyAPI = navigator.webkitGetUserMedia || navigator.mozGetUserMedia
    return new Promise((resolve, reject) => {
      legacyAPI.call(navigator, constraints, resolve, reject)
    })
  }
}

说明：覆盖旧版webkit/moz前缀API4

三、权限管理

1. 权限检测机制

const checkCameraPermission = async () => {
  const permission = await navigator.permissions.query({ name: 'camera' })
  if (permission.state === 'denied') {
    this.$dialog.confirm({
      message: '请在浏览器设置中开启摄像头权限',
      confirmButtonText: '前往设置'
    }).then(() => {
      window.open('app-settings:')
    })
  }
}

最佳实践：结合Permissions API实现精细化控制5

2. 错误类型处理

handleCameraError(error) {
  const errorMap = {
    NotAllowedError: '请允许摄像头权限',
    NotFoundError: '未检测到可用摄像头',
    NotReadableError: '摄像头被其他应用占用'
  }
  this.$toast(errorMap[error.name] || '摄像头初始化失败')
}

覆盖场景：主流错误类型分类提示2 5

四、进阶功能实现

1. 前后摄像头切换

<script>
export default {
  data() {
    return { facingMode: 'user' }
  },
  methods: {
    async switchCamera() {
      this.facingMode = this.facingMode === 'user' ? 'environment' : 'user'
      await this.restartCamera()
    },
    async restartCamera() {
      const stream = this.$refs.video.srcObject
      stream.getTracks().forEach(track => track.stop())
      this.startCamera()
    }
  }
}
</script>

特性：通过facingMode参数动态切换3 5

2. 视频录制功能

let mediaRecorder
startRecording() {
  const stream = this.$refs.video.srcObject
  mediaRecorder = new MediaRecorder(stream)
  mediaRecorder.ondataavailable = e => {
    this.recordedBlobs.push(e.data)
  }
  mediaRecorder.start()
}

注意点：需处理不同浏览器的MIME类型差异2

五、性能优化建议

分辨率控制：

video: {
  width: { ideal: 1280 },
  height: { ideal: 720 },
  frameRate: { ideal: 30 }
}

资源释放策略：

beforeUnmount() {
  this.$refs.video.srcObject?.getTracks().forEach(track => track.stop())
}

移动端适配：

video {
  width: 100vw;
  height: 75vw; /* 4:3比例 */
  object-fit: cover;
}

常见问题解决方案

问题现象	原因分析	解决方案
安卓首次无法调用前置	浏览器实现差异	引导用户手动切换并提示保存设置1
iOS黑屏无画面	未添加`playsinline`属性	添加`<video playsinline>`属性2
华为部分机型报错	EMUI系统限制	提示用户关闭"智能分辨率"设置3
微信内置浏览器异常	X5内核兼容问题	调用`wx.checkJsApi`检测支持性1