Comments (7)
i would advice using the PNG option of the capturer and use FFmpeg to create a QuickTime or AVI video that supports transparency natively.
from ccapture.js.
I think we can just change this library.
from ccapture.js.
@tonycaso I have just overridden the function:
function _capture(canvas) {
if (_settings.format === 'webm') {
/** store current context state into a new canvas */
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
c.width = canvas.width;
c.height = canvas.height;
ctx.fillStyle = _settings.bakckgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(canvas, 0, 0);
}
if (_capturing) {
if (_settings.motionBlurFrames > 2) {
_checkFrame(c);
_blendFrame(c);
if (_intermediateFrameCount >= .5 * _settings.motionBlurFrames) {
_saveFrame();
} else {
_step();
}
} else {
_encoder.add(c);
_frameCount++;
_log('Full Frame! ' + _frameCount);
}
}
}
And then you can just create a CCapture object capturer
like the following:
capturer = new CCapture({
verbose: false,
display: false,
framerate: drawFPS,
format: 'webm',
frameLimit: 0,
bakckgroundColor: '#fff',
onProcess: function (frameCount) {
time.mark('Capturing Frame Number: <span class="font-a10000 font-bold">' + frameCount + '</span>', 'frameCount');
}
});
from ccapture.js.
I think @tonycaso was asking for alpha support on webm (which doesn't support)
from ccapture.js.
@spite Oh, maybe, the transparent pixel can be represented by a white value, if creating webm.
from ccapture.js.
Yes, it can be masked with any color (specially #00ff00 or #ff00ff), but the developer can implement that in his own code (adding a solid background color). Your fix is still god, though (except bakckgroundColor should be backgroundColor)
from ccapture.js.
@spite Yup, that's right. However, when we must layering in Canvas, that should be a complex problem if developer implement this in their code. Here is the example video of my application: http://share.soundtooth.cn/2d92cca5-c9b8-85ed-3492-436423a9005f.webm . When drawing the red color, it will be a problem for our developers.
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.