mozmorris/react-webcam

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

mattblank11 opened this issue · 7 comments

mattblank11 commented

Please follow the general troubleshooting steps first:

  • Is your app running over HTTPS? (please provide the URL if possible)
    • Yes! Here's the link
  • Have you tried running the demo (https://codepen.io/mozmorris/pen/JLZdoP) on your device?
    • Yes - it doesn't work for me immediately on Safari, but does work on Chrome + Brave (similar to my app)
  • Checked the latest "Can I use" compatibility table? (https://caniuse.com/stream)
    • Yes

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

Hi, same problem so +1

mozmorris commented

@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?

  • 👍1
mattblank11 commented

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?

  • 👍1
martincapek commented

@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

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

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.

  • 👍1
ryanlanciaux commented

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.