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

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


  <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 => {
           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 => {
               
                //棒棒哒,你上传了

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




分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论