This PR updates the current processFrame() function to use the img.resize() function in p5 to resize the incoming image to match that of the canvas container to fit in the given space.
This PR approaches fitting a video preview into the canvas area by doing the following:
The incoming image sets the p5 canvas size.
the image segmentation occurs on a canvas that is set to display:none
the p5 canvas is drawn to the video preview area using another canvas element using ctx.drawImage()
The video preview area is scaled to fit the preview area.
Additionally, this PR switches to the use of the resnet50 model for higher accuracy on the bodypix results.
Potential problems
A better approach might be to apply the segmentation on the full size image, then resize for rendering purposes only -- TBD -- resolved with using an off-screen canvas and showing an image preview in the video preview area.
Updates
My plan is to use an offscreen canvas for the video segmentation and a smaller canvas for the preview. ==> done.
Description
This PR updates the currentprocessFrame()
function to use theimg.resize()
function in p5 to resize the incoming image to match that of the canvas container to fit in the given space.This PR approaches fitting a video preview into the canvas area by doing the following:
display:none
ctx.drawImage()
Additionally, this PR switches to the use of the
resnet50
model for higher accuracy on the bodypix results.Potential problems
A better approach might be to apply the segmentation on the full size image, then resize for rendering purposes only -- TBD-- resolved with using an off-screen canvas and showing an image preview in the video preview area.Updates