How to cope with odd canvas sizes for avc codec?

[crystalfp]

I have a canvas that could be resized by users. That means that sometimes it happens to have odd dimensions. I capture a movie from it using this code:

out = new Output({
	format: new Mp4OutputFormat({fastStart: "in-memory"}),
	target: new BufferTarget()
});
source = new CanvasSource(canvas, {
	"avc",
	bitrate: QUALITY_HIGH,
});
out.addVideoTrack(source, {frameRate: 25});

Ending with the obvious error: The dimensions 1433x1008 are not supported for codec 'avc'; both width and height must be even numbers. Make sure to round your dimensions to the nearest even number. Thank you, but I cannot block resizing to any dimension.

Is there a way to say to CanvasSource to consider one bit less if the dimension is odd?
Tried to change the canvas dimensions programmatically, but without success.

        this.ctx = canvas.getContext("2d");
        if(this.ctx) {
            this.width = this.ctx.canvas.width;
            this.height = this.ctx.canvas.height;
            if(this.width % 2 === 1) {
                this.ctx.canvas.width = this.width - 1;
            }
            if(this.height % 2 === 1) {
                this.ctx.canvas.height = this.height - 1;
            }
        }

[Vanilagy]

I'm not sure I understand the issue. Why don't you simply provide the CanvasSource with a canvas that has even dimensions?

Alternatively, you can create a VideoFrame from the canvas instead and use the visibleRect property to trim it to even dimensions.
https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame/VideoFrame

Then, create a VideoSample from that VideoFrame and use VideoSampleSource instead.

[crystalfp]

Well, seems another solution is to change the codec from "avc" to "vp9" if the canvas dimensions are odd. Right?
BTW, the canvas is a ThreeJS view and is linked to the application main window that can be resized by the user.

[Vanilagy]

Yes, VP9 works with even dimensions too!