Comments (8)
You say it like the rest of the library isn't a bunch of hacks of prototypes and host methods.
If you understand the purpose of the library, it makes sense to hijack all methods that can be used to sync animations. There's no good reason to have a video that runs in real-time in a non-realtime capturing session.
The only real issue is that all of those methods should be hijacked based on a configuration provided by the user, instead of blindly. You might want requestAnimationFrame to be throttled, but need setTimeout to jumpstart the animation. That, for instance, is a known issue that needs manual stepping from the console.
In the future I plan to add a configuration object to control what is intercepted and what's not, but still will require the developers to know what they're doing and what the library can do.
If you don't want non-realtime capture (or rather, want real-time capture), just use CaptureStream and MediaRecorder.
from ccapture.js.
This library is awesome for what it is doing, and we are using it for a production side as a gif generator, and thank you for this.
I just trigger the fact there might be another way than overriding, and that way it could help people using this in higher scale, no offense
from ccapture.js.
None taken, don't worry! I should have sprinkled more emojis in the reply, but i was in a rush. I'm the first one to recognise it's all a bunch of hacks, but that's they only way i can see it working, since ideally it should be completely transparent to the page.
I'm the first to not be happy with the way timeouts and HTMLVideo and Audio Elements currentTime are being set (since, for instance, there's no way to setting them back to their original state).
As I said, the idea is to provide a configuration mask to enable what values and methods to intercept -and more things, like setting the canvases correctly to support transparency-, but I haven't had time to address those issues.
from ccapture.js.
Can you explain why there's so much time-related monkey-patching going on at such a low level? I really want to use CCapture for my project but overriding Date.now is a dealbreaker since it breaks moment, Cesium, and probably a bunch of other things. Am I missing some key encapsulation step that stops the overrides from breaking tons of other libraries?
I'm a bit of a javascript novice so I'm trying to figure out why the overriding is done from a design perspective.
from ccapture.js.
I think you're confused about what's the purpose of this library: it's capturing framerate-independent animations.
If you want to capture at 60 FPS, but your animation + capturing overhead takes more than 16.66 ms ( 1000 ms / 60 ), then your final animation will be choppy --- it's the equivalent of dropping frames when transcoding. Ccapture helps getting 60, 120, 100000 FPS animations, but it does it by hooking functions that are used for time syncing.
If you don't mind dropping frames, just use HTMLCanvasElement.captureStream
from ccapture.js.
Now I think I get the purpose of the library, but I still don't quite understand why it needs to hook such fundamental functions. Are the alternatives just that complicated?
The two big things I discovered specifically about hooking those functions was it caused several Cesium components related to moving the camera around to exhibit weird behavior (camera would 'glide' forever in the direction panned), and also broke the ability for moment to parse time strings correctly. That's why I asked about some way to encapsulate the behavior that I was unaware of.
In my scenario, what attracts me to CCapture is the API and the paradigm implied by 'capturer.capture(canvas)' in particular. The app is a client-rendered view of a server-side simulation, using Cesium on the client. The Cesium canvas is drawn at 30 fps, and the user can move smoothly around the map, but the simulation is usually much lower than 30fps. So for recording here the strategy here is to only capture a frame when the simulation steps, and then stitch that into an animation at the desired fps. In our case, dropping frames when the user is panning the camera for example is acceptable. Also of interest is getting all those frames exported in a zip/tar/webm/mpeg(?). I realize all these things could be accomplished with smaller libraries (such as gif.js, which I'm actively researching), but right now I'm still learning what's out there. CCapture's API made it seem like I could do all those things with a single library.
from ccapture.js.
Forgot to point this out too: Commenting out all the code that hooks the time functions let me use CCapture (for gifs, anyway) exactly as I hoped I could. Even if making each specific hook optional through settings is too difficult, making it an all-or-nothing choice still might have value.
from ccapture.js.
Yes, that's the idea. Given that some people want to use it without it affecting HTMLVideoElement/HTMLAudioElement, and some people need those elements to be hooked, the best option is to make it configurable. That also helps with the planned Web Extension.
It's coming...
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.