deformed image with smartphone

[claudiorivetti]

Hi,

I have these settings:

Webcam.set({ width: 240, height: 180, dest_width: 640, dest_height: 480 });

and it works fine form the pc/mac webcam with any browser. However if I take a picture with the smatphone while holding the smartphone vertical, the image is deformed on snap. I see that in the live preview the image does not fill the entire 240 pixel width. This happens either with the front and back camera. Holding the smarthphone horizontal the image is not deformed.

How can I avoid this problem.

Best, Claudio

[jhuckaby]

I'm terribly sorry, but I don't know what smartphone, OS or mobile browser you are using, so there is no way I could possibly help. To be honest, I had no idea this library even worked on ANY smartphones whatsoever.

Try listening for the DOM orientation change event, and then destroying and reinitializing / reattaching WebcamJS when it fires.

https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange

Good luck!

[mfkp]

I've noticed this happening as well on Android devices. The webcam works fine and the preview works fine, but when they take the picture, it's squished into the desired size instead of cropping it.

For example, the camera generally takes pictures at 16:9, but it takes that picture and squishes it down to a 1:1 ratio for my app (crop_width and crop_height are both 480).

[aBrookland]

I've just come across the same issue which I solved by setting the width and height to be portrait or landscape based on screen.width being less than screen.height plus including an event listener for orientationchange to reset the webcam dimensions if the user changes orientation.

Note: you do need to set destination and crop dimensions or you get a deformed image if the webcam aspect ratio isn't 4:3.

Works on my HTC One (M8), pretty sure it'll work on other devices also.

Something like this:

var attachWebcam = function() {
  var width = 320;
  var height = 240;

  if(screen.width < screen.height) {
    width = 240;
    height = 320;
  }

  Webcam.set({
    width: width,
    height: height,
    dest_width: width,
    dest_height: height,
    crop_width: width,
    crop_height: height
  });

  Webcam.attach('#MyWebcamDiv');
};

window.addEventListener('orientationchange', function() {
  Webcam.reset();
  attachWebcam();
});

attachWebcam();

[agajdosi]

@jhuckaby Faced this issue today. It is problematic only when video is in vertical position, when I move phone horizontally, library works like a charm. To me it seems like case when width is being larger than height is not covered in code, if I have time I will try to confirm this using some fake webcam program.

[jhuckaby]

@zsalab any thoughts on @agajdosi's question? I don't understand how the mobile capture code really works. Could be related to #227.

[zsalab]

How far I understand this is not iOS, so it should not use my code (if you didn't reuse something from it). I'm willing to help, but unfortunately this week is impossible (I also does not have any Android or Windows phone), but I will try to figure out. Thanks your understanding.

[zsalab]

I read again the all comments on this issue. How far I understand this gonna be an orientation problem what we had on iOS but the iOS code works totally different way then the other mobile (I guess on Android it use the the HTML5 userMedia feature on Android). I won't be able to debug this issue, but I can imagine two situation 1., the captured image has the exif orientation info and you can reuse the iOS code which rotate and scale the image based on the captured image exif orientation data, this would be the easier I think 2., get somehow the phone orientation data by the time the snap method called and reuse the iOS code with this orientation info

The third option to use a workaround like @aBrookland mention. Anybody who willing to work on this and want to reuse the iOS part of the codebase to fix it, can contact me if need some help to understand how it is works, but unfortunately I do not have time to fix anything non iOS related in WebcamJS

[jhuckaby]

Thanks @zsalab. Appreciate you taking a look at this. Sounds like we need to use your clever iOS EXIF rotation code for all images, regardless of source. I'll look into this further when I have some free time. :)

[thedavidmeister]

https://github.com/hMatoba/piexifjs seems to help for getting exif out - only works for jpeg

[1nstinct]

https://github.com/jhuckaby/webcamjs/issues/263#issuecomment-693652956 here is a solution