What is the correct way to handle orientation changes to a video camera feed in Javascript?

37 Views Asked by At

So I am currently running a tensorflowjs model on an incoming video stream defined using the getUserMedia() function, but while trying to create a video stream in landscape mode I get an incorrectly sized stream.

Here's how I am defining the stream:

VIDEO_WIDTH = 340
VIDEO_HEIGHT = 600
if(navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({'video': {
          width: VIDEO_WIDTH,
          height: VIDEO_HEIGHT,
          facingMode: "user"
      }}).then(stream => {
              video.srcObject = stream;
          })
          .catch(e => {
              console.log("Error occurred while getting the video stream");
          });
  }
console.log(video.videoWidth, video.videoHeight)

Since I'm optimizing for mobile, I started with portrait mode, and the above code returns the correct video width and height in portrait mode, which is 340 600. However, I want to make this responsive even in landscape mode, so on an orientation change, I just flip the values of width and height and recreate the video stream above. However, this time I get the values 340 360, which seems strange to me. What could possibly be going wrong? For reference, I'm testing this using Devtools and a Chrome Browser on an Android Phone.

0

There are 0 best solutions below