如何使用vuejs捕捉当前视频屏幕或缩略图

问题描述

您好，我想捕获当前的视频屏幕并在下面显示结果。

即使我在这里也有参考的Java代码https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I，但我没有得到任何将其转换为工作代码形式的vue的帮助。

问题：我希望VUE的工作代码与VUE相同(https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I)，但不适用于单个缩略图

由于缺乏vuejs知识，我无法在所需位置显示捕获的图像

已尝试方法1：

const app = new Vue({
     el:'#app',
     data(){
       return {
          hello:'world'
       }
   },
   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);
        var snapshot = videoCanvas.toDataURL('image/png');

        var img = new Image();
        
        img.onload = function () {
          document.body.appendChild(this);
        };
        
        img.src = snapshot;
      }
   }
});

<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=""/>
   
</div>

甚至我也尝试将此代码https://www.w3schools.com/code/tryit.asp?filename=GC0Z7WOPB15I转换为https://codepen.io/eabangalore/pen/Pojrzax不起作用

如果两种方法中的任何一种(或解决方案)对我都有效

已尝试方法2：

const app = new Vue({
     el:'#app',
      data() {
    return {
     canvas:''
    };
  },
  methods: {
    capture(video, scaleFactor) {
        if(scaleFactor == null){
            scaleFactor = 1;
        }
        var cx =0;
        var cy=0;
        
        var w = video.videoWidth * scaleFactor;
        var h = video.videoHeight * scaleFactor;
        var canvas = document.createElement('canvas');
            canvas.width  = w * 2;
            canvas.height = h * 0.5;
            
        var ctx = canvas.getContext('2d');
            ctx.drawImage(video, cx, cy, 50, 50);
            ctx.font = '14pt, sans-serif';
            
        return canvas;
    } ,

      displayThumbnail(){
            let video = document.querySelector(`#video`);
            console.log('video',video);
            let scaleFactor = 0.25;
            this.canvas = this.capture(video, scaleFactor);
            console.log('this.canvas',this.canvas);
       }
  }
});

<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="displayThumbnail()"> Capture</button>
    
   <div>----------------------- show captured thumbnail below -----------------------------------</div>
    
<div id="output" style="display: inline-block; top: 4px; position: relative ;border: dotted 1px #ccc; padding: 2px;width:100%" v-html="canvas"></div>
  
  </div>

请帮我提前道谢！

推荐答案

当您尝试Tried Method 1第一个方法时，将以错误结束

我使用Tried Method 2方法创建了一个从视频生成缩略图的示例。

第一步：创建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>
    <div>------------------Show captured thumbnail below -----------------</div>
    <canvas id="canvas"></canvas>
  </div>
</template>

第二步：创建capture方法

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

DEMO

更新了生成多个缩略图的答案，

第一步：创建html模板

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

第二步：methods生成多个缩略图

 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