webgl_teapot samples render at wrong resolution in Firefox

[hobzcalvin]

Please read first!

Please use discuss-webrtc for general technical discussions and questions.

• [X] I have provided steps to reproduce
• [X] I have provided browser name and version
• [X] I have provided a link to the sample here or a modified version thereof

Browser affected

Firefox 85.0 (64-bit)

Description

Samples using the shiny webgl teapot render the teapot off-center and too big: it looks like width/height are being doubled or halved somewhere in the process so we're seeing the lower-left quadrant of the teapot render instead of the full view. I'm on a macOS machine with window.devicePixelRatio = 2 which might be causing the issue, but changing the DPR in Responsive Design Mode doesn't change the behavior. Looks fine on Chrome 88.0.4324.96 (Official Build) (x86_64) and Safari.

Steps to reproduce

Visit https://webrtc.github.io/samples/src/content/capture/canvas-pc/ https://webrtc.github.io/samples/src/content/capture/canvas-record/ or https://webrtc.github.io/samples/src/content/capture/canvas-video/ in Firefox.

Expected results

Properly sized and centered view of the shiny teapot is displayed on the canvas.

Actual results

Oversized lower-left quadrant view of the shiny teapot is displayed on the canvas.

[hobzcalvin]

The problem seems to be in the call to canvas.captureStream(). Before it is called, the teapot looks (and moves around by dragging) just fine. After canvas.captureStream() is called, the next time a frame is drawn (by dragging the mouse over the teapot) the canvas viewport suddenly breaks.

[fippo]

tagging @jan-ivar for triage

[hobzcalvin]

I think this is actually a Firefox bug, whenever captureStream() is called on a WebGL Canvas: https://bugzilla.mozilla.org/show_bug.cgi?id=1689479