1.html内容：

<button onclick="btn()">打开设备</button>

 <button onclick="imageBtn()">截图</button>

 <video src=""></video>

 <canvas></canvas>

 <img src="" alt="">

2.js内容：

首先需要获取设备调取摄像头；

由于摄像分辨率很大，往往通过canvas直接截取的话会出现截取不全，所以需要隔离媒体流获取浏览器上可视部分，通过调用来做到这一点MediaStream.getVideoTracks()，这将返回一个MediaStreamTrack对象数组；

从媒体流中获取拍摄到的静止图片的信息，并且让canvas的宽度和高度等于媒体流的可视这部分；

进行截图，使用canvas绘图。

<script>

  var video = document.querySelector('video');

  var canvas = document.querySelector('canvas');

  var img = document.querySelector('img');

  //打开设备

  function btn(){

    var constraints = {

      audio:false,

      video:{

        width:750,

        height:1334

      }

    };

    navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream){      // 获取设备

    video.srcObject = mediaStream;

    video.onloadedmetadata = function(e) {

      video.play();

    };

    var track = mediaStream.getVideoTracks()[0],   //隔离媒体流的可视部分

    imageCapture = new ImageCapture(track);        //构造函数

    // 从流中获取拍摄到的静止图片的信息

    imageCapture.getPhotoSettings().then(res=>{

      // return console.log(e);

      console.log('1',res);

      canvas.width = res.imageWidth;   //让canvas的宽和高等于隔离的媒体流的可视这部分

      canvas.height = res.imageHeight;

      console.log('2',canvas.width,canvas.height)

    });

    })

}

  //截图

  function imageBtn(){

    console.log('3',canvas.width,canvas.height)

    var ctx = canvas.getContext('2d');    //二维绘图，该对象导出一个二维绘图 API

    ctx.drawImage(video,0,0);                //drawImage()方法，可以引入图像、画布、视频，并对其进行缩放或裁剪

    var dataUrl = canvas.toDataURL('image/jpeg'); //返回一个包含图片展示的 dataURI 

    img.src = dataUrl;

    console.log('4',dataUrl)

  }

</script>