Fix playback and capture being off by one pixel

[charlielee]

It's hard to see it in these screenshots, but the playback and capture feeds seem to be different by one pixel. This is present in v0.12.0 and the rewrite code. The canvas also has a row of blurred pixels at the very bottom.

I think the problem is related to how pixels are rendered on a <video> element (used for the live feed) and a <canvas> (used for playback). Some downscaling occurs when the image is shown. One simple solution could be to hide the video element and display the live feed onto a canvas.

https://stackoverflow.com/questions/4429440/html5-display-video-inside-canvas

Other options may be:

• Explore various canvas optimisations https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
• Does playback need to use a canvas? Perhaps cycling img tags or setting a div background image could be viable alternatives.

[charlielee]

alternatively could the canvas used for playback be shown on a video? https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream