问题描述:

I'm working on a webapp for modern browsers using MediaDevices.getUserMedia() as shown:

var constraints = { audio: true, video: { width: 1280, height: 720 } };

navigator.mediaDevices.getUserMedia(constraints)

.then(function(stream) {

var video = document.querySelector('video');

video.src = window.URL.createObjectURL(stream);

video.onloadedmetadata = function(e) {

video.play();

};

})

I want to have a dynamic layout that responds to window resizes, keeping the webcam stream aspect ratio the same, but scales the width & height of the video accordingly. Is there some way to do this, or am I stuck with the exact video size I get once I request it? I've tried changing the width attribute on the video tag, but that doesn't seem to do anything.

相关阅读:
Top