实现：js调用USB摄像头拍照上传照片

注意：部署到线上之后需要使用https才能调用摄像头

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices

js代码实例：(vue项目中)

获取video资源

// 拍照上传获取video
    cameraImgFile() {
      let _this = this;
      if (this.canvas !== null) {
        let cxt = this.canvas.getContext("2d");
        cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
      }
      // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function(constraints) {
          // 首先，如果有getUserMedia的话，就获得它
          var getUserMedia =
            navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

          // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
          if (!getUserMedia) {
            return Promise.reject(
              new Error("getUserMedia is not implemented in this browser")
            );
          }
          // 否则，为老的navigator.getUserMedia方法包裹一个Promise
          return new Promise(function(resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: false })
        .then(function(stream) {
          _this.videoShow = true;
          // 旧的浏览器可能没有srcObject
          _this.$nextTick(() => {
            let video = document.getElementById("videoDo");
            if ("srcObject" in video) {
              video.srcObject = stream;
            } else {
              // 防止在新的浏览器里使用它，应为它已经不再支持了
              video.src = window.URL.createObjectURL(stream);
            }
            video.onloadedmetadata = function(e) {
              video.play();
            };
          });
        })
        .catch(function(err) {
          _this.videoShow = false;
          _this.$message.warning("未发现可拍照设备或出现其他错误！");
        });
    },

获取图片

getAPhoto() {
      //绘制canvas图形
      let video = document.getElementById("videoDo");

      this.canvas = document.getElementById("canvasId");
      this.canvasNoS = document.getElementById("canvasNoShow");

      this.canvas.getContext("2d").drawImage(video, 0, 0, 150, 150); // 获取一张展示的小图
      this.canvasNoS.getContext("2d").drawImage(video, 0, 0, 640, 894); // 获取一张上传的大图
      //把canvas图像转为img图片
      this.photoInfo = this.canvasNoS.toDataURL("image/png");
    },

上传图片

uploadingPhoto() {
      if (this.photoInfo) {
        // 获取到的图片为base64格式
        this.loadingSub = true;
        let formData = new FormData();
        formData.append("imageFile", this.photoInfo.split(",")[1]);
        uploadImgBase64({
          formData: formData
        }).then(res => {
          this.loadingSub = false;
        });
      } else {
        this.$message.warning("请先拍照再确定上传照片");
      }
    },

 

版权声明：本文为zigood原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zigood/p/11804943.html