Comments (6)
Inside the tar file are all the jpg or png files
from ccapture.js.
If I double click on the tar file I get a *.cpgz, so I guess the file is corrupted?
from ccapture.js.
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
from ccapture.js.
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?
from ccapture.js.
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
from ccapture.js.
Same issue, tried many different configurations and never able to get a valid archive.
from ccapture.js.
Related Issues (20)
- Is it possible to do capturing in a Web Worker thread? HOT 1
- Capture an audio-reactive application HOT 3
- using CCapture to render a javascript starfield animation as a webm file HOT 2
- .tar is empty HOT 1
- gif transparency?
- How to use it with Lottie ?
- I have an error message in Terminal when I roll up with CCapture HOT 1
- Usage with React: .start() causes window.requestAnimationFrame to stop working. HOT 2
- "Seeked" event doesn't trigger on html5 video when CCapturer is on HOT 4
- Angular NPM WebMWriter not defined HOT 2
- Error: Uncaught [TypeError: window.CCapture is not a constructor] HOT 1
- rangeerror maximum call stack size exceeded ccapture
- Uncaught (in promise) ReferenceError: download is not defined
- ReferenceError: window is not defined HOT 2
- How can I record the canvas background
- CCapture with setInterval not working
- how can i record again without reloading the page?
- CCapture package can't be installed thru npm
- What is workers path? HOT 1
- Use for record animation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ccapture.js.