Reactでvideoタグにmutedを効かせる方法(の代替)

Reactでvideoタグにmutedを添えられない問題について、
良い解決案を見かけたのでその紹介をします。

結論、mutedの指定は可能？

答えはNoです。
videoタグにmutedを添えることは、現状のreactでは実現できません。(2020/10/09現在)
(※保証されない、と表現されていますが、実際、mutedはvideoタグに反映されません。)

どうやって解決するの？

本家の該当issueにて、こんな書き込みがありました。

Mute is just equal to volume being zero
(ミュートは、ボリュームゼロと同じ。)

え、たしかに。
なぜmutedにこだわる自分が居たのかが謎になるくらい目からウロコな意見で、
実際に volume = 0 を試したらmuted相当の動きになりました

ちなみに、自分は使うあてが無かったですが、onVolumeChange なども扱えるようです。

サンプルコード

↓こちら試してないですが、概念として。

const SomeVideoComponent = ({ muted }) => {
  const videoRef = useRef(null);

  ...
  useEffect(() => {
    if (videoRef.current !== null) {
      const mutedCurrently = videoRef.current.volume === 0;
      if (mutedCurrently !== muted) {
        videoRef.current.volume = muted ? 0 : 1;
      }
    }
  }, [videoRef, muted]);

  return <video ref={videoRef} />;
}

そもそもmutedを使えない背景/調査補足

理由は、こちらの本家facebook/reactのissueにて色々議論されているので、ここでは割愛します。

そのため、Qiita: React videoでmutedが消えるバグのパワー系解決 で紹介されているように、
dangerouslySetInnerHTMLなど駆使してどうにか解決しようとするライブラリもあるようです。
ただ、こういったライブラリも、スタイリングしたい場合に鬱陶しかったり、
そもそもこの些細なことのためにライブラリいる？っていう話もあると思います。

この記事もReactでMediaStream扱っている方にとって、何かの足しになればと思います。
単純な話なのですが、ちょっと呆気にとられたのでシェアでした。

それでは良き開発を〜