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 功能:

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

2. 创建 PiP 视图

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

objc 复制代码
@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 控制器需要以下步骤:

objc 复制代码
- (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.sampleBufferDisplayLayer
                                playbackDelegate: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 协议来处理视频播放:

objc 复制代码
- (void)pictureInPictureController:
            (nonnull AVPictureInPictureController *)pictureInPictureController
         didTransitionToRenderSize:(CMVideoDimensions)newRenderSize {
    // 处理渲染尺寸变化
}

- (void)pictureInPictureController:
            (nonnull AVPictureInPictureController *)pictureInPictureController
                        setPlaying:(BOOL)playing {
    // 处理播放状态变化
}

- (BOOL)pictureInPictureControllerIsPlaybackPaused:
    (nonnull AVPictureInPictureController *)pictureInPictureController {
    return NO;
}

- (CMTimeRange)pictureInPictureControllerTimeRangeForPlayback:
    (nonnull AVPictureInPictureController *)pictureInPictureController {
    return CMTimeRangeMake(kCMTimeZero, kCMTimePositiveInfinity);
}

5. 控制 PiP 会话

启动 PiP:
objc 复制代码
- (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:
objc 复制代码
- (void)stop {
    if (self->_pipController.isPictureInPictureActive) {
        [self->_pipController stopPictureInPicture];
    }
}
释放资源:
objc 复制代码
- (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 及其相关组件,可以为用户提供流畅的画中画体验。在实现过程中需要注意版本兼容性、状态管理和资源释放等问题。同时,通过自定义内容渲染和控制系统控件的显示,可以提供更好的用户体验。

参考

PS

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

相关推荐
哲科软件8 小时前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风8 小时前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
Frank学习路上10 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
coder_pig12 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘15 小时前
Android 16开发者全解读
android·flutter·客户端
Jalor15 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
瓜子三百克17 小时前
CALayer的异步处理
macos·ios·cocoa
吴Wu涛涛涛涛涛Tao18 小时前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
九丝城主18 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware