Question - Turn camera off about ngx-webcam

[jakehockey10]

We are also running into this issue. Can we please reopen this and investigate? How can I help?

[johangel]

Hi, so i was struggling throughout the day to make the webcam stop record after an ngIf="false" was triggered somewhere over the component and i got this solution:

1. keep the reference of the track after the output "cameraSwitched" emits the event;

public cameraWasSwitched(deviceId: string): void {
this.deviceId = deviceId;
let constraints = {
deviceId: deviceId,
width: this.videoOptions.width,
height: this.videoOptions.height
};
navigator.mediaDevices.getUserMedia({ video: constraints }).then(stream => {
this.onTransmission.emit(stream);
this.tracks = stream.getVideoTracks();
})}

2. add a method that stop said tracks on the ngOnDestroy hook
   this.showWebcam = false;
   this.tracks.forEach(track => {
   track.stop();
   })

im using the "showWebcam " as inner flag of a component that uses the ngx-webcam, its for hide/show element purposes. Anyway this might seem kinda obvious but it took me five good hours of my time, so i hope someone else can benefit from it.

[basst314]

Hi @u77171,

there's no explicit way to turn off the camera through the component. But you can always remove the component from your page after you're done. Would that work for you?

Cheers

[queejie]

Same issue. Can you add a button that will call something like this?
stream.getTracks().forEach(track => track.stop())

^Scratch all that. I guess the problem is that some users still see the camera after the widget has been destroyed. Trying to find out which browsers, etc.

[basst314]

Hi @queejie,

Could you elaborate what issue you‘re experiencing? The camera and all active tracks are shut down and closed once the element is removed from the page (i.e. render it with an ng-if).

Let me know if that helps.

Thanks!

[basst314]

Closing since no response from requestor.

[sstriano]

I am seeing this same thing. Users are reporting that after they leave the route that has the webcam component, their camera is still recording, indicated by the little red flashing icon on the tab in chrome.

The view that uses the camera is super simple:
`import { Component, OnInit, HostListener, ViewChild, ElementRef } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { Router } from '@angular/router';

@component({
selector: 'app-webcam-check',
templateUrl: './webcam-check.component.html',
styleUrls: ['./webcam-check.component.scss']
})
export class WebcamCheckComponent implements OnInit {

@ViewChild('webcam-checker-container') webcamContainer: ElementRef;
public profileName: string;
width: number;
height: number;

constructor(
private authService: MsalService,
private router: Router) {
this.onResize();
}

ngOnInit() {
this.profileName = this.authService.getUser().name;
}

onSubmit = (): void => {
this.router.navigateByUrl('/call-queue');
}

@HostListener('window:resize', ['$event'])
onResize(event?: Event) {
const win = !!event ? (event.target as Window) : window;
if (this.webcamContainer && this.webcamContainer.nativeElement) {
this.width = (this.webcamContainer.nativeElement as HTMLElement).offsetWidth;
this.height = (this.webcamContainer.nativeElement as HTMLElement).offsetHeight;
} else {
this.width = win.innerWidth;
this.height = win.innerHeight;
}
}
}`

[basst314]

Hey @sstriano,

Do you have a minimal demo that shows this behaviour? I‘m having troubles reproducing. The camera should turn itself off after the component is destroyed (shutdown code is present in the component‘s onDestroy() method).

A minimal reproducible example would be great.

Do you know if the behaviour is specific to a browser? Does it only affect some of your users? Are they all using the same app?

Thanks for your help in finding the issue.

[rluckez]

@basst314 I'am facing the same issue, i'am using a modal from ngx-bootstrap with ngx-webcam.
When user user close the modal, it is destroyed, but webcam still recording and chrome continues showing the red icon on tab. I'll investigate more, to try to get whats is going wrong.
It seems that the behavior occurrs on some specific condition, i can't reproduce it anymore.

[bobbydowling]

Same here

[basst314]

Hi @bobbydowling can you provide more details about what you‘re experiencing and how you integrate with the webcam component?
Do you have a minimal demo that showcases the experience?
Does it happen in all browsers or only a specific one? Are all users affected? Does it happen always?

Have you tried adding an ng-if to the webcam component and set it to false if you want the webcam to disappear?

A modal could just get hidden if closed but maybe it‘s not destroyed completely.

Thanks

[bobbydowling]

I created an "ImageUpload" component that I load with the Material Dialog component.

