pankod / canvas2video Goto Github PK

Is it possible to add mp3 audio as well into the canvas before encoding ?

I think the current project is not maintained; Newly created issues have 0 comments and 0 actions.
So I've created a fork/wrapper of this project at sh9351/withmove for better maintenance.
When the project is maintained again, I'll commit back to this repository.
Thanks

Hi, i`m trying to convert fabricjs integrated animation to video, but cant find solution how to do it, also how to configure video timing

Any chance to add video to the canvas?

Is there a way to use this library like so: const renderer = require("@pankod/canvas2video/renderer") or some method using standard javascript instead of typescript? I'd like to use this lib on AWS Lambda somehow and I'm getting error messages like: "Unexpected token {", on the first line: import { renderer, encoder } from "@pankod/canvas2video"

I guess the question is, any way to use this lib without "import"?

can render animation to video with bodymovin animation json?

Hi,
I want to keep canvas size of 500x500 on frontend and on backend video should be 1000x1000. This is possibly only via multiplier options in canvas.toDataURL({multiplier: 2}). If I do this on server it will return images of 1000x1000 which I guess canvas2video will use to create a video.

Can you tell me where and how I can do this?

The below is loading the fabric objects to the canvas using Fabric.util.enlivenObjects :

    makeScene: (fabric, canvas, anim, compose) => {
                let animation = template[0]["animation"];
                canvas.setZoom(1.5);
                canvas.backgroundColor = "#ffffff";
                canvas.renderAll();
                fabric.util.enlivenObjects(template[0]["objects"], function (objects) {
                    objects.forEach(function (o) {
                        canvas.add(o);
                        const index = validateObject(o.id, animation);
                        if (index !== -1) {
                            anim.call(animations[animation[index].animation], [canvas, o, 1],1);            
                        }
                    });
                    canvas.renderAll();
                    compose();
                });
            },

the anim.call is used to attach unique gsap code to that object. animations[animation[index].animation] is the variable where the functions are store for example;

const animations = {
    fromRight: (canvas, obj, time) => {
        obj.opacity = obj.originalOpacity;
        var l = obj.get("left");
        gsap.from(obj, {
            left: l + 100,
            opacity: 0,
            duration: time,
            onUpdate: () => canvas.renderAll(),
        });
    },
    fromLeft: (canvas, obj, time) => {
        obj.opacity = obj.originalOpacity;
        console.log("invoked now",obj.originalOpacity)
        var l = obj.get("left");
        gsap.from(obj, {
            left: l - 100,
            opacity: 0,
            duration: time,
            onUpdate: () => canvas.renderAll(),
        });
    },
}

However when i run npm . the anim.call is invoked after 100% of progress.

Rendering | ████████████████████████████████████████ | 100% **invoked now 1**

There might be a issue with your FFMPEG commands. I tried posting my mp4 video on Twitter and Instagram doesn't respond to it. "Your video file is not compatible. Please see tips for uploading videos." - Twitter.

Please check the FFMPEG settings in your library.

While video is being rendered, thread is blocked and it wont let any other operation to continue. Is it possible to turn on child process or worker threads within this library ? would be a nice feature to have.

I wanted to make the text (i also have tried with images) fade in by changing its opacity, but the text just "pops up"

            var text = new fabric.Textbox("Hello Worlds");
            text.set("fill", "#ffffff");

            anim.fromTo(
                text,
                { opacity: 0 },
                { opacity: 1, duration: 1, delay: 1, ease: Power2.easeIn },
            );

            canvas.add(text);
            compose();

I would like to reposition backgroud video which has been used in encoder function

This library is useful, but I want to know if it supports rendering video in the scene.
I have multiple video clips, and there are transition effects between each video clip.
How do I achieve this? Can anyone help me?
thanks！

Hi,
could you tell me what is server resources usage? Or what are minimal required resources to run this? I would like to use it to create data driven animation with personalization per user. What server resources should I have?

We made Reveal By Word text animation. It looks good on Canvas but when we export mp4. There is slight delay between each word.

We have same Anim Duration on frontend and same on backend. We're using TweenMax on frontend.

We tried both 30 and 60 fps. Both gives same delay between each word.

I think your project is great, and could be greater!
This one has a lot of ideas, but has a terrible license :(
https://github.com/JonnyBurger/remotion/
hope it helps!
Thanks for your efforts!

Does it possible to work on mobile device by replacing those libs:

• fabric to react-native-canvas
• gsap to gsap-rn https://github.com/cloudbit-interactive/GSAP-RN

What happens when there is only one anim and multiple gsap，Timeline is required for complex animations

when trying to pass width and height dynamically, says rendering stops in runtime with conversion failed status:
'error Error: ffmpeg exited with code 1: Error initializing output stream 0:0 -- Error while opening encoder for output stream #0:0 - maybe incorrect parameters such as bit_rate, rate, width or height
Conversion failed!'

here is my code:
.....
const VideoEncoder = async (res, canvasJSON, cWidth, cHeight) => {

try {
    const stream = await renderer({
        silent: false,
        width: cWidth,
        height: cHeight,
        fps: 30,
        makeScene: (fabric, canvas, anim, compose) => {

......

when width and height is number, not variable works fine