vue How to get the first frame of the video

findvideocover() {
        let size = 160
        // Get video node        const video = ("videoPlay");
         = size
         = size
         = 1 //First frame        //Create a canvas object        const canvas = ("canvas")
         = size
         = size
        this.$nextTick(()=>{
          // Draw using the canvas object method          ("2d").drawImage(video, 0, 0, , );
          // Convert to base64 form          const img = ("image/jpeg") // This is the base64 of the picture           = img
        })
      }

import videotoimg from '@/components/videoToImg'

components: {
    videotoimg
},

<videotoimg :fileObj="fileObj" @uploadSuccess='onSuccess'></videotoimg>
// Corresponding data> data:
fileObj = {
   src: blob:http://192.168.3.15:9528/c1df8e08-039b-4da8-a653-4b93f3747d36, // Selected video file   videoW: number, // Video width unit is px   videoH: number, // Video height unit is px};
// Here are the parameters returned to you after the video is uploaded successfully> methods:
onSuccess: url => { url = { imgUrl: "/upload/image/20201124/" }}

<template>
  <div  style="height: 1px; overflow:hidden; opacity: 0">
    <div ></div>
    <img :src="imgSrc" />
    <div>
      <div @click="cutPicture">screenshot {{ videoW }}</div>
    </div>
    <canvas
      
      :width="videoW + 'px'"
      :height="videoH + 'px'"
    ></canvas>
  </div>
</template>
<script>
import { getRequestHeader } from "@/utils/auth"; // Here is the request header to get my own. You can ignore it or delete it.import axios from "axios";
export default {
  props: {
    fileObj: {
      type: Object,
      default: {},
      require: true,
    },
  },
  name: "videotoimg",
  watch: {
    fileObj: {
      handler(newVal, oldVal) {
        (newVal, oldVal);
        ();
         = ;
         = ;
        ();
      },
    },
  },
  data() {
    return {
      imgSrc: "",
      videoW: "",
      videoH: "",
      headers: getRequestHeader(),
      uploadUrl: .BASE_API + "v1/general/resource/upload_video", // The address uploaded after intercepting    };
  },
  methods: {
    onClean() {
       = "";
       = "";
       = "";
    },
    cutPicture() {
      let area = ("#videoArea");
       = `
        <video src="${}" controls style="width: ${}px"></video>
      `;
      const that = this;
      setTimeout(() => {
        var v = ("video");
        let canvas = ("myCanvas");
        var ctx = ("2d");
        (v, 0, 0, , );
        var oGrayImg = ("image/jpeg");
         = oGrayImg;
        var arr = (","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = ,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = (n);
        }
        var file = new File([u8arr], "", { type: mime });
        (file); // Note: If you don't need to upload, you can get the ile of the picture here        (file); 
      }, 1000);
    },
    update(file) {
      // Upload photos      // It's very simple here. It's the upload logic to modify it according to your needs.      let self = this;
      let param = new FormData();
      ("resourceFile", file); 
      let config = {
        headers: { "Content-Type": "multipart/form-data", ... },
      }; // Add request header      (, param, config).then((res) => {
        if ( === 200) {
          self.$emit("uploadSuccess", { imgUrl:  }); // Return data!        }
      });
    },
  },
};
</script>