1

I stream my "environment" camera to a video element on my DOM using navigator.mediaDevices.getUserMedia. The issue is that on my test-device (Samsung Tab) this video seems to be stretched. I'm not using any constraints other than facingMode: "environment", during my tests. I don't have this problem on my mobile device.

I already tried setting width and height constraints, this only works if I staticly set the values of my tablet cam, but my application has to support all devices. Note: my application is locked to portrait. built for android using cordova.

//code streaming

setup() {
    const constraints = {
      video: {
        facingMode: "environment",
        //tablet
        //width: {min:1280, ideal: width},
        //height: {min:720, ideal: height}
      },
      audio: false
    };

    navigator.mediaDevices.getUserMedia(constraints)
      .then(function (s) {
        video.srcObject = s;
        video.play();
      })
      .catch(function (err) {
        console.log("An error occured! " + err);
      });

    if(!this.get('streaming')) {
      video.addEventListener("canplay", function () {
        _this.set('videoReady', true);
        _this.processMedia();
      }, false);
    }
}
processMedia() {
    let _this = this;
    let video = document.getElementById('videoInput');
    if (!this.get('streaming')) {
      video.width = video.videoWidth;
      video.height = video.videoHeight;
      this.placeIndicators(video.width, video.height);
    }
   //process functionality//
}

Expected behaviour: to get a video element with my environment camera stream with a correct aspect ratio on all devices.

Actual behaviour: on my tablet my video stream is "stretched when the device is held landscape and "squeezed" when held portrait

Bert Huys
  • 81
  • 7
  • does cordova support css? if so, there is some css to help you out with this, I don't think we need JS for the sizing. – NullVoxPopuli Feb 06 '19 at 22:47
  • The strange thing is that I don't modify or set any fixed size or aspectratio for the videostream and video-element, I should just get the video at the size it is streamed. What I get is a video that is squeezed/stretched as you turn the screen. There is no css on my videoelement except for it's positioning, no size. Cordova is used to build my code to an Android/IOS project, so my native code's css is used. This doesn't happen on every device. – Bert Huys Feb 07 '19 at 07:43
  • ah, thanks for explaining. So this seems to be an issue to how cordova styles the video's container element? I wonder if you could at least hack at a solution with centering and containing the video element to the container? – NullVoxPopuli Feb 07 '19 at 13:50
  • I already tried some "hacks" using a videocontainer to cover my screen so I get a cropped view in my application, but depending on camera-quality and screensizes I get unacceptable results. I use my app to map indicators on a wall to my camerastream, when they match a picture is taken. If I crop my video to my viewport, it could be that you would have to move away 5 meters with one device and 10 with another. When I use my viewport width and height to match my constraints I also get strange results on device where the viewport dimensions don't match the camera dimensions. – Bert Huys Feb 07 '19 at 14:42

1 Answers1

0

After further testing I noticed that when I set my video constraints to full HD (1920 x 1080) my video doesn't get the stretch/squeeze.

Using my videocontainer to scale down my video and a calculation with my video to container ratio I also managed to get my indicators positioned right.

After some further research I found out that my issue could have been caused by a difference between the device's ratio and the camera's ratio. Below a link to another post about this strange behaviour:

Android Camera Preview Stretched

Making my constraints higher than my device constraints solved my problem as the nearest available one is used instead. I'm still wondering why empty width and height constraints also gave the strange stretch/squeeze behaviour. 

const constraints = {
    video: {
      width:1920,
      height:1080,
      facingMode: {ideal:"environment"},
    },
    audio: false
  };
Bert Huys
  • 81
  • 7