vue截取video视频中的某一帧

在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>