search

mozmorris / react-webcam

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

showing pause icon on camera #338

Open citayesh opened 2 years ago

nsleche commented 2 years ago

You could try setting the controls to false

<Webcam
  ...
  controls={false}
/>
Nikkolas-Cage commented 2 years ago

you can put a

<Webcam .... poster="blankimage.jpg"/>

chen-rn commented 2 years ago

I think this solved issue may be discussing a similar issue. Though I'm unable to reproduce the solution.

Basically, before camera permission is granted, the "empty" video player shows a "Play Button". Once permission is granted, the "Play Button" turns into a "Pause" button momentarily before vanishing from existence.

This seems to only happen on iOS. @mozmorris any ideas on how to fix this?

frankgalindo commented 2 years ago

I had the same issue and found a solution using CSS.

video::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none;
}

video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
}

video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

Another way to fix using CSS is to disable pointer events on the video element:

video {
  pointer-events: none;
}
fathurhidayat3 commented 1 year ago

I think this solved issue may be discussing a similar issue. Though I'm unable to reproduce the solution.

Basically, before camera permission is granted, the "empty" video player shows a "Play Button". Once permission is granted, the "Play Button" turns into a "Pause" button momentarily before vanishing from existence.

This seems to only happen on iOS. @mozmorris any ideas on how to fix this?

I got the same issue with #318 only when attach it inside a webview, play button showing unexpected. My approach was adding poster attribute as mentioned here :

you can put a

<Webcam .... poster="blankimage.jpg"/>

But instead I put a random string poster="blank" since requirement should have no poster image too, but for proper maybe should pass correct image URL / relative path.

akirayorunoe commented 1 year ago

having same issue which show play/pause when trying to capture image on iOS only and above solutions didn't work for me

citayesh commented 1 year ago

I used this version "react-webcam": "6.0.0" and it was ok