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

插件不是很大，只是會後的位置代碼：

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; 

我不能發現任何語法錯誤，但它完全破壞了safa中的整個應用程序ri（版本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