Skip to content

How can I use navigator.getMedia in Angular

I have a problem when implementing navigator.getMedia in angular. Which would be the correct way?.

public promiseGetUserMediaOld(constraints: any) {
    navigator.getMedia =
      navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
    navigator.getMedia(constraints, resolve, reject);

the error is “Property ‘getMedia’ does not exist on type ‘Navigator'”



Correct syntax would be navigator.MediaDevices.getUserMedia

The MediaDevices.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.

That stream can include, for example, a video track (produced by either a hardware or virtual video source such as a camera, video recording device, screen sharing service, and so forth), an audio track (similarly, produced by a physical or virtual audio source like a microphone, A/D converter, or the like), and possibly other track types.

It returns a Promise that resolves to a MediaStream object. If the user denies permission, or matching media is not available, then the promise is rejected with NotAllowedError or NotFoundError DOMException respectively.

import {
} from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
export class AppComponent implements OnInit {

  // Put variables in global scope to make them available to the browser console.
const constraints = window.constraints = {
  audio: false,
  video: true
errorString = '';

ngOnInit() {}

handleSuccess(stream) {
  const video = document.querySelector('video');
  const videoTracks = stream.getVideoTracks();
  console.log('Got stream with constraints:', constraints);
  console.log(`Using video device: ${videoTracks[0].label}`); = stream; // make variable available to browser console
  video.srcObject = stream;

handleError(error) {
  if ( === 'OverconstrainedError') {
    const v =;
    errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
  } else if ( === 'NotAllowedError') {
    errorMsg('Permissions have not been granted to use your camera and ' +
      'microphone, you need to allow the page access to your devices in ' +
      'order for the demo to work.');
  errorMsg(`getUserMedia error: ${}`, error);

errorMsg(msg, error) {
  this.errorString = msg;
  if (typeof error !== 'undefined') {

async init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    this.handleSuccess(stream); = true;
  } catch (e) {


Working example:

User contributions licensed under: CC BY-SA
6 People found this is helpful