2

I am trying to detect the camera orientation when the user takes a picture so that I can adjust it when it's drawn on the canvas. The issue is that I can't use the device orientation because I need it to work even when the orientation lock is on.

Camera Setup

// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}

Snapshot of video stream

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
});

Reference code from David Walsh - browser camera

pǝɯɐɥoɯ
  • 111
  • 1
  • 5
  • do you found any solution for this issue ? i'm working on something like this and getting the same behavior on mobile devices... the picture taken comes shift or sliced. – dmanzetti Sep 03 '21 at 00:45

1 Answers1

0

Are you trying to visualize the picture after it is taken? If so, have you tried using the camera orientation information attached to the picture instead of getting it upon taking a picture?

please refer to this link: Android : How to detect the image orientation (portrait or landscape) picked from gallery while setting on an imageview?

If you want the device orientation while taking a picture, you can check how to detect orientation of android device? or https://developer.android.com/guide/topics/sensors/sensors_position.

Please provide your code in order to help you out better.

namu
  • 186
  • 1
  • 13