Feature Request - pauseHard Camera

[monsdroid]

Hi,
first of all: Works like a Charm and a very nice piece of Code!

Im using this in Browsers on mobile devices and as long as the component is mounted Chrome displays a Notification that there is an 'Access to Video Camera from domain'. Even if the Browser is in background or switched to an different Tab.

Would it be possible for your to expose a pauseHard() function which disconnects the Camera but keeps the last image in the canvas?

Calling stopCamera() works but kills the canvas or blacks it out

[gruhn]

Thanks 😀

Could you split this issue so we can handle your suggestions separately. Just open another issue and rename this one.

[gruhn]

You should know: At the moment, there isn't really a canvas element. The camera stream is displayed via a video element. When you pause the component, we simply call pause() on the video. The camera is still streaming in the background and that's why Chrome displays the notification. When you call stopCamera the stream is closed and I guess video elements need the stream to be active to display anything. As a result the last captured frame is lost.

We could continuously paint the streams frames to an actual canvas. This should look exactly like a video element but when the stream is closed the last painted frame will persist. I assume you had something like this in mind too, right?

I'd like to keep this components API as simple as possible, so I always hesitate to expose new events, props and so on. However, I think your suggestion is totally valid. It makes sense to release the camera when it seems to be not in use. I'm thinking about making this the default when pause is set to false. Un-pausing might cause perceivably more delay though, because the stream has to be loaded again.

Those are my thoughts so far. What do you think?

PS: don't forget to open the drag-and-drop related issue. I like that idea too 😉

[monsdroid]

Maybe handle it transparent for the user of your component. The https://caniuse.com/#feat=pagevisibility API should work on all devices which support camera streams. if (document.visibilityState == "visible") do a soft pause otherwise disconnect the stream.
Another turn down beside the notificaton that a stream is open is that the stream is open :-)
Which means it uses battery. My Phone (Galaxy S7) heats up quite fast with the connected stream running in background

[gruhn]

I finally started to work on this one too. I think I found a nice solution but performance might have suffered. On desktop it's fine but my old-ass phone has a hard time. If you want, you can checkout the demo page – especially validation (hard) demo – and tell me how it performs on your device.

[gruhn]

🎉 This issue has been resolved in version 1.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