[Vuejs]-Node-module vue-webcam is throwing 'Unexpected token' error in safari

by

0👍

I ended up having to change some of the props types (height and width) from number to string anyways to allow for percentage values like “100%” so ended up putting it all into my own custom component as I had to change some of the props from number to Strings anyways:

<template>
  <video
      v-el:video
      :width="width"
      :height="height"
      :src="src"
      :autoplay="autoplay"
      :style="styleObject"
  ></video>
</template>

<script>

export default {
  props: {
      autoplay: {
          type: Boolean,
          default: true
      },
      width: {
          type: String,
          default: 400
      },
      height: {
          type: String,
          default: 300
      },
      mirror: {
          type: Boolean,
          default: true
      },
      screenshotFormat: {
          type: String,
          default: 'image/jpeg'
      }
  },
  data: function () {
      return {
          video: '',
          src: '',
          stream: '',
          hasUserMedia: false,
          styleObject: {
              transform: 'scale(-1, 1)',
              filter: 'FlipH'
          }
      };
  },
  methods: {
    getPhoto: function() {
        if (!this.hasUserMedia) return null;

        const canvas = this.getCanvas();
        return canvas.toDataURL(this.screenshotFormat);
    },
    getCanvas: function() {
        if (!this.hasUserMedia) return null;

        const video = this.$els.video;
        if (!this.ctx) {
            const canvas = document.createElement('canvas');
            canvas.height = video.clientHeight;
            canvas.width = video.clientWidth;
            this.canvas = canvas;

            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;
    }
  },
  ready: function() {
      this.video = this.$els.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.getTracks()[0].stop();
  },
  destroyed: function() {
      console.log('Destroyed');
  }
}

</script>

One thing that came up once this was not breaking the site anymore was that webcam (getusermedia) doesn’t actually work for safari currently, therefore I ended up disabling that functionality for Safari using feature detection (Modernizr.getusermedia).

http://caniuse.com/#feat=stream

Leave a comment