videoDevice input doesn't change the camera

[MattiaPeterle]

Hello @AckerApple,
thank you for the great effort! By doing some tests with your library I saw that the input
[videoDevice]: MediaDeviceInfo is not working properly.
The component is refreshing itself but is not changing the camera; the MediaDeviceInfo passed is a valid one retrieved by the directive <ack-media-devices> -> [(videoInputs)]
However by using [videoDeviceId]: string everything is working well.

Thank you!

[AckerApple]

MediaDeviceInfo doesn’t work in all browsers but does work in more than not. What browser are you using?

If it doesn’t work for you on the demo page of this package then it doesn’t work

[AckerApple]

Ok you might be right on this as the demo page only uses videoDeviceId

I will look into this today. Has nothing to do with browser type.

Link to self of demo code only using ID: https://github.com/AckerApple/ack-angular-webcam/blob/master/example/app/app.pug#L147

[AckerApple]

I have confirmed and found the issue. Attempting a fix now.

[AckerApple]

Well its actually not an issue issue on my end.

Are you using a select html input to select devices? If by id a select input works fine but when you pass around the device as a select value Object, it doesnt work

[AckerApple]

No changes will be made. You need to show me your code revolving around how you select a different device.

My assumption is you are using an html select with [value]="device" with an [ngModel] which will not work because the MediaDevice object is than casted to a string of something like "[Object MediaDevice]".

At this point, until shown otherwise I see this as user error. I test videoDevice and it works

[AckerApple]

The following two examples are written in pug (html short hand).

The following example will NOT work

select(
  "[(ngModel)]" = "selectedDevice"
)
  option(
    *ngFor       = "let device of videoDevices"
    "[value]"    = "device"
  ) {{ device.label || device.kind+'('+index+')' }}

The following example will work

select(
  "[ngModel]" = "selectedDeviceId"
  "(ngModelChange)" = "selectedDevice=videoDevices[$event];selectedDeviceId=$event"
)
  option(
    *ngFor       = "let device of videoDevices;let index=index"
    "[value]"    = "index"
  ) {{ device.label || device.kind+'('+index+')' }}

[MattiaPeterle]

@AckerApple Thank you for the clarification. This is actually a good example to add in the guide.

[AckerApple]

I don’t think this belongs in the docs. You got lucky that we both used a select html input and I saw the issue as otherwise I wouldn’t offer any help for a basic Angular user usage error. The knowledge is objects as select values, that belongs documented in Angular and NOT here

[AckerApple]

Oh and please star, follow and perform any other social actions that will help improve the popularity of this package

[MattiaPeterle]

I already gave you a star.
Another question did you tried with a smartphone? The front camera is working but when I try to switch to the back camera I receive a NavigatorUserMediaError.
The dektop is fine, I can swich to other cameras.
With the smartphone the WebRTC example is working: https://webrtc.github.io/samples/src/content/devices/input-output/

[AckerApple]

iOS you need to use facingMode... All others you switch front and back camera by supplying the deviceId of the camera you wish to access. Of course iOS does it different from the rest.

It works.