在vue中如何做到給視訊拍照，留住那一幀的美好呢？

且看程式碼

<template>
    <div>
        <video src="../assets/video.mp4" controls style="width:300px;"></video>
        <img :src="imgSrc">
        <div>
            <botton @click="cutPicture">
                拍照
            </botton>
        </div>
        <canvas id="myCanvas" width="343" height="200"></canvas>
    </div>
</template>
<script>
export 
 
default {
    name:"video",
    data() {
        return {
            imgSrc:''
        };
    },
    methods: {
        //擷取當前幀的圖片
        cutPicture(){
            let self=this;
            var v = document.querySelector("video");
            let canvas = document.getElementById('myCanvas')
            
 
var ctx = canvas.getContext('2d');                  
            ctx.drawImage(v, 0, 0, 343, 200);
            var oGrayImg = canvas.toDataURL('image/jpeg');
            this.imgSrc = oGrayImg
        },
    }
}
</script>