Prevent video elements from being mistakenly muted/unmuted
This commit is contained in:
parent
7d44a1e979
commit
2acb6825e9
1 changed files with 14 additions and 3 deletions
|
@ -27,10 +27,21 @@ export function useMediaStream(stream, audioOutputDevice, mute = false) {
|
|||
);
|
||||
|
||||
if (mediaRef.current) {
|
||||
const mediaEl = mediaRef.current;
|
||||
|
||||
if (stream) {
|
||||
mediaRef.current.muted = mute;
|
||||
mediaRef.current.srcObject = stream;
|
||||
mediaRef.current.play();
|
||||
mediaEl.muted = mute;
|
||||
mediaEl.srcObject = stream;
|
||||
mediaEl.play();
|
||||
|
||||
// Unmuting the tab in Safari causes all video elements to be individually
|
||||
// unmuted, so we need to reset the mute state here to prevent audio loops
|
||||
const onVolumeChange = () => {
|
||||
mediaEl.muted = mute;
|
||||
};
|
||||
mediaEl.addEventListener("volumechange", onVolumeChange);
|
||||
return () =>
|
||||
mediaEl.removeEventListener("volumechange", onVolumeChange);
|
||||
} else {
|
||||
mediaRef.current.srcObject = null;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue