2

Basically the question is in the title. This is about WebRTC and getUserMedia function. Similar question was here: How to keep 1:1 aspect ratio video all the time in WebRTC. But in my case I need to record a stream using MediaRecorder, just crop a video element with css is not enough. I'm a bit confused about getUserMedia constraints. There is aspectRatio parameter, but I didn't manage how to achieve required result with it. What worked for me was to define constraints in that way:

const constraints = {
  audio: true,
  video: {
    width: { exact: 720 },
  }
};

But it doesn't define max resolution automatically. Do you have any ideas how to do it in a smart way?

Vitalii Ivanov
  • 732
  • 1
  • 7
  • 19
  • Possible duplicate of [How to keep 1:1 aspect ratio video all the time in WebRTC](https://stackoverflow.com/questions/36961228/how-to-keep-11-aspect-ratio-video-all-the-time-in-webrtc) – jib Jun 19 '17 at 16:09
  • @jib yes, that question is similar, but I need a stream to record it using MediaRecorder. Just crop a video element with css is not enough. – Vitalii Ivanov Jun 19 '17 at 19:20
  • 1
    `aspectRatio` is not implemented in Chrome or Firefox yet. However, it sounds like you expect getUserMedia() to rescale the camera output for you. Not all browsers do this, instead letting you discover native modes of your camera, so this may fail with OverconstrainedError instead. – jib Jun 19 '17 at 22:49
  • 1
    It seems that `aspectRatio` is working on the latest Chrome now, although I can't find any information about that. However, at least the `min` and `max` constraint did work for me on Chrome. – Piet Feb 26 '18 at 18:26

1 Answers1

6

Not all cameras are going to support all aspect ratios. 1:1 is certainly an oddball aspect ratio.

What you have to do is do your own cropping and make your own stream. You can do this by setting a video's srcObject to the getUserMediaStream, then every frame (use requestAnimationFrame()), draw that video to a canvas, in whatever cropped way you want. From there, use CanvasCaptureMediaStream to get the edited video back out as a stream which you can use in your WebRTC call.

Brad
  • 159,648
  • 54
  • 349
  • 530