Unable to set the muted property in the underlying video element pt. 2

[timhwang21]

Please follow the general troubleshooting steps first:

• [x] Is your app running over HTTPS? (please provide the URL if possible)
• [x] Have you tried running the demo (https://codepen.io/mozmorris/pen/JLZdoP) on your device?
• [x] Checked the latest "Can I use" compatbility table? (https://caniuse.com/stream)

Bug reports:

Follow up to #182.

It seems the fix I filed in #303 only partially works. This isn't a problem with this library, but is due to a longstanding React bug. facebook/react#6544 describes the issue in more detail.

tl;dr: While <video muted={true}/> in React results in the proper BEHAVIOR, the muted attribute is not propagated to the actual DOM for various reasons. This can cause some cross-browser permissions related issues, most notably on iOS Safari.

Several userland fixes were proposed in the thread. IMO this one is the most reasonable. React Webcam can implement this as follows here:

    return (
      <video
        autoPlay
        src={state.src}
        muted={!audio}
        playsInline
        ref={ref => {
          this.video = ref;
+         ref.defaultMuted = !audio;
+         ref.muted = !audio;
        }}
        style={videoStyle}
        {...rest}
      />
    );

(Some other commenters recommended also setting muted, because some browsers explicitly check the DOM property rather than just the muted status.)

If this is acceptable to you I can open a PR. Cheers!

[jackhardingyoti]

Hey @mozmorris. Any thoughts on this solution? I can confirm that this does work.