Search code examples
javascriptcameragetusermedia

How to change camera video width and height in Firefox using getUserMedia videoConstraints?

I'm trying to create a webcam recorder app using RecordRTC in Javascript But my video size must be in this aspect ratio: {width:270, height: 480 }

I'm using the code below and works fine in Chrome and Safari but not working on FireFox

private videoConstraints: any = {
  width: 270,
  height: 480,
  facingMode: 'user'}

browser.mediaDevices.getUserMedia({
    video: this.videoConstraints,
    audio: this.audioConstraints
  })

I also tried :

video_constraints = {
    width: { min: 320, max: 480 },
    height: { min: 240, max: 360 },
    require: ["width", "height"] // needed pre-Firefox 38 (non-spec)
    };

and so on but none of them works for me on FF. enter image description here

Solution

  • Unfortunately you cannot make your browser / webcam combination produce exact video formats. This is a function both of the browser and the webcam, so even if you get your machine to do it, your users' machines may not. They may use different webcams from you.

    So you need to give a size range in your constraints. There's logic in the browser to give you the nearest thing it can to your request. This sort of constraint might do it for you.

    video_constraints = {
  width: { min: 160, ideal: 270: max: 640 },
  height: { min: 240, ideal: 480, max: 480 } 
};

    But you almost surely will not get the portrait-mode aspect ratio you want from a desktop device.