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