vue调用摄像头

最新推荐文章于 2024-08-12 21:08:43 发布

花归去

最新推荐文章于 2024-08-12 21:08:43 发布

阅读量5.6k

点赞数

分类专栏： vue 文章标签： vue

原文链接：https://www.cnblogs.com/ljx20180807/p/10839713.html

版权

vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中利用jszip和file-saver库，结合H5的getUserMedia接口，实现实时拍照、图片压缩并保存到本地的功能。用户可以点击开启和关闭摄像头，确认后通过canvas截取视频帧并转化为JPEG图片，最后使用file-saver将图片保存到本地。

摘要由CSDN通过智能技术生成

https://blog.csdn.net/weixin_42120669/article/details/120075590?spm=1001.2014.3001.5501

引用 jszip 和 file-saver

npm install jszip --save
npm install file-saver --save

headImgSrc 点击打开摄像头

closeImgSrc 点击关闭摄像头

引用图片可以自行设置

<template>
  <div>
    <!--开启摄像头-->
    <div class="imagbtn">
      <img
        @click="callCamera"
        style="height: 100px; width: 100px"
        :src="headImgSrc"
        alt="摄像头"
      />
      <img
        @click="closeCamera"
        style="height: 100px; width: 100px"
        :src="closeImgSrc"
        alt="关闭摄像头"
      />
        <!--确认-->
        <el-button v-if="isnotbtn" class="querybtn" size="mini" type="primary" @click="photograph">确认</el-button>
    </div>
    <!--canvas截取流-->
    <canvas ref="canvas" v-show="isnotbtn" width="640" height="480"></canvas>
    <!--图片展示-->
    <video ref="video"  v-show="isnotbtn" width="640" height="480" autoplay></video>
  </div>
</template>   
<script>
export default {
  data() {
    return {
      headImgSrc: require("../../../static/img/sxt.jpg"),
      closeImgSrc: "../../../static/img/gbsxt.jpg",
      isnotbtn:false,
      isnotcanvas:false,
    };
  },
  methods: {
    // 调用摄像头
    callCamera() {
      // H5调用电脑摄像头API
      navigator.mediaDevices
        .getUserMedia({
          video: true,
        })
        .then((success) => {
          this.isnotbtn=true
          // 摄像头开启成功
          this.$refs["video"].srcObject = success;
          // 实时拍照效果
          this.$refs["video"].play();
        })
        .catch((error) => {
          this.$message.error(
            "摄像头开启失败，请检查摄像头是否可用！或者打开摄影头"
          );
          console.error("摄像头开启失败，请检查摄像头是否可用！");
        });
    },
  
    // 拍照
    photograph() {
      let ctx = this.$refs["canvas"].getContext("2d");
      // 把当前视频帧内容渲染到canvas上
      ctx.drawImage(this.$refs["video"], 0, 0, 640, 480);
      // 转base64格式、图片格式转换、图片质量压缩
      let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小

      let str = imgBase64.replace("data:image/jpeg;base64,", "");
      let strLength = str.length;
      let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸  用于判断
      let size = (fileLength / 1024).toFixed(2);
      console.log(size); // 上传拍照信息  调用接口上传图片 .........

      // 保存到本地
      this.dialogCamera = false;
      let ADOM = document.createElement("a");
      ADOM.href = imgBase64 ;
      ADOM.download = new Date().getTime() + ".jpeg";
      ADOM.click();
    },
    // 关闭摄像头
    closeCamera() {
      if (!this.$refs["video"].srcObject) {
        this.dialogCamera = false;
        return;
      }
      let stream = this.$refs["video"].srcObject;
      let tracks = stream.getTracks();
      tracks.forEach((track) => {
        track.stop();
      });
      this.$refs["video"].srcObject = null;
      this.isnotbtn=false
    },
  },
};
</script>
<style scoped>
.imagbtn {
  display: flex;
 align-content: center;
 justify-content: start;
 }
 .querybtn{
   width: 50px;
   height: 50px;
   margin: auto 0;
   border-radius: 15px;
   /* font-size:30px; */
 }
</style>