getUserMedia调用本地摄像头并拍照上传

getUserMedia调用本地摄像头并拍照上传

//html部分
<video id="video" autoplay="autoplay" style=\'width:640px;height:480px\'></video>
<button id=\'picture\'>PICTURE</button>
<canvas id="canvas" width="640" height="480"></canvas>


//js部分
var canvas = document.querySelector("#canvas");
        let context = canvas.getContext("2d");
        let video = document.querySelector(\'#video\');
        let myConstraints = {
          video: {
            facingMode: \'user\' // 优先调用前置摄像头
          }
        }
        navigator.mediaDevices.getUserMedia(myConstraints).then((stream) => {
          // createObjectURL是个非常有用的API
          video.src = window.URL.createObjectURL(stream)
          video.play()
        }, (error) => {
          console.error(error.name || error)
        })
      //将拍好的照片显示在画布上
      document.getElementById("picture").addEventListener("click", function () {
        context.drawImage(video, 0, 0, 640, 480);
        //将canvas截图转为base64
        let imgurl= canvas.toDataURL();
        let data= {
          imgurl: imgurl
        }
        $.post(yourUrl,data,function(res) {
          console.log(res);
        })
}