スクリプトの前にvueテンプレートを実行する方法は？

私はvueを使ってasciiカメラを設定していますが、テンプレートからキャンバスにアクセスしようとしているときにこの問題が発生しています。私はthis.context = this.$ref.canvas.getContext('2d')を使用してキャンバスにアクセスしようとすると、bootCanvas()に私はテンプレートスクリプトの前にvueテンプレートを実行する方法は？

でそれを宣言したにも関わらず、私は、エラーの原因は、スクリプトの前に実行されていることであることを90％確信している"Cannot read property 'canvas' of undefined"を言ってエラーが出ますテンプレートには、私はので、私はここに非常に明白な何かを欠落している可能性がありVUEするのは非常に新しいですし、次のようにこれは私のコードは、すべての

では問題ではないかもしれません。

<template> 
    <div v-if="error === null"> 
    <p v-if = "stream === null"> 
     Please allow acces to your camera when prompted 
    </p> 
    <p v-else> 
    <video class="video" v-bind:src="stream" ref:video autoplay></video> 
    <canvas class="canvas" ref:canvas ></canvas> 
    </p> 
    </div> 
    <div v-else> 
     {{ error }} 
    </div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     //where out errors will be held 
     error: null, 
     //where our stream will be held 
     stream: null, 
     //for html canvas 
     context: null, 
     //ascii options 
     ascii: { 
     contrast: 30, 
     fps: 30 
     } 
    } 
    }, 
    methods: { 
    //access webcam 
    initVideo() { 
     navigator.getUserMedia({ 
     //we want video but not audio 
     video: true, 
     audio: false 
     }, (stream) => { 
     //get the webcam stream 
     this.stream = window.URL.createObjectURL(stream) 

     this.bootCanvas().then(() => { 
      this.startAsciiRendering() 
     }) 
     //throw error if failed 
     }, this.setError) 
    }, 
    startAsciiRendering() { 
     setInterval(() => { 
     alert('run') 
     // console.log('run') 
     }, Math.round(1000/this.ascii.fps)) 
    }, 
    bootCanvas() { 
     return new Promise((resolve, reject) => { 
     this.context = this.$ref.canvas.getContext('2d') 
     //video dimensions 
     this.$refs.canvas.width = 200 
     this.$refs.canvas.height = 150 
     }) 

     resolve() 
    }, 
    //errors 
    setUnsupported() { 
     this.error = 'Your browser does not support video :('; 
    }, 
    setError() { 
     this.error = 'Something went wrong, try refreshing the page'; 
    } 
    }, 
    //mounted = when page loads 
    mounted() { 
    //check if able to get webcam 
    if (navigator.getUserMedia) { 
     this.initVideo() 
    } else { 
     this.setUnsupported() 
    } 
    } 
} 
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only --> 
<style scoped lang="sass"> 
    html, body 
    width: 100% 
    height: 100% 
    margin: 0 
    padding: 0 

    .video 
    width: 200px 
    position: fixed 
    top: 0 
    left: 0 
    z-index: 1 
</style>

出典

2016-11-17 Shayan Javadi