Comments (13)
Interesting. Could you post a working online example of what you're trying? It'll help me debug and figure out what's going on.
from ccapture.js.
any updates on this?
from ccapture.js.
Not really, but as long as you render to a canvas with non-frame dependant animations, and pass the canvas to CCapture, you should be good.
from ccapture.js.
I have used this library to save a fabric.js animations and videos as a video file. It worked perfectly for me. I used the following code:
const canvas = document.getElementById('canvas');
fabric.util.requestAnimFrame(function render() {
fabric.util.requestAnimFrame(render);
capturer.capture(canvas);
});
from ccapture.js.
@DevelopSmith can u help me with some working example as i am unable to make it work
from ccapture.js.
I think ccapture can't capture fabric js. I looked into fabric's source and it's using new Date()
for lots of things and I believe that's just not being overwritten by ccapture:
Methods supported so far:
Date.now, Date.prototype.getTime
setTimeout, clearTimeout, setInterval (clearInterval pending)
requestAnimationFrame
performance.now
HTMLVideoElement.prototype.currentTime, HTMLAudioElement.prototype.currentTime
but please, correct me if I'm wrong because I need this to work
from ccapture.js.
It might be similar to https://twitter.com/thespite/status/733254647922753536
Can you post code that i can run to try to reproduce the issue?
from ccapture.js.
To solve it I used a custom implementation using https://github.com/schickling/timemachine to overwrite the Date constructor
Edit: I was wrong, I used this for a backend implementation sorry
from ccapture.js.
It would be really nice if anyone could give an example on Fiddle, cos I'm really lost here.
Here's my starting point: https://jsfiddle.net/BrandApp_io/cgno71r9/64/
But it skips way too many frames.
from ccapture.js.
@KristofferBerg Does this solve it? I find it hard to test
https://jsfiddle.net/93bkform/
I moved ccapture script load above fabric, removed the defer attribute.
Then made sure to launch ccapture first so it might be able to work its magic on fabric before fabric starts.
I also moved your onChange
on the .animate() function to the render loop canvas.renderAll
.
If this doesn't solve it, I believe fabric uses a rendering loop in .animate() that ccapture maybe can't overwrite.
from ccapture.js.
@KristofferBerg sorry it doesn't solve it, ran a few tests and it's inconsistent.. :/
from ccapture.js.
@Mat-thieu Thanks for testing. Yeah, I'm starting to suspect this line https://github.com/fabricjs/fabric.js/blob/master/src/util/animate.js#L73 have something to do with it :/
from ccapture.js.
The issue seems to be here. It's using the initial window.requestAnimationFrame
, not the "patched" one.
This code should "proxy" the call, just add it before loading fabric.js:
<script>
(function() {
var __ = window.requestAnimationFrame;
window.requestAnimationFrame = function() {
var args = arguments;
(args.callee === args.callee.caller ? __ : window.requestAnimationFrame).apply(window, args);
};
})();
</script>
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.