前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js调用USB摄像头拍照上传照片

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

作者头像
用户7043603
发布2022-02-25 14:59:49
3.5K0
发布2022-02-25 14:59:49
举报
文章被收录于专栏:用户7043603的专栏

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

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

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

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

获取video资源

代码语言:javascript
复制
// 拍照上传获取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("未发现可拍照设备或出现其他错误!");
        });
    },
代码语言:javascript
复制
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");
    },
代码语言:javascript
复制
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("请先拍照再确定上传照片");
      }
    },

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档