Chrome 자동 재생이 안되는 문제

문제 상황

방송 시청하는 비디오가 페이지에 들어와도 자동으로 재생되지 않는 문제가 있었다.

<video ref={videoRef} autoPlay className="w-full h-full bg-surface-alt rounded-xl"/>

위와 같이 video 태그에 속성으로 autoPlay를 넣어주었는데도 되지 않아서 이유를 찾아봤더니 Chrome은 음소거되지 않은 영상은 자동재생을 금지하는 정책이 있었다.

https://developer.chrome.com/blog/autoplay?hl=ko

해결

<video>에 muted 속성을 넣고 오디오의 재생 상태를 관리하는 isAudioEnabled의 초기값으로 해당 값을 컨트롤할 수 있도록 했다.

function LivePlayer({ mediaStream }: { mediaStream: MediaStream | null }) {
const [isAudioEnabled, setIsAudioEnabled] = useState(false);

return (
  <>
	  {/* ... */}
		<video ref={videoRef} autoPlay muted={isAudioEnabled ? false : true} />
	  {/* ... */}
  </>
)};

이렇게 해두고 useEffect로 컴포넌트가 마운트될 때, setIsAudioEnabled(true)를 해주면 소리도 자동 재생이 될까했는데 안된다. 그냥 사용자가 도메인과 어떤 상호작용(클릭, 탭 등)을 하기 전까지는 오디오가 자동재생되면 안되는 것 같다.

결론

어차피 사용자가 음소거 on/off를 할 수 있는 버튼이 제공되기 때문에 처음에 페이지가 열렸을 때는 비디오만 on, 소리는 off 상태로 제공되도록 했다.