spite / ccapture.js Goto Github PK
View Code? Open in Web Editor NEWA library to capture canvas-based animations at a fixed framerate
License: MIT License
A library to capture canvas-based animations at a fixed framerate
License: MIT License
This a sample code pen i have created.
http://codepen.io/rudi8292/pen/wWxJmE
Getting the above error
When downloading the file i get project.tar
than unpacks to project.tar.cpgz
with nothing inside. Longer movies have 0 bytes or fail completely. JPG export works fine.
OSX 10.12, Chrome 53
_timeDisplay.id = 'vidhud'; should work. Just not sure where to find it in the min.js.
Thanks!
I have a use case where I want to use CCapture to export the Canvas frames to use with an external AVI Encoder.
In order to do this most effectively, I'd like to export each Canvas frame as an individual file blob so that it can be passed directly to the encoder.
I'm about to embark on this work, so any thoughts on how this might work in the context of PR would be helpful to allow me to contribute it back.
Hi,
First of all, many thanks for this wonderful package.
My use case is as follows:
I have a trading canvas stockchart which gets updated with new data coming from server every 1 minute or so. The chart is practically static in nature waiting for the next data point to arrive at which point, it re gets re rendered and updated. Now I would like to create a fast paced video of the canvas every time it gets updated (rendered) as against capturing the idle time in between. So I can create some logic to make sure that the video starts capturing every time there is a render of the chart and immediate stop it using a timer few milliseconds after the rendering is complete.
My query is as follows:
Thank you
I would like to record frames or video, for a canvas bigger than the screen resolution of my laptop.
Was wondering if you had thought about this. I am thinking that dong it server side is the only way.
Basically a way to call webkit on the server, a bit like phantomjs does.
I think this is more related to the canvas in three.js, but when I save images or video out using this awesome module, they all come out desaturated? Is there an easy way to get the colors to look right when you save an image or animation?
Thanks!
I'm getting this error when i try bower install:
Unexpected token ]
I think the bower file might need a comma removed after the author. From this:
"authors": [ "Jaume Sanchez <[email protected]> (https://www.clicktorelease.com)", ],
to this:
"authors": [ "Jaume Sanchez <[email protected]> (https://www.clicktorelease.com)" ],
Is it possible to start/stop the capture multiple times using CCapture.js?
Whenever I call capturer.start() I get these errors:
Uncaught Error: Width and height must be set prior to rendering
Uncaught TypeError: Cannot redefine property: currentTime
Is there a fix around this?
I have a sphere in three.js and its texture is a video, my camera is inside the sphere. Everything works fine until I use CCapture to record my scene. The video stops playing at that point (even though video.currentTime continues to update) and the scene continues to update (it spins).
I made a QuickTime screen capture which demonstrates what is going on: http://rwoodleymedia.org/scratch/DemoForCCapture.mov
Thoughts?
Hi there,
First of all: great work! I have, howerver, some problems. I am using CCapture.all.min.js
First of all, even when setting the display option to false when constructing the capturer, the black box with red text is being displayed in the top left corner. How can I get rid of that?
The second issue is, that the framerate option also seems to be ignored. I set it to 3 or 1, but the frame counter in the top left quickly goes into the hundreds within a few seconds.
And thirdly: When I use gif as output format, the output is only in black and white. How can that happen and how do I get it to record colors? There also seems to be quite a performance issue with gif generation, although I'm only capturing a canvas of 500x500px in size.
Any help appreciated!
P.S.: The demo also seems to be broken for gif output. You get the following in the console:
"NetworkError: 404 Not Found - https://www.clicktorelease.com/src/gif.worker.js"
I'm trying to get a smoother animation. Here are the settings I'm using. When I lower the framerate, the animation becomes too choppy, when I increase it, it plays back way too fast. How do I get better sampling and keep a good speed?
Thanks!
var capturer = new CCapture( {
framerate: 35,
verbose: true,
format: 'webm',
quality: 80,
name: 'MyVid',
motionBlurFrames: 0
} );
I'm trying to use this library with fabric.js
Capturing like this
canvas.on('after:render', () => {
capturer.capture( $canvas );
});
it works and saves the data, but it's low fps,
I specified 120 fps in ccapture but always get ~40
Is there any method of compressing gif quality?
BTW i want to decrease quality of captured gif.
I'm trying to take a screen capture of my app (made with BabylonJS), but i need to limit the quantity of images generated, because my app runs with 60 FPS.
I have tryed limit the capture every 200ms in my renderLoop, but this returns the error: Uncaught Error: Width and height must be set prior to rendering.
How can i make it?
Thanks a lot
Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///C:/Users/Admin/Downloads/ccapture.js-master/ccapture.js-master/src/gif.worker.js' cannot be accessed from origin 'null'.
While running the example im getting above error. I tried with chrome and safari browser. No response.
Happens, when I use with TweenJS.
Hi
I am using tar.js to export jpg images. But the background color of the images is black,
In my canvas, i have set the background color as white
What should i do to get the exported images with white background?
Thanks in advance
Does anyone know how to run ccapture.js headless - without opening a browser window? I'd love to use this on a server, but there are limits on what can be done.
If someone could shed some experience or light on this - much appreciated!
Can we export as mp4?
Capturing with format set to Webm causes the file to be corrupt on export when the alpha of the canvas is set to true.
With the latest version THREE.js (v82) and THREE.WebGLRenderer({ alpha: false }) it works totally fine! With alpha set to true and format set to png the export does actually work.
Thanks for this script, it's just what I needed.
I'm trying to save a transparent canvas to webm but I get a black background.
Is it possible to save a transparent background with webm?
Thanks
I have a complex scene that is successfully rendering out at just under 2 frames per second using Ccapture. All the objects in the scene are textured with video which is playing back behind the scenes at its normal speed (25FPS). The result is the scene plays back super well but the video texture plays back at several times the correct speed.
I've tried setting the video currentTime to synchronise it with time delta like so.
var video = document.getElementById("source");
video.currentTime += dt;
Strangely that, and just console.log(video.currentTime);
, both pause the video texture completely (but not the actual video in the page). console.log(video.played);
does not.
This is using Chrome Version 51.0.2704.103 (64-bit).
Any thoughts on a work around? And thank you very much for the beautiful library!
Seriously, I can see this affecting your adoption rates. The Game of Life 3D example eventually chills out and is less nauseating. But I can tell you that, as a new user struggling to get the settings right and not yet knowing how to change what I'm recording, I'm getting nauseous every time I try to learn your software.
That's not a state of mind that you want new people experiencing on top of the necessary stress involved in learning a new system. I highly suggest you fast forward the example to a more chill state within Game of Life 3D. You can include the frantic state to demonstrate slow motion and blur effects in a second or third example file.
I'm not sure whether this is ultimately an upstream or downstream issue, but when I start the GIF capturer my game seems to freeze. I'm assuming this has something to do with the methods CCapture overrides, but haven't had a chance to dig deeper. I'd really love to be able to use this lib to record gameplay videos.
Archive is either unknown format or damaged.
Not sure why this is happening. The WEBM and GIF captures work great. Any ideas?
Thanks
Hi,
I installed using npm and am creating a new capture like this
var capturer = new CCapture({
framerate: 60,
format: 'gif',
workersPath: './node_modules/ccapture.js/src/',
verbose: true
});
i get an error that GIF is not defined so i'm assuming that i'm not settings the workersPath correctly. I've also tried / and js/
I'm trying to export an animated GIF from an a-frame scene.
But in the downloaded gif file every frame is black.
my code:
$('#start').click(function(){ $('canvas').attr('id','bit'); var canvas = document.getElementById('bit'); var capturer = new CCapture( { format: 'gif', workersPath: 'capture/src/', framerate: 30, verbose: true, name:'file', timeLimit: 2, }); capturer.start(); function render(){ requestAnimationFrame(render); capturer.capture(canvas); } render(); })
Hi there !
I'm using your library with seriouslyjs to convert the canvas animation into a gif.
I get no error while running my code, but when I open the blob
, I just have the first frame (the one when I clicked the button), but no animation.
I made a codepen to show you, but due to CORS policy you cannot run it directly. However, you can copy/paste the code there and download the videos to perform a quick test locally.
Is it possible to record a fixed length of time? Say 1 second, on a button click?
I've tried to do the following with the Gif renderer. I'm using a Canvas object previously created via p5.js:
function setup() {
// setup camera capture
videoInput = createCapture();
videoInput.size(canvasWidth, canvasHeight);
videoInput.position(0, 0);
videoInput.parent('wrapper');
// setup canvas
cnv = createCanvas(canvasWidth, canvasHeight);
cnv.position(0, 0);
cnv.parent('wrapper');
}
With canvas rendering done in the draw function:
function draw() {
clear();
// a bunch of drawing calls go here ..
render();
}
function render(){
capturer.capture( cnv.elt );
}
Then in my button handler:
capturer.start();
setTimeout(function(){
capturer.stop();
capturer.save( function( e ) {
console.log(e);
//$('#gifOutput').attr('src', url);
} );
}, 1000);
I get an exception (which hangs the browser), from gif.coffee on line 72: "Width and height must be set prior to rendering".
the quality parameter passed in settings is ignored and not assigned, to this.quality.
so webm is always encoded with the default quality, no matter the passed value
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
I think it would be amazing if i can do something like this
recorder.on('chunk',function(packet){
some_rtc_channel.send(packet);
});
It can be used for a lot of stuff :D /* process and broadcast a video in realtime using rtc channels maybe */
Sorry for opening an issue but i couldnt find any support on stack oveerflow
This is the codepen of what i have tried so far. I am not able to link the render function of plotly to the construct mentioned in the documentation.
function render(){
requestAnimationFrame(render);
// rendering stuff ...
capturer.capture( canvas );
}
render()
Need Some help
Base on this code I assume quality = <1, 100>
this.quality = ( settings.quality / 100 ) || .8;
This line caused a lot of trouble.
There might be another way than overriding the currenttime prototype func !
https://github.com/spite/ccapture.js/blob/master/src/CCapture.js#L720
Can we also hook video playbackrate to the step? When we add a video to THREEJS Scene the video loses frames while getting captured.
Hi,
Have you thought about releasing ccapture on npm? It would make it much easier to include it in modern projects.
When adding width and height property to then I can't download the video, it returns "uncaught Frame 2 has a different width"
Hello, I'm trying to capture the content of a
I need to export the tar file not for download but to send it to the server. Is there a way to do this currently?
As the title say, is there any way to improve the performance when capture to save a video of canvas?
Hello
I wish one could control frame delays in some way when exporting to gif. Something like:
{frames:{1:200,10:200, 20:200, 30:300}}
I don't know something like that.
Those frames, 1,10,20 and 30 would have those delays and the rest, would have the default delay.
Thanks.
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
The images does show while running my canvas but when i try to capture the canvas i get this issue.
FYI. i tried to capture gif of the canvas.
Do you have any solution about it?
I tried image.crossOrigin = 'anonymous';
$("#startRecording").click(function(event){
capturer.start();
render();
capturer.stop();
capturer.save();
});
var capturer = new CCapture( {
format: 'webm',
name: 'aman',
framerate: 60,
verbose: true
} );
var canvas = $(".canvas");
function render(){
requestAnimationFrame(render);
animateImage();
capturer.capture( canvas );
}
When I click on the start button, nothing happens and nothing is added in the console.
I am very sorry if it's a basic question but can you please tell me a workaround for this.
Thanks
When trying to use the autoSaveTime
parameter (set to 5
) with the JPG encoder, it did not automatically save the frames.
There is a vestigial fragment of a previous implementation commented out on this line here. Was autoSaveTime
removed intentionally for PNG & JPG encoders? If not, I can take a stab at reimplementing it.
The correct way to import the lib in order for jpeg to work should be changed from:
<script src="CCapture.min.js"></script>
<script src="tar.js"></script>
to:
<script src="build/CCapture.min.js"></script>
<script src="src/tar.js"></script>
<script src="src/download.js"></script>
I love this script and use it daily to render webGL animations. Unfortunately it looks like the latest Firefox update v55 breaks the rendering process. It took me awhile to figure out what was going on, but once I downgraded to Firefox v54 it worked flawlessly again. I assume this is related to the security part of the release notes. (https://www.mozilla.org/en-US/security/advisories/mfsa2017-18/). When on v55 the render can still be downloaded but it contains empty black frames for PNG sequences/gif frames.
Hope this helps someone else.
Hi there,
I tried capturing a 60 fps animation in 3 seconds and it worked out perfectly. Now I want to capture the animation at double the speed, so I set animation to 120 fps, the framerate to 120, and the timeLimit to be 1.5 seconds. For some reason, the ccapture behaves like it's recording 180 frame in 3 seconds, but not in 1.5 seconds, which causes the last 1.5 seconds to be static.
For the animation, I'm using GSAP and using the timeScale(2) to double up the animation speed.
Is this normal or is it a bug?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.