Video Device Info

README.md

@@ -59,7 +59,7 @@ export class AppModule { }
 
 `<webcam></webcam>`
 
-As simple as that. 
+As simple as that.
 
 For more examples, see the code in the <a href="https://github.com/basst314/ngx-webcam-demo" target="_blank">Demo-Project</a>.
 
@@ -82,17 +82,43 @@ This section describes the basic inputs/outputs of the component. All inputs are
 * `imageClick: EventEmitter<void>`: An `EventEmitter` to signal clicks on the webcam area.
 * `initError: EventEmitter<WebcamInitError>`: An `EventEmitter` to signal errors during the webcam initialization.
 * `cameraSwitched: EventEmitter<string>`: Emits the active deviceId after the active video device has been switched.
+* `videoDeviceInfo: EventEmitter<InputDeviceInfo>`: 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
   <webcam (initError)="handleInitError($event)"></webcam>
 ```
-```
+
+``` typescript
   public handleInitError(error: WebcamInitError): void {
     if (error.mediaStreamError && error.mediaStreamError.name === "NotAllowedError") {
       console.warn("Camera access was not allowed by user!");

src/app/modules/webcam/webcam/webcam.component.ts

@@ -40,9 +40,11 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
   @Output() public imageClick: EventEmitter<void> = new EventEmitter<void>();
   /** Emits the active deviceId after the active video device was switched */
   @Output() public cameraSwitched: EventEmitter<string> = new EventEmitter<string>();
+  /** Emits device info of the active device to get kind, label, and MediaTrackCapabilities of the device **/
+  @Output() public videoDeviceInfo: EventEmitter<InputDeviceInfo> = 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;
@@ -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) => {
@@ -411,10 +415,10 @@ export class WebcamComponent implements AfterViewInit, OnDestroy {
   /**
    * Reads available input devices
    */
-  private detectAvailableDevices(): Promise<MediaDeviceInfo[]> {
+  private detectAvailableDevices(): Promise<InputDeviceInfo[]> {
     return new Promise((resolve, reject) => {
       WebcamUtil.getAvailableVideoInputs()
-        .then((devices: MediaDeviceInfo[]) => {
+        .then((devices: InputDeviceInfo[]) => {
           this.availableVideoInputs = devices;
           resolve(devices);
         })