9

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

Hongbo Miao
  • 45,290
  • 60
  • 174
  • 267
  • Note that your fiddle doesn't work in Firefox. Just use `video.src = URL.createObjectURL(stream)` instead, or starting with Chrome 52 you can use `video.srcObject = stream` in both browsers. – jib May 01 '16 at 02:02

3 Answers3

7

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.

jib
  • 40,579
  • 17
  • 100
  • 158
  • thank you so much for detailed answer! I will reply more soon! – Hongbo Miao May 01 '16 at 19:28
  • 2
    I just got time to test, I think it is a good way to go. Thank you so much! – Hongbo Miao May 10 '16 at 14:48
  • I am recording straight to file, is it possible to set the crop x, y, x2, and y2? Because otherwise I'll have to figure out how to get each frame to a canvas then crop each frame then save it back to webm. – Noitidart Jun 10 '16 at 07:49
  • 1
    @Noitidart If you need the cropping in the actual output file, then I don't know of a better way, sorry. In Firefox I would draw to canvas as you suggest, and use *canvas.captureStream()*. – jib Jun 10 '16 at 11:25
  • Ooo that's a cool idea! I'll try that! I'll keep you updated :) – Noitidart Jun 10 '16 at 12:24
  • Hi there jib, this captureStream looks great but I have recorded audio with it. Is there possible to overlap the recorded audio over the captureStream? – Noitidart Jun 11 '16 at 10:19
  • 1
    @Noitidart I think so, but please post a new question as there's not enough room here. – jib Jun 11 '16 at 13:39
  • Thanks jib! I actually didn't look at the docs on it yet, I was still working on other parts. If I stumble I'll definitely post up a q and ping you. – Noitidart Jun 11 '16 at 13:50
3

You can set the aspect ratio by using an aspectRatio property.

video: {
 width: {max: 1024},
 height: {max: 1024},
 aspectRatio: {ideal: 1}
}

In this case, if a user's camera supports an aspect ratio of 1:1 the website will use it. In case when it is not supported it will use a different one.

Also if your camera resolution is maximally 720p but it does support the 1:1 ratio it will start a video with 720x720 resolution.

Berd
  • 31
  • 3
0

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.

IDED
  • 174
  • 2
  • 10