In that component, I merely copied the code from your demo, so it is already using ng-if on your component.

When the Dialog is closed and also on Destroy, which happens when the dialog is closed, I set ng-if to falsey. I also unsubscribe from the Trigger subject, just in case.

This happens using the Safari browser on an iPhone.

Within the loaded component, when the webcam is visible, I get a red camera in the title bar.

When the Dialog is closed and the component is destroyed (assuming), I get a red camera with a diagonal line down the middle, indicating the camera is still loaded, but the webcam is not visible.

My concern is that this will eat the battery. Only option is for the user to reload the app.

Happens always with all users.

[bobbydowling]

It's this:

primefaces/primeng#6216

There appears to be nothing I can do to manually kill the inner Component.

I would need a way to manually kill your component... and ngif is not working.

[bobbydowling]

I provided more info... what do you think?

[basst314]

Hi @bobbydowling,

it seems like Safari still indicates if the active page has permissions or was using WebRTC, even if the camera is no longer active.

I found that the experience is the same when testing this official WebRTC demo on iPhone+Safari.
https://webrtc.github.io/samples/src/content/getusermedia/resolution/

First try selecting a resolution that the iPhone camera can support (e.g. HD), then select something too high, e.g. 8K. The camera stream closes, however the red camera icon with diagonal line is still shown in the Safari browser bar. Other browsers like Chrome on Desktop will also indicate permissions have been granted even if the camera is no longer active (red circle on tab title when active, greyed out camera symbol in browser bar when not active but permissions granted).

This seems to align with the official WebRTC/UserMedia API documentation around privacy requirements that states:

Browsers are required to display an indicator that shows that a camera or microphone is in use, above and beyond any hardware indicator that may exist. They must also show an indicator that permission has been granted to use a device for input, even if the device is not actively recording at the moment.

Seems like this is what the camera symbol with diagonal line indicates.

Hope this helps to clarify things.

[AlexElin]

@basst314 here's an example that reproduces the problem
https://stackblitz.com/edit/ngx-webcam-non-turned-off-camera-demo?file=src/app/app.component.ts
Steps to reproduce: see on the below animation
Most likely you will have to repeat actions several times to reporoduce it

ngx-webcam: 0.3.2
browser: Google Chrome 89

[AlexElin]

@basst314 I think there's a sense to reopen this issue because there's a reproducable example above

[WillowRocha]

I have the exact same problem of the example above! I've tried to apply the ngIf on wrapper div of the camera component, but the camera keeps open after the ngIf goes false and the dialog is closed.

[WillowRocha]

Hi, so i was struggling throughout the day to make the webcam stop record after an ngIf="false" was triggered somewhere over the component and i got this solution:

1. keep the reference of the track after the output "cameraSwitched" emits the event;

public cameraWasSwitched(deviceId: string): void { this.deviceId = deviceId; let constraints = { deviceId: deviceId, width: this.videoOptions.width, height: this.videoOptions.height }; navigator.mediaDevices.getUserMedia({ video: constraints }).then(stream => { this.onTransmission.emit(stream); this.tracks = stream.getVideoTracks(); })}

2. add a method that stop said tracks on the ngOnDestroy hook
   this.showWebcam = false;
   this.tracks.forEach(track => {
   track.stop();
   })

im using the "showWebcam " as inner flag of a component that uses the ngx-webcam, its for hide/show element purposes. Anyway this might seem kinda obvious but it took me five good hours of my time, so i hope someone else can benefit from it.

Thanks! It helped me a lot!
My camera component is inside a modal, so I prevented the user to close the modal before the camera finish initializing or throwing an error. I emitted an event when the tracks are added (or an error had happened), to enable the modal to be closed. For me it worked!

I wrote it like this:

this.tracks = stream.getVideoTracks();
this.enableDialogClose.emit();

And the handleInitError would look like:

handleInitError(error: WebcamInitError): void {
    //some error handlings
    this.enableDialogClose.emit();
}

I've been working with Angular for a few weeks now, so I'm not fully familiarized with the language, but that was the solution I was able to do.

[kamilhawdziejuk]

What worked in my case is to apply fix to the webcam component itself (muhammad-usman-anwar@20c6dc6) and in addition to this close the subject by calling:
this.nextWebcam.complete();
(I triggered it when closing modal window using this webcam).
Looks like it is a missing part of releasing resources when using webcam.

[HenryDewa]

I encountered the same problem, has anyone found a solution?