I call
navigator.mediaDevices.getUserMedia({video: true, audio: false, width: 640, height: 480})
On desktop this returns the specified resolution. On mobile portrait (specifically Safari iOS) this returns 480x640 video on the first call of getUserMedia, which is expected behavior.
My app is structured so that one can click outside of the app and click to resume it again in a browser.
The "click out" triggers this bit of code
stream_global.getTracks().forEach(function(track) { track.stop(); });
stream_global is set as such:
navigator.mediaDevices.getUserMedia( {video: true, audio: false} ).then(function(stream) { stream_global = stream; // and the rest of the function
And the "resume" triggers the same getUserMedia call with the same parameters.
navigator.mediaDevices.getUserMedia({video: true, audio: false, width: 640, height: 480})
When I trigger these events the video.videoWidth and video.videoHeight will confusingly toggle between the values of 640x480 and 480x640 respectively, without any orientation change. I know this for a fact because I append these values (video.videoWidth, video.videoHeight) to a p element as innerHTML every time I call getUserMedia. Sometimes getUserMedia will return one of these resolutions a couple times in a row, then switch. I started observing this behavior a couple days ago, and while I cannot know when exactly it started, it definitely wasn't there about a year ago.
This behavior is extremely confusing to me, and any help is appreciated.
For reference, this is the adapter.js I use