js调用后置摄像头拍照(若无则前置)

Others 2020-08-18 06:47:33 2020-08-18 06:47:33 1561 次浏览


  <video id="video" width="2100" style="display:none;"  height="2800" autoplay></video>

    <canvas style="display:none;" id="canvas" width="2100" height="2800"></canvas>


  callCamera(videoDom) {
      if (!navigator.mediaDevices) {
        return Promise.reject("浏览器不支持navigator.mediaDevices");
      }
      return navigator.mediaDevices.enumerateDevices().then(arr => {
        let sources = arr
          .filter(a => {
            return a.kind.indexOf("video") > -1;
          })
          .map(a => {
            return a.deviceId;
          });

    return navigator.mediaDevices
      .getUserMedia({
        video: {
          deviceId: sources[1] || sources[0]
        }
      })
      .then(stream =&gt; {
       if ("srcObject" in videoDom) {
            videoDom.srcObject = stream;
        } else {
            //避免在新的浏览器中使用它,因为它正在被弃用。
            videoDom.src = window.URL.createObjectURL(stream);
        }
        videoDom.onloadedmetadata = function (e) {
            videoDom.play();
        };
      });
  });
},

var canvas = document.getElementById("canvas") this.context = canvas.getContext("2d")

this.callCamera(document.getElementById('video')).catch(function (err) {
        console.log(err.name + ": " + err.message);
});

    
    // 点击,canvas画图
    this.context.drawImage(video, 0, 0, 2100, 2800);
    // 获取图片base64链接
    var image = canvas.toDataURL('image/png',1.0);
    // 定义一个img
    var img = new Image();
    //设置属性和src
    img.id = "imgBoxxx";
    img.src = image;
    //将图片添加到页面中
  //  document.body.appendChild(img);

    // base64转文件
    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type: mime});
    }
   // console.log(dataURLtoFile(image, 'aa.png'));
 

   var formdata = new FormData();
      
         formdata.append('file', dataURLtoFile(image, 'aa.png'));
           this.show1=true;
         axios.post('/refresh', formdata, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          }).then(res =&gt; {
           
            //棒棒哒,你上传了

            }
                  
          }).catch(err =&gt; {
            console.log(err);
          });
        // xhr.open("POST", "/refresh", true);
        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
                
        //     }
        // }
        // xhr.send(formdata);
},