[Vuejs]-How to capture current video screen or thumbnail with vuejs

When you try for Tried Method 1 first approach you will end up with error

Error in v-on handler: "SecurityError: Failed to execute ‘toDataURL’
on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

• For security reasons, your local drive is declared to be
  "other-domain" and will taint the canvas.
• Seems like you are using an image from a URL that has not set correct
  Access-Control-Allow-Origin header and hence the issue.. You can
  fetch that image from your server and get it from your server to
  avoid CORS issues

I created an example with Tried Method 2 approach for generating thumbnail from video.

Step 1: Create HTML template

<template>
  <div id="app">
    <video id="video" controls="controls">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" /></video
    ><br />
    <button @click="capture()">Play and Capture</button>
    <div>------------------Show captured thumbnail below -----------------</div>
    <canvas id="canvas"></canvas>
  </div>
</template>

Step 2: Create capture method

capture() {
   let videoCanvas = document.getElementById("canvas");
   let video = document.getElementById("video");
   videoCanvas.getContext("2d").drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
},

DEMO

Updated the answer for generating multiple thumbnails,

Step 1: create html template

<div id="app">
  <video id="video" controls="controls">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" />
  </video><br />
  <button @click="capture()">Play and Capture</button>&nbsp;
  <button @click="reset()">Reset</button>
  <div>------------------Show captured thumbnail below -----------------</div>
  <div id="output"></div>
</div>

Step 2: methods for generating multiple thumbnails

 capture() {
  var video = document.getElementById("video");
  var output = document.getElementById("output");
  var canvas = this.createThumbnail(video, this.scaleFactor);
  canvas.onclick = function () {
    window.open(this.toDataURL());
  };
  this.listThumbnails.unshift(canvas);
  output.innerHTML = "";
  this.listThumbnails.forEach((item, index) => {
    if (item) {
      output.appendChild(item);
    }
  });
},
createThumbnail(video, scaleFactor) {
  if (scaleFactor == null) {
    scaleFactor = 1;
  }
  var w = video.videoWidth * scaleFactor;
  var h = video.videoHeight * scaleFactor;
  var canvas = document.createElement("canvas");
  canvas.style.margin = "5px";
  canvas.width = w;
  canvas.height = h;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(video, 0, 0, w, h);
  return canvas;
},
reset() {
  var output = document.getElementById("output");
  output.innerHTML = "";
  this.listThumbnails = [];
}

Multiple Thumbnail Demo

You need a new variable within your data section (below hello:) lets call it imgSrc: null.

var snapshot = videoCanvas.toDataURL('image/png'); should be replaced with this.imgSrc = videoCanvas.toDataURL('image/png'); everything below including img.src = snapshot; could be deleted.

Now you can use data binding for your HTML element.

<img :src="imgSrc" v-if="imgSrc" />

const app = new Vue({
     el:'#app',
     data(){
       return {
          hello:'world',
          imgSrc: null,
       }
   },
   methods:{
      capture(){
             alert('captured called');
             let videoCanvas = document.createElement('canvas');
             
         let video = document.getElementById('video')

        videoCanvas.height = video.height;
        videoCanvas.width = video.width;
        videoCanvas.getContext('2d').drawImage(video, 0, 0);
        this.imgSrc = videoCanvas.toDataURL('image/png');
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">

   <video id="video" controls="controls">
      <source        src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
   </video>
   
   <button @click="capture()">Play and Capture</button>
   
   
   <div>------------------Show captured thumbnail below -----------------</div>

    <img :src="imgSrc" v-if="imgSrc" />
   
</div>