 
 webcamInit = function(){
 // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
 if (navigator.mediaDevices === undefined) {
    navigator['mediaDevices'] = {};
  }
  if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function (constraints) {
      // 首先，如果有getUserMedia的话，就获得它
      var getUserMedia = navigator['webkitGetUserMedia'] || navigator['mozGetUserMedia'] || navigator[''];

      // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
      if (!getUserMedia) {
        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
      }

      // 否则，为老的navigator.getUserMedia方法包裹一个Promise
      return new Promise(function (resolve, reject) {
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    }
  }
  const constraints = {
    video: { width: 288, height: 384 },
    audio: false
  };
  let videoPlaying = false;
  let video = document.getElementById('video');
  let context = document.getElementById('video_canvas').getContext('2d');
  // 设置线条的颜色
  context.strokeStyle = 'red';
  // 设置线条的宽度
  context.lineWidth = 0.4;

  let x = 288;
  let y = 384;

  context.beginPath();
  context.moveTo(0, y*0.1);
  context.lineTo(x, y*0.1);
  context.closePath();
  context.stroke();
  
  context.beginPath();
  context.moveTo(0, y*0.8);
  context.lineTo(x, y*0.8);
  context.closePath();
  context.stroke();

  context.beginPath();
  context.moveTo(x*0.5, 0);
  context.lineTo(x*0.5, y);
  context.closePath();

  context.stroke();

  let promise = navigator.mediaDevices.getUserMedia(constraints);
  promise.then(stream => {
    // 旧的浏览器可能没有srcObject
    if ("srcObject" in video) {
      video.srcObject = stream;
    } else {
      // 防止再新的浏览器里使用它，应为它已经不再支持了
      video.src = window.URL.createObjectURL(stream);
    }
    video.onloadedmetadata = function (e) {
      video.play();
      videoPlaying = true;
    };
  }).catch(err => {
    console.error(err.name + ": " + err.message);
  })
  document.getElementById('take').addEventListener('click', function () {
    if (videoPlaying) {
      let canvas = document.getElementById('canvas');
      // console.log("videoWidth:"+video.videoWidth+ " videoHeight:"+video.videoHeight);
      
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);

     


      let data = canvas.toDataURL('image/webp');
      console.log("data:" + data);
      document.getElementById('photo').setAttribute('src', data);
    }
  }, false);

}