PIP(소형 창) 구현.

PIP(PICTURE In PICTURE).
링크텍스트

소형창을 생성하는 방식.
강의

버튼을 누르면 이렇게 다른 창이 작은 소형 창으로 뜨게 된다.

html문서에서.

 <!-- Video -->
    <video id="video" controls height="360" width="640" hidden></video>
    <!-- Button -->
    <div class="button-container">
        <button id="button">시작하기!</button>
    </div>

이렇게 비디오와 버튼을 만들어 줌.
css를 조금 만진 화면.

이제 자바스크립트로 가자.

사용할 api는 Media Stream Recording API
상세설명

//비동기 함수, prompt로 사용자에게 어떤 미디어 스크림을 표시할지를 선택하는 메시지 표시. 그걸 비디오 요소로 전달하고 플레이를 한다.

async function selectMediaStream(){
    try {
        someewew;
    } catch (error) {
        
    }
}

비동기 함수에다가 try catch문을 써서 api를 가져오자.

  try {
    const mediaStream = await navigator.mediaDevices.getDisplayMedia();
    videoElement.srcObject = mediaStream;
    videoElement.onloadedmetadata = () => {
      videoElement.play();
    };

onloadedmetadata는 이벤트로

<video>
다음과 같이 사용한다.
상세설명
지정된 오디오/비디오에 대한 메타 데이터가 로드되었을 때 발생하므로 위에서는 api를 가져오는데 성공하면 비디오를 play한다.

그럼 이렇게 작동하는 걸 볼 수 있다.

화면처럼 옵션창을 눌러 PIP모드를 실행할 수도 있지만 대신 시작버튼을 한번 더 눌러서 실행하고 싶다.

button.addEventListener('click',async() =>{
    //버튼을 비활성화.
    button.disabled = true;
    //Picture in Picture를 시작.
    await videoElement.requestPictureInPicture();
    //리셋 버튼
    button.disabled = false;
});

이제 버튼을 누르면 비디오가 소형창으로 뜨게 된다.

완성.