Using no aspectRatio nor ideal width & height

by María Fernández

HTML

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<div id="title"><strong>Using no aspectRatio nor ideal width & height</strong></div>
<div id="div"></div>
<video id="video" autoplay></video>

CSS

#video {
    background: pink;
    height: 9.6rem;
    width: 16.9rem;
}

JavaScript

var console = { log: msg => div.innerHTML += msg + "<br>" };

(async () => {
  try {
  	// THIS IS WHAT WE WANT TO MODIFY
    const constraints = {
    	video: {
      	width: { max: 1920 },
        height: { max: 1080 },
	      frameRate: { min: 20, ideal: 20, max: 30 }
       }
    };
    video.srcObject = await navigator.mediaDevices.getUserMedia(constraints);
    const track = video.srcObject.getTracks()[0];
    if (track.getSettings) {
      const { width, height } = track.getSettings();
      console.log(`${width}x${height}`);
    }
  } catch(e) {
    console.log(e);
  }
})();