Angular ngx-webcam error enumerateDevices() not supported.

[TecBots]

After deploying angular application to server ngx-webcam is showing errors.
https://user-images.githubusercontent.com/34974441/68767400-73e1af80-0642-11ea-8da2-f14db9e1c787.png
Angular Dependencies:
"dependencies": { "@angular/animations": "8.0.0", "@angular/cdk": "^8.0.0", "@angular/common": "8.0.0", "@angular/compiler": "8.0.0", "@angular/core": "8.0.0", "@angular/forms": "8.0.0", "@angular/platform-browser": "8.0.0", "@angular/platform-browser-dynamic": "8.0.0", "@angular/router": "8.0.0", "@fullcalendar/core": "4.0.2", "@fullcalendar/daygrid": "4.0.1", "@fullcalendar/interaction": "4.0.2", "@fullcalendar/timegrid": "4.0.1", "chart.js": "2.7.3", "font-awesome": "^4.7.0", "intl": "1.2.5", "ngx-webcam": "^0.2.6", "primeflex": "1.0.0-rc.1", "primeicons": "^2.0.0", "primeng": "8.0.0", "quill": "^1.3.7", "rxjs": "6.4.0", "web-animations-js": "github:angular/web-animations-js#release_pr208", "zone.js": "0.9.1" }

TypeScript

import { Component, OnInit } from '@angular/core';
import { WebcamImage, WebcamInitError, WebcamUtil } from 'ngx-webcam';
import { Observable, Subject } from 'rxjs';

@Component({
  selector: 'app-camera',
  templateUrl: './camera.component.html',
  styleUrls: ['./camera.component.css']
})
export class CameraComponent implements OnInit {
  public showWebcam = true;
  public allowCameraSwitch = true;
  public multipleWebcamsAvailable = false;
  public deviceId: string;
  public videoOptions: MediaTrackConstraints = {
    // width: {ideal: 1024},
    // height: {ideal: 576}
  };
  public errors: WebcamInitError[] = [];
  public webcamImage: WebcamImage = null;
  private trigger: Subject<void> = new Subject<void>();
  private nextWebcam: Subject<boolean | string> = new Subject<boolean | string>();
  constructor() { }

  ngOnInit() {
    WebcamUtil.getAvailableVideoInputs()
      .then((mediaDevices: MediaDeviceInfo[]) => {
        this.multipleWebcamsAvailable = mediaDevices && mediaDevices.length > 1;
      });
  }
  public triggerSnapshot(): void {
    this.trigger.next();
  }
  public toggleWebcam(): void {
    this.showWebcam = !this.showWebcam;
  }

  public handleInitError(error: WebcamInitError): void {
    if (error.message === "Permission denied") {
      error.message += " To Access Camera"; 
      this.errors.push(error);
    } else {
      this.errors.push(error);
    }
  }

  public showNextWebcam(directionOrDeviceId: boolean | string): void {
    this.nextWebcam.next(directionOrDeviceId);
  }

  public handleImage(webcamImage: WebcamImage): void {
    this.webcamImage = webcamImage;
  }

  public cameraWasSwitched(deviceId: string): void {
    console.log('active device: ' + deviceId);
    this.deviceId = deviceId;
  }

  public get triggerObservable(): Observable<void> {
    return this.trigger.asObservable();
  }

  public get nextWebcamObservable(): Observable<boolean | string> {
    return this.nextWebcam.asObservable();
  }
}

Html

<div class="ui-g-4">
            <img style="width:50%;"
              [src]="webcamImage.imageAsDataUrl" />
    </div>
   <div class="ui-g-8">
            <button id="capturebtn" (click)="captureImageDialogShow()"
              class="myCaptureBtn ui-button ui-widget ui-state-default ui-corner-all">
              <span class="ui-button-text ui-c"><i class="fa fa-camera" aria-hidden="true"></i>                             
                   &nbsp;Capture Image</span>
            </button>
   </div>

[cassioHilario]

I Have the same issue :¬(

[basst314]

Please make sure you access the app on the server over https://. Many browsers allow media access only on secure urls starting with https://.

Let me know if that helps.

[bobbydowling]

I am accessing over https:.. I just clicked your link... and I get the same errors:

• enumerateDevices() not supported
• Cannot read UserMedia from MediaDevices

[bobbydowling]

Seems to be a Chrome iOS issue.

[apena813]

#3 (comment)