text: // TODO:
  // 1. Enable mirror option
  // 2. Improve options handling
  // 3. Error handling
  
  const Vue = require('vue').default
  
  const WebcamComponent = Vue.extend({
    render: function (h) {
      return h('video', {
        ref: 'video',
        attrs: {
          width: this.width,
          height: this.height,
          src: this.src,
          autoplay: this.autoplay
        }
      });
    },
  
    props: {
      autoplay: {
        type: Boolean,
        default: true
      },
      width: {
        type: Number,
        default: 800
      },
      height: {
        type: Number,
        default: 600
      },
      mirror: {
        type: Boolean,
        default: true
      },
      screenshotFormat: {
        type: String,
        default: 'image/jpeg'
      }
    },
  
    data () {
      return {
        video: '',
        src: '',
        stream: '',
        hasUserMedia: false,
        styleObject: {
          transform: 'scale(-1, 1)',
          filter: 'FlipH'
        }
      };
    },
  
    methods: {
      getPhoto () {
        if (!this.hasUserMedia) return null;
  
        const canvas = this.getCanvas();
        return canvas.toDataURL(this.screenshotFormat, 1);
      },
      getCanvas () {
        if (!this.hasUserMedia) return null;
  
        const video = this.$refs.video;
        if (!this.ctx) {
          // Get the device pixel ratio, falling back to 1.
          var dpr = window.devicePixelRatio || 1;
          // console.log('Here the pixel ratio: ', dpr)
          const canvas = document.createElement('canvas');
          canvas.height = video.clientHeight;
          canvas.width = video.clientWidth;
          // canvas.width = video.clientWidth * dpr;
          // canvas.height = video.clientHeight * dpr;
          this.canvas = canvas;
  
          this.ctx = canvas.getContext('2d');
          // this.ctx.scale(dpr, dpr);
  
            /*if (this.mirror) {
             const context = canvas.getContext('2d');
             context.translate(canvas.width, 0);
             context.scale(-1, 1);
             this.ctx = context;
             } else {
             this.ctx = canvas.getContext('2d');
             }*/
        }
  
        const { ctx, canvas } = this;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  
        return canvas;
      }
    },
  
    mounted: function () {
      this.video = this.$refs.video;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
  
      if (navigator.getUserMedia) {
        navigator.getUserMedia({ video: true }, (stream) => {
          this.src = window.URL.createObjectURL(stream);
        this.stream = stream;
        this.hasUserMedia = true;
      }, (error) => {
          console.log(error);
        });
      }
    },
  
    beforeDestroy: function () {
      this.video.pause();
      this.src = '';
      this.stream && this.stream.getTracks()[0] && this.stream.getTracks()[0].stop();
    },
  
    destroyed: function () {
      console.log('Destroyed');
    }
  });
  
  const VueWebcam = Vue.component('vue-webcam', WebcamComponent);
  export default VueWebcam;
  