Flutter PIP 插件 ---- iOS Video Call 自定义PIP WINDOW渲染内容

以下是一篇关于在 iOS 中实现画中画(PiP)功能的技术博客:

iOS 画中画(PiP)功能实现指南

效果

简介

画中画(Picture in Picture, PiP)是一项允许用户在使用其他应用时继续观看视频内容的功能。本文将详细介绍如何在 iOS 应用中实现 PiP 功能，包括自定义内容渲染和控制系统控件的显示。

项目地址

github
pub.dev

系统要求

• iOS 15.0 及以上版本
• AVKit 框架

核心组件

实现 PiP 功能主要涉及以下几个核心组件:

1. AVPictureInPictureController - 负责管理 PiP 会话
2. AVPictureInPictureControllerContentSource - 定义 PiP 内容源
3. AVSampleBufferDisplayLayer - 用于显示视频内容的图层
4. AVPictureInPictureSampleBufferPlaybackDelegate - 处理视频播放相关的回调

实现步骤

1. 检查设备支持

首先需要检查设备是否支持 PiP 功能:

- (BOOL)isSupported {if (@available(iOS 15.0, *)) {return [AVPictureInPictureController isPictureInPictureSupported];}return NO;
}

2. 创建 PiP 视图

需要创建一个自定义视图来显示 PiP 内容:

@interface PipView : UIView
@property(nonatomic, strong) AVSampleBufferDisplayLayer *sampleBufferDisplayLayer;
@end@implementation PipView
+ (Class)layerClass {return [AVSampleBufferDisplayLayer class];
}- (instancetype)init {self = [super init];if (self) {_sampleBufferDisplayLayer = (AVSampleBufferDisplayLayer *)self.layer;}return self;
}
@end

3. 配置 PiP 控制器

设置 PiP 控制器需要以下步骤:

- (BOOL)setup:(PipOptions *)options {if (!self.isSupported) {return NO;}if (@available(iOS 15.0, *)) {// 创建 PiP 视图_pipView = [[PipView alloc] init];_pipView.translatesAutoresizingMaskIntoConstraints = NO;// 设置内容视图_contentView = (UIView *)options.contentView;// 创建内容源AVPictureInPictureControllerContentSource *contentSource =[[AVPictureInPictureControllerContentSource alloc]initWithSampleBufferDisplayLayer:_pipView.sampleBufferDisplayLayerplaybackDelegate:self];// 初始化 PiP 控制器_pipController = [[AVPictureInPictureController alloc]initWithContentSource:contentSource];_pipController.delegate = self;_pipController.canStartPictureInPictureAutomaticallyFromInline = options.autoEnterEnabled;// 设置控制样式_pipController.requiresLinearPlayback = options.controlStyle > 0;return YES;}return NO;
}

4. 实现播放代理

通过实现 AVPictureInPictureSampleBufferPlaybackDelegate 协议来处理视频播放:

- (void)pictureInPictureController:(nonnull AVPictureInPictureController *)pictureInPictureControllerdidTransitionToRenderSize:(CMVideoDimensions)newRenderSize {// 处理渲染尺寸变化
}- (void)pictureInPictureController:(nonnull AVPictureInPictureController *)pictureInPictureControllersetPlaying:(BOOL)playing {// 处理播放状态变化
}- (BOOL)pictureInPictureControllerIsPlaybackPaused:(nonnull AVPictureInPictureController *)pictureInPictureController {return NO;
}- (CMTimeRange)pictureInPictureControllerTimeRangeForPlayback:(nonnull AVPictureInPictureController *)pictureInPictureController {return CMTimeRangeMake(kCMTimeZero, kCMTimePositiveInfinity);
}

5. 控制 PiP 会话

启动 PiP:

- (BOOL)start {if (!self.isSupported) {return NO;}dispatch_after(dispatch_time(DISPATCH_TIME_NOW, NSEC_PER_SEC * 0.1),dispatch_get_main_queue(), ^{if (self->_pipController.isPictureInPicturePossible) {[self->_pipController startPictureInPicture];}});return YES;
}

停止 PiP:

- (void)stop {if (self->_pipController.isPictureInPictureActive) {[self->_pipController stopPictureInPicture];}
}

释放资源:

- (void)dispose {if (@available(iOS 15.0, *)) {self->_pipController.contentSource = nil;}if (self->_isPipActived) {self->_isPipActived = NO;[self->_pipStateDelegate pipStateChanged:PipStateStopped error:nil];}
}

控制样式

PiP 窗口支持四种不同的控制样式:

1. Style 0: 显示所有系统控件（默认）
2. Style 1: 隐藏前进和后退按钮
3. Style 2: 隐藏播放/暂停按钮和进度条（推荐）
4. Style 3: 隐藏所有系统控件，包括关闭和恢复按钮

自定义内容渲染

1. 通过 contentView 参数指定要在 PiP 窗口中显示的自定义视图
2. 在 pictureInPictureControllerDidStartPictureInPicture 回调中将自定义视图添加到 PiP 窗口
3. 使用 AVSampleBufferDisplayLayer 来显示视频内容
4. 通过 pictureInPictureControllerTimeRangeForPlayback 返回正确的时间范围来避免加载指示器

注意事项

1. PiP 功能仅支持 iOS 15.0 及以上版本
2. 启动 PiP 时需要适当延迟以确保正常显示
3. 自动进入 PiP 模式需要在 setup 时配置 autoEnterEnabled 选项
4. 释放资源时建议使用 contentSource = nil 而不是直接调用 stopPictureInPicture
5. PiP 窗口的默认大小建议设置为至少 100x100，否则可能导致启动失败
6. 使用 kCMTimePositiveInfinity 作为时间范围的 duration 可以避免加载指示器
7. 自定义内容视图需要正确处理布局约束

最佳实践

1. 在初始化时检查设备是否支持 PiP 功能
2. 实现适当的错误处理和状态回调
3. 在应用进入后台时，如果启用了自动进入选项，PiP 会自动启动
4. 注意内存管理，及时释放不需要的资源
5. 根据需求选择合适的控制样式
6. 确保自定义内容视图的渲染性能

总结

iOS 的 PiP 功能实现主要依赖于 AVKit 框架，通过合理配置 AVPictureInPictureController 及其相关组件，可以为用户提供流畅的画中画体验。在实现过程中需要注意版本兼容性、状态管理和资源释放等问题。同时，通过自定义内容渲染和控制系统控件的显示，可以提供更好的用户体验。

参考

• Adopting Picture in Picture for video calls
• AVPictureInPictureController
• AVSampleBufferDisplayLayer

PS

这个文档我偷懒了，让cursor自己更新了下，主要是效果展示。另外有个坑点是，用了两个没有公开的接口，如果影响上架了，一定通知我，我也想知道会不会影响上架。