From 81f075386278b37a786358465fdd722b66db1ddf Mon Sep 17 00:00:00 2001 From: Chad Dreier Date: Sat, 11 Jul 2020 15:42:24 -0700 Subject: [PATCH 1/4] Changed type to InputDeviceInfo the actual output is InputDeviceInfo which extends MediaDeviceInfo with getCapabilities() method --- src/app/modules/webcam/webcam/webcam.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/modules/webcam/webcam/webcam.component.ts b/src/app/modules/webcam/webcam/webcam.component.ts index 2758d5f..1e8cc38 100644 --- a/src/app/modules/webcam/webcam/webcam.component.ts +++ b/src/app/modules/webcam/webcam/webcam.component.ts @@ -42,7 +42,7 @@ export class WebcamComponent implements AfterViewInit, OnDestroy { @Output() public cameraSwitched: EventEmitter = new EventEmitter(); /** available video devices */ - public availableVideoInputs: MediaDeviceInfo[] = []; + public availableVideoInputs: InputDeviceInfo[] = []; /** Indicates whether the video device is ready to be switched */ public videoInitialized: boolean = false; @@ -411,10 +411,10 @@ export class WebcamComponent implements AfterViewInit, OnDestroy { /** * Reads available input devices */ - private detectAvailableDevices(): Promise { + private detectAvailableDevices(): Promise { return new Promise((resolve, reject) => { WebcamUtil.getAvailableVideoInputs() - .then((devices: MediaDeviceInfo[]) => { + .then((devices: InputDeviceInfo[]) => { this.availableVideoInputs = devices; resolve(devices); }) From 477ddacec0a34efe1382fcf8f8bd7a8ad0a2c9be Mon Sep 17 00:00:00 2001 From: Chad Dreier Date: Sat, 11 Jul 2020 15:43:27 -0700 Subject: [PATCH 2/4] added event to emit the active device info to get kind, label, and MediaTrackCapabilities of the device --- src/app/modules/webcam/webcam/webcam.component.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/modules/webcam/webcam/webcam.component.ts b/src/app/modules/webcam/webcam/webcam.component.ts index 1e8cc38..84985a2 100644 --- a/src/app/modules/webcam/webcam/webcam.component.ts +++ b/src/app/modules/webcam/webcam/webcam.component.ts @@ -40,6 +40,8 @@ export class WebcamComponent implements AfterViewInit, OnDestroy { @Output() public imageClick: EventEmitter = new EventEmitter(); /** Emits the active deviceId after the active video device was switched */ @Output() public cameraSwitched: EventEmitter = new EventEmitter(); + /** Emits device info of the active device to get kind, label, and MediaTrackCapabilities of the device **/ + @Output() videoDeviceInfo: EventEmitter = new EventEmitter(); /** available video devices */ public availableVideoInputs: InputDeviceInfo[] = []; @@ -334,10 +336,12 @@ export class WebcamComponent implements AfterViewInit, OnDestroy { this.activeVideoInputIndex = activeDeviceId ? this.availableVideoInputs .findIndex((mediaDeviceInfo: MediaDeviceInfo) => mediaDeviceInfo.deviceId === activeDeviceId) : -1; this.videoInitialized = true; + this.videoDeviceInfo.next(this.availableVideoInputs[this.activeVideoInputIndex]); }) .catch(() => { this.activeVideoInputIndex = -1; this.videoInitialized = true; + this.videoDeviceInfo.next(undefined); }); }) .catch((err: MediaStreamError) => { From de0d5374cf109bd4f8712bd290cf103adaffc178 Mon Sep 17 00:00:00 2001 From: Chad Dreier Date: Sat, 11 Jul 2020 17:04:19 -0700 Subject: [PATCH 3/4] added public to maintain consistency --- src/app/modules/webcam/webcam/webcam.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modules/webcam/webcam/webcam.component.ts b/src/app/modules/webcam/webcam/webcam.component.ts index 84985a2..9af6762 100644 --- a/src/app/modules/webcam/webcam/webcam.component.ts +++ b/src/app/modules/webcam/webcam/webcam.component.ts @@ -41,7 +41,7 @@ export class WebcamComponent implements AfterViewInit, OnDestroy { /** Emits the active deviceId after the active video device was switched */ @Output() public cameraSwitched: EventEmitter = new EventEmitter(); /** Emits device info of the active device to get kind, label, and MediaTrackCapabilities of the device **/ - @Output() videoDeviceInfo: EventEmitter = new EventEmitter(); + @Output() public videoDeviceInfo: EventEmitter = new EventEmitter(); /** available video devices */ public availableVideoInputs: InputDeviceInfo[] = []; From ea830151f751ee35a0fa82bc2d2d7bf939bb911b Mon Sep 17 00:00:00 2001 From: Chad Dreier Date: Sun, 12 Jul 2020 20:08:45 -0700 Subject: [PATCH 4/4] updated readme --- README.md | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 30dcb30..7f3d4fb 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ export class AppModule { } `` -As simple as that. +As simple as that. For more examples, see the code in the Demo-Project. @@ -82,17 +82,43 @@ This section describes the basic inputs/outputs of the component. All inputs are * `imageClick: EventEmitter`: An `EventEmitter` to signal clicks on the webcam area. * `initError: EventEmitter`: An `EventEmitter` to signal errors during the webcam initialization. * `cameraSwitched: EventEmitter`: Emits the active deviceId after the active video device has been switched. +* `videoDeviceInfo: EventEmitter`: Emits information on the device when it changes. Helpful to be able to run `getCapabilities()` to view device properties [MediaTrackCapabilities](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities). + +``` typescript +interface MediaTrackCapabilities { + aspectRatio?: DoubleRange; + autoGainControl?: boolean[]; + channelCount?: ULongRange; + deviceId?: string; + echoCancellation?: boolean[]; + facingMode?: string[]; + frameRate?: DoubleRange; + groupId?: string; + height?: ULongRange; + latency?: DoubleRange; + noiseSuppression?: boolean[]; + resizeMode?: string[]; + sampleRate?: ULongRange; + sampleSize?: ULongRange; + width?: ULongRange; +} +``` ## Good To Know + ### How to determine if a user has denied camera access + When camera initialization fails for some reason, the component emits a `WebcamInitError` via the `initError` EventEmitter. If provided by the browser, this object contains a field `mediaStreamError: MediaStreamError` which contains information about why UserMedia initialization failed. According to [Mozilla API docs](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), this object contains a `name` attribute which gives insight about the reason. + > If the user denies permission, or matching media is not available, then the promise is rejected with NotAllowedError or NotFoundError respectively. Determine if a user has denied permissions: -``` + +``` html ``` -``` + +``` typescript public handleInitError(error: WebcamInitError): void { if (error.mediaStreamError && error.mediaStreamError.name === "NotAllowedError") { console.warn("Camera access was not allowed by user!");