지난 프로젝트에서 실시간 방송에 PIP 기능을 추가하고 싶었습니다. 브라우저에서 제공하는 web API인 Picture-in-Picture API를 이용하면 PIP는 아주 쉽게 구현할 수 있습니다. 동영상이 표시되는 부분에서 마우스를 움직이면 3초 동안 동영상의 위에 소리크기 조절, PIP 시작, 전체화면을 설정할 수 있는 하단바가 표시되도록 하는 것까지는 모두 쉽게 진행되었습니다. 그런데 PIP를 켜놓고 페이지 이동을 하면(편의상 페이지 이동이라고 하겠지만, 정확히 하자면 리액트로 진행되는 프로젝트였기에 동영상을 재생하는 컴포넌트가 언마운트되는 경우였습니다.) PIP에서 나오는 화면이 검은 색으로만 표시되었습니다. 페이지 이동을 하면 PIP 화면이 정지되는 문제앞서 언급했듯이 원인은 동영상을 재생하고 ..
