search

mozmorris / react-webcam

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

Not working in Safari, but works perfectly in Chrome + Brave #351

Open mattblank11 opened 2 years ago

mattblank11 commented 2 years ago

Please follow the general troubleshooting steps first:

Bug reports:

Here's a Loom video walking through the bug. The webcam loads, but doesn't show the video all the time in Safari (it displays the video feed ~50% of the time) https://www.loom.com/share/9907e79b06444491bff8a0545fc09e8e

I've tried everything listed in prior issues but nothing seems to be working. I'd really appreciate any help here!

martincapek commented 1 year ago

Hi, same problem so +1

mozmorris commented 1 year ago

@mattblank11 firstly, that's a great issue report - many thanks.

I also have a Mac running the latest Safari and the video always appears.

Can you check the dev tools console to see if there's any error?

mattblank11 commented 1 year ago

I don't see an error (and don't remember seeing one when I was troubleshooting a month ago). I also can't replicate the issue, so maybe something fixed on my end? I did get a new M1 MacBook Pro since I last posted this so that could be part of the fix. @martincapek are you seeing an error?

martincapek commented 1 year ago

@mattblank11 sorry for late answer. No I'm not seeing any error, it shows that camera works in URL bar, but camera is blank. Video element is there, but no stream is in.

lakarpusky commented 1 year ago

In my case ( mac m1 pro ) it works in safari v16.1, but not in brave v1.45.127 + chrome v107.0.5304.110 No errors in the console.

lantchou commented 1 year ago

Apparently the demo being bugged on some browsers is due to the mime type with which the MediaRecorder instance is created. Changing this from video/webm to video/mp4 fixed the issue for me on Safari 16.3.

ryanlanciaux commented 1 year ago

I'm also seeing this behavior on Safari. It's pretty strange because it's fairly intermittent that I encounter it, but when this happens, I see the camera start up for a second in the browser bar and then it goes away. There are no logged errors and everything else seemingly works. If I refresh or sometimes even just cause the component to re-render, the camera works.

I tried looking through the react-webcam code a bit but nothing really jumps out.