当前位置：首页 > VUE

vue实现摄像功能

2026-01-19 10:16:34VUE

Vue 实现摄像功能的方法

使用 Vue 实现摄像功能可以通过浏览器的 MediaDevices API 完成。以下是一个完整的实现方案，包括权限请求、视频流捕获和拍照功能。

基本实现步骤

在 Vue 组件的 template 中创建一个视频元素和一个拍照按钮：

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="capture">拍照</button>
    <canvas ref="canvas"></canvas>
  </div>
</template>

在 script 部分初始化摄像头并实现拍照功能：

<script>
export default {
  data() {
    return {
      stream: null,
    };
  },
  methods: {
    async startCamera() {
      try {
        const video = this.$refs.video;
        this.stream = await navigator.mediaDevices.getUserMedia({
          video: true,
        });
        video.srcObject = this.stream;
      } catch (error) {
        console.error("摄像头访问失败:", error);
      }
    },
    capture() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
      const imageData = canvas.toDataURL("image/png");
      console.log(imageData); // 可以保存或上传
    },
  },
  mounted() {
    this.startCamera();
  },
  beforeDestroy() {
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
    }
  },
};
</script>

处理权限和错误

添加用户权限提示和错误处理逻辑：

methods: {
  async startCamera() {
    try {
      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        throw new Error("浏览器不支持摄像头访问");
      }
      const video = this.$refs.video;
      this.stream = await navigator.mediaDevices.getUserMedia({
        video: { width: 1280, height: 720 },
      });
      video.srcObject = this.stream;
    } catch (error) {
      alert(`摄像头访问失败: ${error.message}`);
    }
  },
}

切换前后摄像头

如果需要切换前后摄像头，可以在 getUserMedia 中指定 facingMode：

data() {
  return {
    facingMode: "user", // "user" 前置摄像头，"environment" 后置摄像头
  };
},
methods: {
  async toggleCamera() {
    this.facingMode = this.facingMode === "user" ? "environment" : "user";
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
    }
    await this.startCamera();
  },
  async startCamera() {
    this.stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: this.facingMode },
    });
  },
}

保存和下载照片

将拍照结果保存为文件并允许下载：

vue实现摄像功能

methods: {
  capture() {
    const canvas = this.$refs.canvas;
    const imageData = canvas.toDataURL("image/png");
    const link = document.createElement("a");
    link.href = imageData;
    link.download = "photo.png";
    link.click();
  },
}