/**
* 组件： 调用摄像头拍摄的构造函数
* @params {Object} options 参数如下：
*             video {DOM} video元素
*             width {Number} 画布宽度
*             height {Number} 画布高度
*             onShoot {Function} 录像回调函数
*             onError {Function} error回调函数
*         {Object} canvasOption 参数如下：
*             marginTop {Number} 银行卡可视区域距离屏幕顶部的距离，用作画布坐标
*             marginLeft {Number} 银行卡可视区域距离屏幕左侧的距离，用作画布坐标
*             width {Number} 银行卡可视区域宽度
*             height {Number} 银行卡可视区域高度
*调用：
*    Camera.create(options, canvasOption)
*/
function Camera(options, canvasOption) {
  this.video = options.video;
  this.width = options.width || 640;
  this.height = options.height || 480;
  this.shadeMarginTop = canvasOption.marginTop;
  this.shadeMarginLeft = canvasOption.marginLeft;
  this.shadeWidth = canvasOption.width;
  this.shadeHeight = canvasOption.height;
  this.onError = options.onError;
  this.onShoot = options.onShoot;
  this.mediaStreamTrack = null; // 存放视频流
}

Camera.prototype = {
  init: function() {
      if(navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {}
      }
      // 一些浏览器部分支持 mediaDevices。 我们不能直接给对象设置 getUserMedia
      // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function(constraints) {
              // 首先，如果有getUserMedia的话，就获取它
              var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
              
              // 一些浏览器根本没实现它 — 那么就返回一个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);
              });
          }
      }
      this.video.autoplay = 'true';
      this.canvasDom = document.createElement('canvas');
      this.canvasDom.width = this.width; 
      this.canvasDom.height = this.height;
      this.canvasDom.style.display = 'none';
      document.querySelector('body').appendChild(this.canvasDom);
  },
  
  // 检查摄像头是否可用
  canCameraUse: function() {
      return (navigator.mediaDevices.getUserMedia && window.URL);
  },

  // 获取录像流到video中
  shoot: function() {
      var self = this;
      var video = self.video;
      if (self.canCameraUse) {
          navigator.mediaDevices.getUserMedia({
              video: { facingMode: { exact: "environment"} } // 后置摄像头设置
          })
          .then(function(stream) {
              self.mediaStreamTrack = stream
              // 旧的浏览器可能没有srcObject
              if ("srcObject" in video) {
                  video.srcObject = stream;
              }else {
                  // 防止在新的浏览器里使用它，因为它已经不再支持了
                  video.src = window.URL.createObjectURL(stream);
              }
              video.onloadedmetadata = function(e) {
                  video.play();
              };
              video.addEventListener('error', function(error) {
                  stream.stop();
                  self.onError && self.onError(error);
              }, false);
          })
          .catch(function(err) {
              self.onError && self.onError(err)
          })
      }
  },
  
  // 将录像绘制到canvas
  drawVideo: function() {
      var canvasDom = this.canvasDom;
      var ctx = canvasDom.getContext('2d');
      ctx.fillStyle = "#000000";
      // 视频可能不会充满屏幕，这时候，需要按照视频缩放的比例来剪切所需要的部分
      let videoHeight = this.video.videoHeight // 视频本身的高度
      let videoWidth = this.video.videoWidth // 视频本身的宽度
      let videoWidthScale = 1
      if (videoWidth && this.width !== videoWidth) { // 计算当前视频的缩放比例
          videoWidthScale = videoWidth / this.width
      }
      let newHeight = videoHeight / videoWidthScale // 当前显示的视频高度
      let videoMarginTop = this.video.clientHeight - newHeight > 0 ?
                           (this.video.clientHeight - newHeight) / 2 : 0 // 当前视频距离顶部高度
      let x = Math.floor(this.shadeMarginLeft * 1) // 计算剪切视频的x坐标
      let y = Math.floor((this.shadeMarginTop - videoMarginTop) * 1) // 计算剪切视频的y坐标
      let w = videoWidth - x * 2, h = Math.ceil(videoHeight - y * 2) // 计算剪切视频的宽高
      ctx.fillRect(this.shadeMarginLeft, this.shadeMarginTop, this.shadeWidth, this.shadeHeight); // 填充画布
      ctx.drawImage(this.video, x, y, w, h, this.shadeMarginLeft, this.shadeMarginTop, this.shadeWidth, this.shadeHeight) // 剪切视频并绘制成图片
      this.ctx = ctx
  },
  
  // 录像事件绑定
  addShootEvent: function() {
      let self = this;
      let video = self.video;
      // 正在录像
      video.addEventListener('timeupdate', function() {
          self.drawVideo();
          self.onShoot && self.onShoot()
      }, false)
  },

  // 将录像成图片
  snapshot: function(cb, imageType) {
      let self = this
      let canvas = self.canvasDom;
      imageType = imageType || 'jpeg';
      let imageSrc = canvas.toDataURL('image/' + imageType);
      cb && cb(imageSrc);
  },

  // 开始录像
  play: function() {
      this.video.play();
  },

  // 停止录像
  pause: function() {
      this.video.pause();
      let self = this
      // 关闭摄像头
      self.mediaStreamTrack.getVideoTracks().forEach(function(track) {
          track.stop();
          self.ctx.clearRect(0, 0, self.canvasDom.width, self.canvasDom.height); // 清除画布
      });
  },
  
  render: function() { // 初始化
      this.init();
      this.shoot();
      this.drawVideo();
      this.addShootEvent();
  }
  
};

Camera.create = function(options, canvasOption) {
  var camera = new Camera(options, canvasOption.canvasStyle);
  camera.render();
  return camera;
};

export default Camera