0

I want to take pictures of the user camera. This component, has a video html element and a canvas html element.

When the component is mounted I get the user media stream with the following constraints:

constraints: {
        audio: false,
        video: {
          facingMode: "environment",
          width: { min: 640, ideal: 1920, max: 1920 },
          height: { min: 400, ideal: 1080, max: 1080 },
        },
      }

The component takes the picture sucessfully if I have Auto-Rotate turned on, because it rotates the browser and the camera.

If I have Auto-Rotate turned off, only the camera sensor is rotated and not the browser and then the picture that is expected to be horizontally turns out to be vertically (Portrait), because thats how the video element is presented.

I have also tried reading the exif, but noticed it cant be read from canvas element or video element.

I have tried orientation events but they don't fire when Auto-Rotate is turned off and it is right because the page doesn't rotate but the camera will always rotate by itself.

But is there a way to lock the camera from not rotating at all or to detect that rotation? Should I use device motion events? (overkill for sure :D)

This component also has to work with Android and IOS devices.

CodePen Link to reproduce this problem Note that you must have auto-rotate turned off in order to reproduce this. Tested on OnePlus 8 Pro.

(this codepen was forked from here, I have just added more constraints to get the right camera Vue Webcam Camera Capture)

andrecj
  • 147
  • 1
  • 13
  • Actual, I don't think that it is possible to fix the camera (it's about the device), but you can, take it into account when turning by 90 degrees. However, what do you expect when turning for example 45 degrees? Please, give examples of what you expect in at least 2 positions (perhaps with a drawing) provided that the camera cannot be stopped when rotating – Daniil Loban Nov 23 '22 at 06:04
  • I think I forgot to mention that my web app is portrait locked also. So the user will have bad experience when rotating his phone with auto-rotate turned off, and seeing a photo that was not proportional to what he take because the camera self rotated by its own. So yeah, I've ended up to add ways for the user to rotate the photo he took. I didnt have the time to explore device motion events. – andrecj Nov 23 '22 at 18:43
  • 1
    `css` can help, but not always and not everywhere – Daniil Loban Nov 23 '22 at 18:58
  • But the requirement was to have it portrait locked :D – andrecj Nov 23 '22 at 20:24
  • 1
    I said about the camera canvas – Daniil Loban Nov 23 '22 at 20:32
  • Its just not possible as explained here: https://stackoverflow.com/a/12153520/4913712 – andrecj Dec 28 '22 at 22:44
  • I think there we are talking about rotation animation - not quite the same, in any case, I think you can make a convenient interface even when the camera is rotated, and act as if it did not happen. But it will take a code in order to determine the phone, whether it is and other things. – Daniil Loban Dec 30 '22 at 13:43

0 Answers0