Camera in portrait mode, stretching

[ScottDellinger]

As this is now getting more mobile use, I'm seeing a lot more instances where the user is using their phone or tablet in portrait mode. As the canvas is 320x240, the camera "stretches" the image to fit that canvas, even when the camera is in portrait orientation.

Is there any way to avoid that stretch? Force the camera to use a different orientation or something? (I've included a couple screen shots to illustrate what I'm talking about.

[hanwiz]

Can we just change the canvas size according to the screen width & height with the orientation?

    if (screen.height <= screen.width) {
        // Landscape
                Webcam.set({
			width: 320,
			height: 240,
		});
               
    } else {
        // Portrait
                Webcam.set({
			width: 240,
			height: 320,
		}); 
    }
   Webcam.attach( '#my_camera' );

[vienastar]

Can we just change the canvas size according to the screen width & height with the orientation?

    if (screen.height <= screen.width) {
        // Landscape
                Webcam.set({
			width: 320,
			height: 240,
		});
               
    } else {
        // Portrait
                Webcam.set({
			width: 240,
			height: 320,
		}); 
    }
   Webcam.attach( '#my_camera' );

need to reload page to reload webcamjs library.

[1nstinct]

Can we just change the canvas size according to the screen width & height with the orientation?

    if (screen.height <= screen.width) {
        // Landscape
                Webcam.set({
			width: 320,
			height: 240,
		});
               
    } else {
        // Portrait
                Webcam.set({
			width: 240,
			height: 320,
		}); 
    }
   Webcam.attach( '#my_camera' );

need to reload page to reload webcamjs library.

You don't need to. You just need to reinitialise it on the page. Here is a code that works for me.

function dynamicallyLoadScript(url, callback) {
        var script = document.createElement("script");  // create a script DOM node
        script.src = url;  // set its src to the provided URL
        script.onload = callback;

        document.head.appendChild(script);  // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}

function initStream(dest_width, dest_height) {
        dynamicallyLoadScript('/js/webcamjs/webcam.min.js', () => {
            Webcam.set('constraints', {
                facingMode: CAMERA_MODE,
                dest_width,
                dest_height,
            });
            Webcam.attach('#my_camera');
        });
    }