ノードモジュールvue-webcamがサファリに「予期しないトークン」エラーを投げています

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）doesnのことでした現時点ではサファリのために実際に働いています。そのため、機能検出（Modernizr.getusermedia）を使用してSafariの機能を無効にしました。

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