node-module vue-webcam 在 safari 中抛出“Unexpected token”错误

Question

在我正在开发的应用程序中导入的 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;

我没有发现任何语法错误，但它完全破坏了 safari 中的整个应用程序（版本 9.1.2 (11601.7.7)）

Answer 1

我最终不得不将一些道具类型（高度和宽度）从数字更改为字符串，以允许像“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) 禁用了 Safari 的该功能。

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