<input type=”button” title=”开启摄像头” value=”开启摄像头” onclick=”getMedia()” />

    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()">照相</button>

function getMedia() {

        let constraints = {
            video: {width: 500, height: 500},
            audio: true
        };
        //取得video摄像头地区
        let video = document.getElementById("video");
        //这里引见新的要领，返回一个 Promise对象
        // 这个Promise对象返回胜利后的回调函数带一个 MediaStream 对象作为其参数
        // then()是Promise对象里的要领
        // then()要领是异步实行，当then()前的要领实行完后再实行then()内部的顺序
        // 防止数据没有获取到
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
            video.srcObject = MediaStream;
            video.play();
        });
    }

function takePhoto() {

  //取得Canvas对象
  let video = document.getElementById("video");
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, 500, 500);
  }
  
  
  
  泉源：CSDN 

原文：https://blog.csdn.net/lishund…