이 기사는 무엇입니까?

Chrome 70부터 디폴트로 유효하게 된 것 같은 Picture-in-Picture(이후 PinP라고 부른다)가 WebRTC MediaStream에서도 실현될 수 있는지 조사&시험해본 정리 기사.

원래 PinP는 무엇입니까?

하나의 화면의 구석 등에 작게 다른 화면의 표시 영역을 마련해, 양쪽의 화면을 동시에 표시시켜 둘 수 있도록 하는 표시법.
스마트 폰으로 YouTube 동영상을 본 뒤로 돌아가면 오른쪽 하단에 동영상 창이 생긴다고 생각하지만, 저것. video 요소에 대해 PinP 기능을 사용할 수 있다.

조사한 내용

PinP 배경

2016/09에 safari9.0(macOS sierra)에서 구현되었어
htps : //에서 ゔぇぺぺr. 아 ぇ. 코 m / ぃ b 등 ry / 아 r ゔ ぇ / 르 ぇ 아세 노테 s / 게 네라 l / ぁ ts 네 ぃ ささふぁ / ar ch ぇ s / 사후 ㅁ_9_0. HTML

그 6 개월 후에 Android8.0 출시시 Chrome for Android에서 구현되었습니다.
htps : //로 ゔぇぺぺr. 안 d로이 d. 코 m/아보 t/ゔぇr 시온 s/오레오/안 d로이 d-8.0 # 오피 p

Chrome for Desktop에서 M68에서 실험적으로 구현되었습니다.
htps : // 라고 해서 r. 코 m / 케 ゔ C와 훗 l / s 타츠 s / 996040615648485376

2018/10/19에 M70에서 기본적으로 PinP가 활성화되었다고 보고
htps : // p㎅s. 오, ぇ. 코 m / + F 란코이 s 베어 푸트 rt / 포스트 / Cm hqTpbC1b

(!!) Media Stream에 대응했다고 보고 있음
h tps://ch 로미우 m레ゔぃ에w. 오, 그래. 코 m/c/ch 로미우 m/src/+/1196515

PinP on WebRTC의 브라우저 대응 조사

WICG는 아래에서 PinP API를 제안했다. 표준화를 위해 노력하고 있다.
htps : // 우우 cg. 기주 b. 이오 / 피 c 트레

SkyWay P2P-videochat 샘플 앱 에 PinP 기능을 덧붙여 PinP on WebRTC가 대응하고 있는지 브라우저 검증해 보았다. (쓰는 코드는 생략.

FF62, FF63
PinP API를 지원하지 않습니다. ( documenｔ.pictureInPictureEnabled = false )

여기 Safari12
PinP API를 지원하지 않습니다. ( document.pictureInPictureEnabled = false )
그러나, 실제로 PinP on WebRTC는 실현 가능. 자세한 것은, (주) 으로 후술.

M70NotSupportedError 가 출력되고 있어 포맷 미대응으로 사용할 수 없다.

M71
디폴트에서는 The use of VideoLayer for video Picture-in-Picture is not supported 라고 출력되어 사용할 수 없다.
그러나 chrome://flags/#enable-surfaces-for-videos 에서 Enable the use of SurfaceLayer objects for videos. 를 Enabled로 설정하면 PinP on WebRTC가 가능합니다.

M72
디폴트로 대응하고 있어 실현 가능하다.

(주)

나중에 시도했지만 Safari는 WICG 제공 API에는 지원하지 않지만 Safari API를 사용하면 PinP on WebRTC를 실현할 수 있습니다.
(주)

조금 시도해 보았습니다.

SkyWay가 제공하고 있는 htps : //로 ゔぇぺぺr. 아 ぇ. 코 m / ぃ b 등 ry / 아 r ゔ ぇ / 르 ぇ 아세 노테 s / 게네라 l / ぁ ts 네 ぃ ささふぁり / ar ch ぇ s / 사후 ㅁ 9_0. HTML 의 개발판을 조금 만져 동작을 시험해 보았다.
다음은 M72에서 시험해 보았을 때의 그림. 메인 화면 맨 오른쪽 상단의 메뉴를 클릭하면 PinP 모드로 들어갑니다.
SkyWay Conference

결론

정리하면 브라우저 앱과 그 버전에 따라 다르지만 WebRTC MediaStream에서도 Picture-in-Picture 기능을 사용할 수 있습니다.

앞으로 하고 싶은 것은, PinP 윈도우내의 커스터마이즈.
예를 들면 이번 샘플에서 사용한 SkyWay Conference라면 접속 상대의 이름 표시라든지, 다른 접속 상대에게 윈도우를 바꾸는 등의 메뉴를 만든다든가.
(PinP 윈도우의 커스터마이즈 방법에 대해서까지는 미리서치이므로, 만약 지견이 있는 분이 계시면 꼭 교수 부탁합니다.)