CODEWITHSUNDEEP
javascripthtmlvideomobilelandscape
Jesús
Jesús

Reputation: 467

When mobile is rotated, width and height are swapped in get User Media Api JavaScript

I´m using the camera git getUserMedia(), but I have a big issue, because, I just set the video and height to 1280 and 720: 

  videoConstraints.width = { min: 1280, ideal: 1280, max: 1280};
  videoConstraints.height = { min: 720, ideal: 720, max: 720};

It works perfect in a computer, and in a phone too, but the width and height are swapped on mobile, I have to use the mobile on landscape mode, in portrait mode the height is 1280 and width 720, and when is in landscape is height 720 and width 1280 (as I want), so i was looking for information for this, but i really does not found a really solution.

Reference to get user media API: https://developer.mozilla.org/es/docs/Web/API/MediaDevices/getUserMedia

Reference to video constraints: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/video

Upvotes: 1

Views: 1901

Answers (4)

user23540218
user23540218

Reputation: 11

I had the exact same issue and Alireza's answer helped me a lot.

const isPortrait = screen.availHeight > screen.availWidth;

I first had window instead of screen. Now everything works perfect :)

Upvotes: 1

Alireza Rezaei
Alireza Rezaei

Reputation: 86

it's because of landscape and portrait mode, if the view mode is portrait and the height is bigger than width, you should swap the width and the height.

const isPortrait = screen.availHeight > screen.availWidth;

const videoConstraints = {      
        video: {
          width:{ exact: isPortrait ? containerRef?.current?.offsetHeight : containerRef?.current?.offsetWidth},
          height:{ exact: isPortrait ? containerRef?.current?.offsetWidth : containerRef?.current?.offsetHeight}
        }
      };

Upvotes: 2

Jesús
Jesús

Reputation: 467

So, then of face this problem i didnt found the problem, what i did was make custom styles with media queries for style mobile.

Upvotes: 0

Mitch Kranes
Mitch Kranes

Reputation: 1

Instead of assigning an absolute width value via a HTML attribute in the tag of an image, assign the CSS rule max-width that targets the image as a percentage relative width value, like this: img {max-width:100%}

Try and see what happens.

Upvotes: -1

Related Questions