Broadway icon indicating copy to clipboard operation
Broadway copied to clipboard

How to prevent canvas size from resizing itself every frame?

Open bobtista opened this issue 6 years ago • 13 comments

It seems that onpicturedecoded resizes the canvas to the incoming video width/height. Is there a way to force the video to stay a certain size? For example, if I have a container div that's 200x200px and the video coming in is larger, the canvas currently just bloats out of the container and covers other things.

bobtista avatar Jul 25 '17 00:07 bobtista

you will have to change the broadway code that resizes the stream. can you somehow determine what size your stream will be before? then you can create a variable with the desired size and instead of the current resize you resize to your desired size

soliton4 avatar Aug 01 '17 16:08 soliton4

You can also just set the css width / height properties on the canvas element. I forget if the code overwrites these properties, but you can always force them with important!.

mbebenita avatar Aug 01 '17 16:08 mbebenita

@mbebenita im pretty sure it wont work with css but a fixed size might be a good addition to the project. if only i had time to do it ;)

soliton4 avatar Aug 01 '17 16:08 soliton4

Having a fixed size is generally difficult to do, because the aspect ratio can change. Something like this probably needs to be implemented - http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/StageScaleMode.html

mbebenita avatar Aug 01 '17 16:08 mbebenita

i was more thinking about something simple like fix width and height and prevent player from changing the size. that would be straight forward. there is one complication thou and that is the actual size of the video stream instead of the output plane size. the width of the output plane will allways be devidable by 16. thats why on some videos you will see a green border.

soliton4 avatar Aug 01 '17 16:08 soliton4

Here's a pr to handle canvas sizing. https://github.com/mbebenita/Broadway/pull/184

OllieJones avatar Aug 08 '18 20:08 OllieJones

@OllieJones sorry ollie that pr is unacceptable. please make a new one!

soliton4 avatar Aug 08 '18 22:08 soliton4

i was more thinking about something simple like fix width and height and prevent player from changing the size. that would be straight forward. there is one complication thou and that is the actual size of the video stream instead of the output plane size. the width of the output plane will allways be devidable by 16. thats why on some videos you will see a green border.

@soliton4 I need to remove a green border in the video image. Please let me know how to remove a green border or to change it to another color (for example, black color).

myjimmy avatar Oct 07 '20 16:10 myjimmy

you need to know about the real video size, then put the canvas inside a div and resize the div to the real video size

soliton4 avatar Oct 07 '20 16:10 soliton4

@soliton4 Thanks for your reply. I'm using the real video size in my project, but when resizing my application, I can see a green border in a very short time. Can we change a green color to another color in this project?

myjimmy avatar Oct 07 '20 16:10 myjimmy

@soliton4 Could you let me know how to change a green color in this project? If you let me know how to do it, I'll do it.

myjimmy avatar Oct 07 '20 17:10 myjimmy

pls post a screenshot

soliton4 avatar Oct 07 '20 21:10 soliton4

@soliton4 I post a screenshot. image

myjimmy avatar Oct 05 '21 20:10 myjimmy