node-module vue-webcam выдает ошибку «Неожиданный токен» в сафари

Я получаю сообщение об ошибке с модулем vue, импортированным в приложение, над которым я работаю. Ошибка:

SyntaxError: Unexpected token '{'. Expected an identifier name in const declaration.

Кажется, это исходит из этой строки:

eval("const Vue = __webpack_require__(43);\n\nconst WebcamComponent = Vue.extend({\n    props: {\n        autoplay: {\n            type: Boolean,\n            default: true\n

Используемый компилятор - laravel elixir

Плагин не очень большой, просто выложу код здесь:

const Vue = require('vue');

const WebcamComponent = Vue.extend({
    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'
        }
    },
    template: `
        <video
            v-el:video
            :width="width"
            :height="height"
            :src="src"
            :autoplay="autoplay"
            :style="styleObject"
        ></video>
    `,
    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);
        },
        getCanvas () {
            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 () {
        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 () {
        this.video.pause();
        this.src = '';
        this.stream.getTracks()[0].stop();
    },
    destroyed () {
        console.log('Destroyed');
    }
});

const VueWebcam = Vue.component('vue-webcam', WebcamComponent);

module.exports = VueWebcam;

Я не вижу в нем синтаксической ошибки, но это полностью ломает все приложение в сафари (версия 9.1.2 (11601.7.7))


vue.js vue-component ecmascript-6
person Dine    schedule 18.11.2016    source источник
comment
Странно, что это не работает только в одном браузере, похоже, что он использует литерал шаблона, вы используете babels transform-es2015-template-literals?   -  person craig_h    schedule 18.11.2016
comment
Спасибо за внимание, это может помочь мне, если проблема возникнет снова. Это только дало мне ошибку в сафари, однако была ошибка компиляции, связанная с компонентом веб-камеры.   -  person Dine    schedule 18.11.2016
comment
const { ctx, canvas } = this; попробуйте изменить const на let или var   -  person euvl    schedule 18.11.2016

Ответы (1)


arrow_upward
0
arrow_downward

В итоге мне пришлось изменить некоторые типы реквизита (высоту и ширину) с числа на строку, чтобы учесть процентные значения, такие как «100%», поэтому в итоге я поместил все это в свой собственный пользовательский компонент, поскольку мне пришлось изменить некоторые из в любом случае реквизиты из числа в строки:

<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>

Одна вещь, которая возникла после того, как это больше не ломало сайт, заключалась в том, что веб-камера (getusermedia) на самом деле не работает для сафари в настоящее время, поэтому я отключил эту функцию для Safari с помощью обнаружения функций (Modernizr.getusermedia).

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

person Dine    schedule 18.11.2016