getUserMedia Examples

Made by the Pipe Video Recording Platform

Below are some examples of the constraints resolution, facing mode, frame rate, front and back camera, and aspect ratio.

Example 1: How to request both audio and video without any specific requirements:

const constraints = {
  audio: true,
  video: true,
};

The constraints object can have one or both of these 2 properties:

• video: indicates whether or not a video track is required
• audio: indicates whether or not an audio track is required

Example 2: How to take a picture without an audio track: simply set the audio property to false, like this:

const constraints = {
  audio: false,
  video: true
}

Resolution

Example 1: One can use the width and height properties to request a specific resolution from the webcam. The example below shows how to express a preference for 1280x720 camera resolution:

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

The browser may return other resolutions if an exact match is not available, or the user overrides it. Try Webcam Resolution Tester to test and compare supported webcam resolutions directly in your browser.

Example 2: For a require capability, use keywords like: min, max, or exact to help you get the best resolution from any device. The example below present a minimum resolution of 1280x720:

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

If no camera exists with this resolution or higher, then the returned promise will be rejected with OverconstrainedError, and the user will not be prompted (see common getUserMedia() Errors for details).

Example 3: The example below present how to use the inherently mandatory constraints (min, max, exact) and optional ones (ideal or plain values):

const constraints = {
  audio: true,
  video: {
    width: { 
      min: 1024, 
      ideal: 1280, 
      max: 1920 
    },
    height: { 
      min: 576, 
      ideal: 720, 
      max: 1080 
    },
  },
};

Facing mode

Example 1: The example below present how to use the front camera (if one is available) over the rear one on mobile devices:

const constraints = {
  audio: true,
  video: { 
    facingMode: "user" 
  },
};

Example 2: The example below present how to use the rear camera:

const constraints = {
  audio: true,
  video: {
    facingMode: "environment" 
  }
};

Frame rate

Since frame rate affects both video quality and bandwidth, it can be a good idea to limit it—especially when streaming over low-bandwidth connections.

Example 1: The example below present how to use lower frame-rates:

const constraints = {
  video: { 
    frameRate: { 
      ideal: 10, 
      max: 15 
    } 
  },
};

Front and back camera

Example: The example below present how to use front and back camera on mobile phones:

const constraints = {
  video: { 
    facingMode: front ? "user" : "environment" 
  },
};

Aspect ratio

We can use exact, ideal, min, max, or combinations of these properties to control how strict the aspect ratio requirement is.

Example 1: The example below present an exact aspect ratio 16:9:

const constraints = {
  video: {
    aspectRatio: { 
      exact: 16 / 9 
    }
  }
};

Example 2: The example below present an aspect ratio + resolution:

const constraints = {
  video: {
    width: { 
      ideal: 1280 
    },
    height: { 
      ideal: 720 
    },
    aspectRatio: { 
      ideal: 16 / 9 
    }
  }
};

Example 3: The example below present a 4:3 standard aspect ratio with back camera:

const constraints = {
  audio: true,
  video: {
    width: 640,
    height: 480,
    aspectRatio: { 
      exact: 4 / 3 
    },
    facingMode: { 
      ideal: "environment" 
    }
  }
};

Original article for this blog post: https://blog.addpipe.com/getusermedia-video-constraints/