search

mozmorris / react-webcam

Webcam component
https://codepen.io/mozmorris/pen/JLZdoP
MIT License
1.63k stars 281 forks source link

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

Open clementpoiret opened 5 months ago

clementpoiret commented 5 months ago

Please follow the general troubleshooting steps first:

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 commented 5 months ago

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 commented 5 months ago

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

image

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 commented 2 months ago

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