Why I'm getting a *.tar file

utiq commented 7 years ago

Hi, I'm trying to integrate this plugin into an Angular2 application, and it generates a *.tar instead of a JPG. What do you think I'm doing wrong?

http://plnkr.co/edit/fxF8bwtN0RjBFVwqBiwQ (Hit on Run, main source is in src/app.ts

spite commented 7 years ago

Inside the tar file are all the jpg or png files

utiq commented 7 years ago

If I double click on the tar file I get a *.cpgz, so I guess the file is corrupted?

spite commented 7 years ago

I've never really used CCapture to capture just one frame. Do you want to capture just one frame? there's easier ways to do that

utiq commented 7 years ago

Yes, I know it's possible to render it in a different way. I was trying to render a video using fabricjs and I had no success, that's why I started with a single frame to discard any error. Althought, since it supports JPG formats, it shouldn't be able to export just one frame?

utiq commented 7 years ago

Hi @spite, this is the use case I was talking about. Could you tell me why isn't working please?

// Creates a HTML5 video tag
var canvas = new fabric.Canvas('canvas', {});

var videoElement = document.createElement('video');
videoElement.width = 600;
videoElement.height = 337;
videoElement.src = 'comp1.mp4';

video = new fabric.Image(videoElement, {
  left: 310,
  top: 200,
  originX: 'center',
  originY: 'center',
});

canvas.add(video);
video.getElement().play();
video.getElement().muted= true;
canvas.setActiveObject(video).renderAll();

function renderVideo() {
  var capturer = new CCapture( { format: 'webm', verbose: true } );

  var request;
  var render = function() {

    canvas.renderAll();
    capturer.capture( canvas.getElement() );
    request = fabric.util.requestAnimFrame(render);

    var current_time = video.getElement().currentTime;
    if(current_time >= 5) {
        video.getElement().pause();
      window.cancelAnimationFrame(request);
      capturer.stop();
      capturer.save();
    }
    console.log(current_time);
  };

  video.getElement().play();
  capturer.start();
  fabric.util.requestAnimFrame(render);
}

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

  </head>
  <body>
    <canvas id="canvas" width="800" height="450"></canvas>
    <button onclick="renderVideo()">Render Video</button>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
  <script src="./CCapture.all.min.js"></script>
  <script src="./app.js"></script>
</html>

source file and video: https://www.dropbox.com/s/mcrcpg7b1elig51/test.zip?dl=0

rankinstudio commented 7 years ago

Same issue, tried many different configurations and never able to get a valid archive.

spite / ccapture.js

Why I'm getting a *.tar file #50