diffusionstudio / core

The Video Creation Engine: Edit videos with code, featuring the fastest WebCodecs renderer for in-browser video processing.
https://examples.diffusion.studio/
Mozilla Public License 2.0
354 stars 31 forks source link

Add mask to video for speaking avatar? #32

Open voladelta opened 1 month ago

voladelta commented 1 month ago

Is there a way to shape/crop video into any size and shape?

For example: A 16:9 video can be shaped into 1:1 or crop center in 9:16 box, or a circle?

k9p5 commented 1 month ago

It's not implemented yet, although it shouldn’t take more than an hour to get done.

girayk commented 1 month ago

It's not implemented yet, although it shouldn’t take more than an hour to get done.

So how about you spend that hour for timeline and i could help for that?

k9p5 commented 1 month ago

I'm constantly working on the timeline but go ahead, I appreciate any help I can get

girayk commented 1 month ago

I'm constantly working on the timeline but go ahead, I appreciate any help I can get

Exactly please keep going on timeline and i will happy to help , if I can

girayk commented 1 month ago

Screenshot 2024-10-29 at 23 52 22

` import {Clip, VisualMixin} from "@diffusionstudio/core"; import { Graphics } from "pixi.js";

class CircleMaskProps { radius?: string; fill?: string; position: { x: number, y: number, } }

export class CircleMask extends VisualMixin(Clip) {

public graphics = new Graphics()
public radius = 50;
public fill = null

public constructor(props: CircleMaskProps = {}) {
    super();

    console.log(this)
    Object.assign(this, props);

    this.graphics.circle(this._position.x + this.radius , this._position.y + this.radius , this.radius)
    if (this.fill === null){
        this.graphics.fill({color: '#FFF', alpha: 1});
    }
    else{
        this.graphics.fill({color: this.fill, alpha: this.alpha});

    }
}

} `

and for the add let mask = new CircleMask({radius: 360, position: {x: 250, y: 0}}) videoClip.addMask(mask)

write way?

k9p5 commented 1 month ago

I would implement it exactly the same as the filters and each mask should inherit from graphics. E.g. class CircleMask extends Graphics. Then you can draw the circle in the constructor.