js調用USB攝像頭拍照上傳照片

實現：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("請先拍照再確定上傳照片");
      }
    },