Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do i scale down a video source? #278

Open
MileanCo opened this issue Aug 21, 2024 · 2 comments
Open

How do i scale down a video source? #278

MileanCo opened this issue Aug 21, 2024 · 2 comments

Comments

@MileanCo
Copy link

MileanCo commented Aug 21, 2024

I have some video files that have quite large resolution (from iphone). How do I scale this down? If I scale down the canvas, the video is still the same large size and I can only see a corner of it.

The height and sourceHeight video params only deal with cropping, so that doesnt work.

If I use a transformation like this

        let transformEffect = new etro.effect.Transform({
            matrix: new etro.effect.Transform.Matrix()
                .scale(.5, .5),
        });
        movie.effects.push(transformEffect);

it scales down the whole canvas and my original height is not respected anymore (still same problem).

How do I scale down the source videos so they fit in the canvas? This seems like such a basic task, surprised I dont see any examples about this or maybe im doing something wrong.

@MileanCo
Copy link
Author

Okay I think I figured it out using destWidth and destHeight, but man that was painful!

 async add_video(url: string, startTime: number, duration: number) {
        const dimensions = await this.getVideoDimensions(url);
        let scaleRatio = this.canvas.height / dimensions.height ;
        let destWidth = dimensions.width * scaleRatio;
        let destHeight = dimensions.height * scaleRatio;

        const layer1 = new etro.layer.Video({
            startTime: startTime,
            duration: duration,
            source: url,
            destWidth:destWidth,
            destHeight:destHeight,
        });
        this.movie.layers.push(layer1);
    }

@mattstrick
Copy link

@MileanCo I was having the same issue, but did not see destWidth and destHeight in the documentation. Your solution was a godsend. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants