How to keep 1:1 aspect ratio video all the time in

问题:

When I use this setting, the video aspect ratio is 1:1.

constraints = {
  audio: false,
  video: { width: 240, height: 240 }
};

However, I want WebRTC choose better resolution if exists. When I changed it to this

constraints = {
  audio: false,
  video: {
        width: { min: 240, ideal: 720, max: 1080 },
        height: { min: 240, ideal: 720, max: 1080 }
    }
};

The demo jsfiddle

In my case, sometimes, it becomes 4:3, which is 640*480. I think it is because both the number 640 and 480 are between 240 and 1080.

How can I keep it 1:1 all the time? Thanks

回答1:

You're asking about getUserMedia here, which is effectively about camera resolutions.

What resolutions your camera captures video in depends on your hardware. My camera for instance, can capture in a number of modes, they're all 4:3 modes up to about 640x480, and above that they're all 16:9. It has no 1:1 modes (I checked).

You haven't said why you care about aspect, but I suspect you still want a ball to appear round and not oval, so if your site wants video from my camera to fit in a square, it'll need to either crop out the left and right parts of my video or suffer black bars above and below. No way around it.

If it's just about layout, leave the capture aspect alone and crop the playback element (which scales the video for you btw) with CSS instead. This gives you full control (use https fiddle in Chrome):

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => video.srcObject = stream)
  .then(() => new Promise(resolve => video.onloadedmetadata = resolve))
  .then(() => log(video.srcObject.getVideoTracks()[0].label +
                  " ("+ video.videoWidth +"x"+ video.videoHeight +")"))
  .catch(log);

var log = msg => div.innerHTML += msg + "<br>";

.crop{
  overflow:hidden;
  display:block;
  width: 120px;
}
#video{
  margin-left: -15px;
}

<div class="crop"><video id="video" width="160" height="120" autoplay></video></div>
<br><div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Also, please be aware of browser differences here, some browsers (Chrome) will mutate (crop) the camera capture for you, while others (Firefox) will always give you native modes.

回答2:

The previous answer might have been correct at the time but is now wrong. The resolutions of the camera don't really effect this its more about the browser being used and the driver on the end users computer.

The cameras resolution will affect the quality of the stream returned but if you can enforce an aspect ratio is very much a browser issue.

The example I will use here is based on the setup I am working with currently... Tecknet 1080p webcam (cheap and cheerful, does not offer any aspects beyond 16:9/4:3 but driver supports aspect of 1), Win7, chrome, firefox and IE. Android mobile phone (one plus x) using chrome browser

What I am trying to achieve is the same as the person above an aspect of 1, as to why I am doing this for those unenlightened to the modern world of cross browser and cross device design is due to an issue which appears on mobile devices when the device is rotated between portrait and landscape. Upon switching these view types the browser in all its wisdom will automatically switch the height and width of your stream meaning that regardless of what you wish to enforce a mobile will sidestep it and enforce its own set of dimensions meaning an inconsistent result for you the developer.

How do we fix this issue?

Easy you enforce a aspect of 1 meaning regardless of the devices rotation your picture will always return a square image thus giving you a consistent result. The real issue, aspect enforcement on WebRTC is limited to Chrome (both android and pc) IE Edge apparently can do it also, but as I'm using win7 I cannot verify this fact. Firefox which does support WebRTC unfortunately does not work so well with constraints and will return a stream if possible regardless if it meets your constraints where as chrome will return an error stating over constraint. This issue exists mainly because WebRTC is still not standardized across all browsers and as such means you are still likely to encounter weird and wonderful results and inconsistent results but with flash on its way out you have limit options other than to hope they eventually get the api to give consistent results regardless of browser. For now you will need to fall back to checking metadata once your steam begins to figure out if you got what you asked for in firefox then either as suggested above crop if its purely for visual or if its for actual use then add a host of post processing to allow the result to be conformed to your requirements.

Myself I am doing both in a desperate attempt to produce a cross device, cross browser system for handling streaming media.