This package is not working on Firefox.

[rajgsdei]

I have tried to run it on Firefox 60.0.1 and 50.0.1 but it not working either of them. It's not showing the canvas and streams are not rendering.
I have used this package inside my application and this issue is now preventing us from delivering this. Can you please help me out with this ASAP.
Thanks.

[basst314]

Hi @rajgsdei,

Thanks for using this library and sorry to hear that you‘re having troubles.

I will look into it as soon as I can (next couple of days, maybe even today).

In the meantime can you provide any more information on error messages or console output that you get? Anything that might be helpful.

Thanks!

[basst314]

Hi @rajgsdei,

I released a new version (0.1.7) which should resolve this issue.

Cheers!

[basst314]

(this issue was related to #19)

[rajgsdei]

Hello @basst314,

Thanks for responding soon and yes I checked and it's working fine but there's still an issue with Firefox, it doesn't let me switch the camera. I tried it on both computer and mobile in Firefox. When the page loads or I try to switch camera on my computer it gives me an error in the console saying "active device: undefined". However it's working fine on chrome so I don't think it can be problem with my WebCam.

I'm attaching the screenshot for better understanding. I kept the webcam on the keyboard and clicked the image but when I clicked on switch it still activated the same camera.

Can you please look into this, as my application requires the use of both side of camera when using on mobile devices.
Thanks.

[basst314]

Hi @rajgsdei,

While looking into the first problem yesterday I found that the root cause was that firefox seems to be more restrictive in what information it lets applications access about the active webcam stream.
The root cause for the problem was that the video stream ratio was not present (as it is i.e. for Chrome) and had to be calculated manually.

While fixing this, I noticed as well, that the deviceId is also not returned in firefox, therefore you see „deviceId: undefined“ in the console.

The deviceId is usually used to rotate between the available cameras, so I‘m not surprised to see this problem. Thanks for raising and confirming it!

I will have to look into it in more detail to see whether there‘s a workaround for firefox.

Could you in the meanwhile try to see what ’WebcamUtil.getAvailableVideoInputs()’ returns on firefox? Does it return deviceIds there?

Thanks!

[rajgsdei]

Hello @basst314,

You're right, I had noticed that as well that canvas could not be drawn on the webpage.

Anyway, I ran this command WebcamUtil.getAvailableVideoInputs() and I got the following response.

Again, I ran some piece of code (In case this might be useful) and got the below response with device Id. Still, I guess it won't let me switch, it can't access the other camera.

Thanks.

[basst314]

Hi @rajgsdei, to better track this, I opened a new issue: #22.
Let's continue the discussion there.

Thanks!

[basst314]

Hi @rajgsdei,

please check my response in the other thread #22. I was able to resolve this issue.

Thanks!

[siva-saripilli]

Hi @basst314

I've implemented a webcam snapshot feature in one of the Angular 9 application I'm working on. I've set a 3:4 aspect ratio so as users can take passport photo type photos from webcam. I've set the options as -

public get videoOptions(): MediaTrackConstraints {
    const result: MediaTrackConstraints = {};
    if (this.facingMode && this.facingMode !== '') {
        result.facingMode = { ideal: this.facingMode };
    };

    result.width = {ideal: 300};
    result.height = {ideal: 400};

    return result;
};

The template is something like this -

        <webcam   
            [hidden]="!isCameraViewDisplayed"
            [height]="camHeight" 
            [width]="camWidth" 
            [trigger]="triggerObservable" 
            (imageCapture)="handleImage($event)"
            [allowCameraSwitch]="false"
            [switchCamera]="nextWebcamObservable"
            [videoOptions]="videoOptions" 
            (initError)="handleInitError($event)">
        </webcam>

It is working for Chrome and Edge - Chromium version. However, in Firefox it's not. The aspect ratio is totally ignored and I believe the default cam aspect ratio is rendered. Is there a way I can fix this for Firefox?