방송 송출 창을 새로운 창으로 띄우기

📌

이렇게 구현하게 된 이유

방송 송출을 유지하려면 어떻게 해야 할까?

고민한 이유

우리 서비스는 체크인을 누르는 동시에 방송 송출이 시작되고 출석이 기록된다. 따라서 체크인 버튼을 누르면 방송 송출 페이지로 이동하며 방송이 시작하게 할 계획이었다.

이 기능을 구현하기 위해서는 방송 송출 창을 어떻게 띄울지 정해야 했다. 왜냐하면 방송 송출은 계속 연결된 채로 미디어 스트림을 보내야 방송이 지속되는데 이는 페이지를 나가면 연결이 끊어지게 된다. 그렇기에 체크인 후 방송 송출은 켜놓은채로 다른 캠퍼들의 방송에 가는 등 창을 이동하려면 어떻게 구현해야할까 고민하게 되었다.

생각한 방법

위와 같은 고민에 대해 생각해낸 방법은 2가지였다.

1. 기존 페이지에서 방송 송출 페이지로 이동하고, 연결을 유지할 방법을 찾아보기
2. 방송 송출 창을 PIP 모드로 화면 한 쪽에 띄우기

이 2가지 방법을 두고 팀원들끼리 논의해보았다. 논의하며 WebRTC를 사용하는 기존 서비스들은 어떻게 되어 있을까 살펴봤다. 하나씩 직접 실행해보며 확인하니 구글 미트, 줌 등도 웹에서 실행해서 화상 회의에 참여했다가 뒤로 가면 화상 통화가 끊어지는 것을 확인할 수 있었다.

따라서 우리가 생각했던 1번 방식은 구현이 어려울 것이라고 생각하여 2번 방식인 PIP 모드로 구현을 선택하게 되었다.

구현

구현하며 마주했던 문제

이걸 시작하자마자 적는 이유는 개발하기 위해 어떻게 PIP 모드를 구현할 지 찾아보니 우리가 생각한 방법이 틀렸다는 것을 알았기 때문이다.

기존의 계획은 방송 송출창을 PIP 모드로 띄우고 여기에 송출을 제어하기 위한 버튼(ex. 카메라 on/off, 마이크 on/off) 등을 추가할 예정이었는데, 찾아보니 PIP는 Picture in Picture의 약자로, 비디오만을 다른 화면 위에 띄울 수 있는 기술이었다. 그렇기에 우리가 생각한대로 비디오와 기타 송출 제어 버튼을 함께 띄울 수 없었다.

변경된 구현 방식

그래서 결국 PIP가 아닌 새로운 윈도우로 여는 방식으로 구현하기로 했다.

const newTapFeature = [
  `width=580`,
  `height=1024`,
  `bottom=0`,
  `right=0`,
  `resizable=yes`,
  `scrollbars=no`,
  'status=no',
  'location=no',
  'toolbar=no',
  'menubar=no',
].join(',');
const broadcastUrl = `${window.location.origin}/broadcast`;
const newWindow = window.open(broadcastUrl, '_blank', newTapFeature);

이는 방송이 송출될 새로운 윈도우를 여는 코드이다.

체크인 버튼을 누르면 broadcast 페이지가 새로운 윈도우로 열리게 된다.