[javascript] 자바스크립트 Picture in Picture (PiP, 플로팅 동영상)

참고: https://www.educative.io/answers/what-is-picture-in-picture-in-javascript

Picture-in-Picture(PiP)를 사용하면 동영상을 브라우저 외부 플로팅 창에서 볼 수 있으므로 다른 사이트나 프로그램을 실행하는 동안에도 영상을 계속 볼 수 있게됩니다.

Picture-in-Picture 지원 확인

const isPiPSupported =  'pictureInPictureEnabled' in document;
const isPiPEnabled = document.pictureInPictureEnabled;

if (!isPiPSupported) {
  console.log('The Picture-in-Picture Web API is not available.');
} else if (!isPiPEnabled) {
  console.log('The Picture-in-Picture Web API is disabled.');
} else {
  console.log("PiP supported");
}

PiP 활성화

예를 위해 video 요소와 버튼이 있고 사용자가 버튼을 클릭하면 플로팅 비디오를 활성화 해야한다고 가정해 보겠습니다.

PiP를 활성화하려면:

• video 요소에서 requestPictureInPicture() 메소드를 호출해야합니다. 이는 promise를 리턴합니다.
• promise가 완료되면 video 요소는 오른쪽 모서리나 어디로든 이동할 수 있습니다.
• document.pictureInPictureElement를 사용하여 PiP 모드에서 재생 중인 video 요소가 있는지 확인할 수 있습니다.

PiP 구현

See the Pen pip by shinyks (@shinyks) on CodePen.

Picture-in-Picture 이벤트

PiP 동영상에 대해 두 가지의 이벤트가 있습니다:

• enterpictureinpicture: PiP 모드가 활성화 되면 실행됩니다.
• leavepictureinpicture: PiP 모드가 끝나면 실행됩니다. Picture-in-Picture에서 빠져나오거나 다른 페이지의 다른 PiP 동영상을 실행했을 때도 발생합니다.

video.addEventListener('enterpictureinpicture', (event)=> {
    toggleBtn.textContent = "Exit Pip Mode";
});

video.addEventListener('leavepictureinpicture', (event) => {
     toggleBtn.textContent = "Enter PiP Mode";
});

Picture-in-Picture 플레이어의 width, height 가져오기

이벤트 핸들러에 enterpictureinpicture 이벤트가 발생하면 width와 height를 가져올 수 있는 pictureInPictureWindow를 실행합니다(resize 이벤트를 PIP-Window에 바인딩할 수도 있음). 이 기술을 사용하면 크기에 따라 다른 품질의 비디오를 로드할 수 있습니다.

let pipWindow;

video.addEventListener('enterpictureinpicture', function(event) {
  pipWindow = event.pictureInPictureWindow;
  console.log(`> Window size is ＄{pipWindow.width}x＄{pipWindow.height}`);
  pipWindow.addEventListener('resize', onPipWindowResize);
});

video.addEventListener('leavepictureinpicture', function(event) {
  pipWindow.removeEventListener('resize', onPipWindowResize);
});

function onPipWindowResize(event) {
  console.log(`> Window size changed to ＄{pipWindow.width}x＄{pipWindow.height}`);
}

사용자의 웹캠을 Picture-in-Picture로 보이기

navigator 객체의 mediaDevices 속성의 getUserMedia() 메소드를 사용하여 사용자의 웹캠에 접근할 수 있습니다.

const video = document.createElement('video');
video.muted = true;
video.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
video.play()

video.requestPictureInPicture();

사용자의 모니터 화면을 Picture-in-Picture로 보이기

웹캠의 예제와 비슷하게 navigator.mediaDevices 속성의 getDisplay() 메소드를 사용하여 사용자의 모니터 화면에 접근할 수 있습니다.

const video = document.createElement('video');
video.muted = true;
video.srcObject = await navigator.mediaDevices.getDisplayMedia(video: { mediaSource: "screen"});
video.play();

video.requestPictureInPicture();

관련 글

자바스크립트 promise 사용 방법

자바스크립트 이벤트 리스너 등록 (addEventListener)