iOS如何实现画中画模式?

本文我们将介绍 iOS 上的画中画实现和特点。画中画 (PiP) 模式允许用户在其他窗口之上的浮动窗口中观看视频。他们可以在屏幕上移动它并放置在任何方便的地方。此功能使用户能够在与其他网站或应用程序交互时关注他们正在观看的内容。

画中画是现代多媒体应用的一个必备功能

以下是原因：

加强了多任务处理。画中画允许用户在一个小窗口中同时观看视频或查看图像，同时保持对主要内容或应用界面的访问。这使用户能够进行多任务处理，例如，在观看视频的同时检查电子邮件，发送消息，或浏览社交媒体。
改善用户体验。该模式提供了更灵活和方便的应用导航。这大大增强了用户体验，无需中断内容播放或完全切换语境。
最大限度地减少会话中断。画中画使用户能够在执行其他任务时继续观看或跟踪内容。这有助于减少中断，确保工作流程更顺畅、不受干扰。例如，用户可以一边观看教程或YouTube直播，一边在互联网上搜索信息或做笔记。

所有这些因素都有助于将用户留在应用程序内，并增加应用程序使用会话的时间。

iOS上画中画的特点和困难

苹果为在iOS上使用PiP设想了两种情况：

用于视频内容播放
用于视频通话

主要问题是，对于视频通话场景，在iOS 16之前，对于不支持Stage Manager的iPad，有必要向苹果申请特殊权限，以便在多任务模式下访问摄像头（com.apple.developer.avfoundation.multitasking-camera-access）。但是，即使像我们这样等待了几个月，苹果仍然可能不授予这些权限。

因此，我们采用了视频通话及其内容被视为视频播放的方法。

iOS上的画中画生命周期

画中画模式本质上是全屏应用与另一应用的画中画内容之间的内容交换。这种交换的生命周期可以用图表表示如下：

1. 视频以全屏模式播放。

2. 用户发起一个触发转换到画中画模式的事件，例如按下特定按钮或最小化应用程序。

3. 启动动画将视频转换为画中画模式——全屏视频缩小成缩略图并移动到屏幕的一角。

4. 过渡过程完成，应用程序将其状态更改为后台状态。

然后，当需要将视频从画中画模式恢复为全屏模式时，将执行以下步骤：

1. App处于后台状态，显示画中画。

2. 发生启动从 PiP 到全屏模式的转换并停止画中画模式的事件，例如按下按钮或展开应用程序。应用程序进入前台。

3. 启动动画以将视频转换为全屏模式。应用进入视频全屏显示状态。

这是它的样子：

为视频播放实现画中画

要启用画中画，需要创建一个 AVPictureInPictureController(playerLayer: AVPlayerLayer) 对象，并且它必须具有强引用。

if AVPictureInPictureController.isPictureInPictureSupported() { 
    // Create a new controller, passing the reference to the AVPlayerLayer. 
    pipController = AVPictureInPictureController(playerLayer: playerLayer) 
    pipController.delegate = self 
    pipController.canStartPictureInPictureAutomaticallyFromInline = true 
}

接下来，开始播放视频内容。

func  publishNowPlayingMetadata () { 
    nowPlayingSession.nowPlayingInfoCenter.nowPlayingInfo = nowPlayingInfo 
    nowPlayingSession.becomeActiveIfPossible() 
}

此后，当按下按钮或最小化/展开应用程序时，画中画将激活：

func  togglePictureInPictureMode ( _  sender : UIButton ) { 
    if pipController.isPictureInPictureActive { 
        pipController.stopPictureInPicture() 
    } else { 
        pipController.startPictureInPicture() 
    } 
}

在iOS应用中实现画中画模式，使用WebRTC技术进行视频通话，可能是工作中最具挑战性的部分。。概念上：

在这个实现中，摄像头不会捕捉到用户的图像，你只能看到对话伙伴。

为此，需要：

1.创建一个AVPictureInPictureController对象。

2. 获取RTCVideoFrame。

3. 检索并填充基于 RTCVideoFrame 的 CMSampleBuffer。

4.传递CMSampleBuffer，使用AVSampleBufferDisplayLayer显示。

这是说明该过程的序列图：