createCapture() video demo cut off on mobile screens

[jywarren]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible) demo CSS?

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: just the demo itself at https://p5js.org/examples/dom-video-capture.html
• Web browser and version: Chrome Android 73.0.3683.90
• Operating System: Android Pie
• Steps to reproduce this: visit https://p5js.org/examples/dom-video-capture.html

Feature enhancement details:

I'm just wondering if there's a simple CSS fix so that the video is visible and not cut off, which makes it seem like there is an error:

Requesting desktop site shows the video is actually working.

Thanks, all! Love p5js!

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[ameybh]

Seems like CSS can't fix the canvas issue, because, if canvas width is changed, the sketch still remains at the original position, i.e. the objects drawn in the sketch.
A similar 'cut off' issue where the canvas is too large => #284 . Many of the examples 'cut off' of the screen on mobiles. The following might fix it for all.

[ameybh]

The only working solution that I can see right now:

1. In function setup(), add

let maxWidth = 390*2;
let scale = 1;
if (window.innerWidth < maxWidth) {
    scale = window.innerWidth / maxWidth;
}

This ensures that the whole sketch scales down to fit the mobile screen utilizing maximum available mobile screen space (excluding left and right margins) but still displays at original size on larger screens.
2. Multiply all dimensions by scale, such as

createCanvas(390*scale, 240*scale);
capture.size(320*scale, 240*scale);
...

To keep example code simple and easy to understand, dimensions could be pre-multiplied by scale while rendering the html to the client.
Is there a way to do that @lmccart @limzykenneth ?

[ameybh]

I think dimensions could be pre-multiplied by scale in src/assets/js/examples.js. Any ideas to do it in a concise way?