Accessing webcam data is broken by canvas fingerprinting protections (firefox, or any browser with adblockers)

[clementpoiret]

Please follow the general troubleshooting steps first:

• Is your app running over HTTPS? (please provide the URL if possible)
• Have you tried running the demo (https://codepen.io/mozmorris/pen/JLZdoP) on your device?
• Checked the latest "Can I use" compatbility table? (https://caniuse.com/stream)

Bug reports:

When fingerprinting protections are in place, such as in Firefox when privacy.resistFingerprinting is true, or when a user uses any kind of privacy-preserving addons such as adblock plus, webcamRef.current.getScreenshot(); is corrupted. Here is the console warning inside Firefox's Console :

Blocked third party https://cdpn.io/mozmorris/fullpage/gOOoqpw?anon=true&view= from extracting canvas data.

Related to:
https://support.mozilla.org/en-US/questions/1398931

The official example is simply a reproduction: https://codepen.io/mozmorris/pen/gOOoqpw

This also happens in first-party when "no user input is detected".

Are you aware of any other way to access the frames of the video without depending on what the canva is drawing?

As more and more users are using tools to enhance their privacy, the getScreenshot() fn will fail more and more in the future...

[mozmorris]

Thanks for reporting this @clementpoiret. Is it still blocked when access a site directly? https://www.mozmorris.com/react-webcam/examples/

There have been some movement in this area, such as the takePhoto api but my understanding that's still not supported on Firefox (funnily enough).

[clementpoiret]

When accessing it directly, I get Blocked https://www.mozmorris.com/react-webcam/examples/ from extracting canvas data, but prompting the user. on firefox, which is better than nothing. However, discarding the prompt lead to the following screenshot

Yes I also found the ImageCapture API, but it only works in chrome, not FF (experimental config available) nor Safari :(
https://googlechrome.github.io/samples/image-capture/grab-frame-take-photo.html

[rvdende]

and if you use the webcamRef?.current?.getCanvas() ? Does it still get blocked? From the canvas element you can read the data directly?