PictureInPicture

PictureInPicture

 

Picture In Picture 은 유튜브 프리미엄 사용자 또는 아이패드 사용자라면 익숙할 수 있다.

아래의 이미지와 같이 홈 화면에서도 영상이 재생 되는 화면이 표시 되는 것이다.

Picture In Picture

이 기능은 iOS 14 버전에서 추가 되었으며, 한 동안 유튜브 프리미엄 결제 없이 Picture in Picture 을 사용할 수 있다고 해서 사용법들이 올라왔었으나 이미 막아놓은 듯 하다.

 

PictureInPicutre 기능은 영상이 재생 될 때 홈으로 빠져나오거나 영상에서 PictureInPicture 사용 버튼을 누르면 사용할 수 있다.

 

"어? 나는 영상을 보다가 홈으로 나와도 안 되던데?"

하는 경우는 아래와 같다.

 

• 설정 > 일반 > 화면 속 화면 > 화면 속 화면 자동 시작을 ON으로 해두지 않은 경우
• 해당 앱에서 지원 하지 않은 경우
• 해당 웹페이지에서 지원 하지 않은 경우
• 영상이 멈췄을 때

 

더 자세한 내용은 구글에 검색하면 다양한 내용이 나오니 참고하면 된다.

본론으로 들어가서,

 

 

 

Picture In Picture 적용방법

 

실제로 앱에서 적용할 때는 어떻게 해야할까?

구글을 열심히 뒤져봤지만 예문은 찾아보기 힘들어 애플 문서를 토대로 정리해 보았다.

 

프로젝트를 생성하고 Signing & Capabilities 로 이동한다.

그리고 아래의 그림과 같이 Background Modes 를 추가하고, Audio, AirPlay, and Picture in Picture을 선택해준다.

 

 

그리고 아래와 같이 AudioSession에 Playback 을 설정해준다.

반드시 AppDelegate에서 처리해줘야 하는 것은 아니다.

여러가지 실험해보니 위 코드를 추가 후에 다른 클래스(Class)에서 AudioSession의 Category에 다른 값을 적용하면 PiP(Picture in Picture) 기능을 사용할 수 없었다.

상황에 따른 Category 값을 변경하여 사용하려면 각각 위치에서 설정해줘야 할 것 같다.

 

 

PiP를 사용하기 위해 AVKit 을 임포트(Import) 해준다.

AVFoundation과 AVKit의 차이는 나중에 정리할 예정이니 일단 zedd님의 블로그에서 확인.

 

그리고 아래와 같이 프로퍼티(Property)를  정의해준다.

여기서도 AVPlayerLayer 이라는 것을 볼 수 있다.

AVPlayerLayer 대신에 AVPlayerViewController를 이용하면 이미 기본적인 UI들이 제공되기 때문에 편리하지만 커스텀이 필요한 경우 AVPlayerLayer을 이용한다. 이 부분에 자세한 내용도 나중에 정리할 예정이니 이 블로그에서 확인.

 

 

 

AVPlayerLayer 기본값 설정

여기서 Frame 값은 생각보다 중요하다.

CGRect를 통해 특정 값을 주었을 때 홈으로 빠져나가는 경우 PiP가 작동하지 않는 현상을 발견했다.

CGRect가 무조건 안 된다는 것이 아니라 여러가지 넓이와 높이 값을 주다보니 확인한 것이라 정확한 이유를 발견하지는 못 했다.

 

 

 

AVPlayer 기본값 설정

이렇게까지 처리하면 동영상이 플레이 된다. 하지만 PiP를 사용하기 위해서는 아래와 같은 작업이 필요하다.

 

 

 

AVPictureInPictureController 기본값 설정

우선 사용하고 있는 디바이스가 PiP를 지원하는지 isPictureInPicutreSupported() 로 확인해준다.

그리고 위와 같은 작업만으로 PiP 생성은 완료된 샘이다.

따로 어디에 추가하거나 하는 작업이 있을거라고 생각했는데 이것만으로도 작동이 되었다.

 

 

 

AVPictureInPictureControllerDelegate

AVPictureInPictureControllerDelegate에는 위와 같은 함수들이 존재한다. 하지만 모두 Optional이다.

이 부분은 PiP를 작동하는 시기와 종료하는 시기 그리고 사용자 인터페이스(User Interface)를 다시 정리하는 것 등을 체크하는 부분인듯 하다. 이러한 부분에서 체크가 필요한 경우 사용하면 될 것 같다.

 

 

 

커스텀 PiP 버튼 추가

버튼을 통해 앱 내에서 PiP를 사용할 때 위와 같이 만들 수 있다.

isPictureInPictureActive() 를 통해 현재 PiP 사용 상태를 확인하여 상황에 따라 startPictureInPictrue() 또는 stopPictureInPicture() 를 사용하면 된다.