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自己更新了下,主要是效果展示。另外有个坑点是,用了两个没有公开的接口,如果影响上架了,一定通知我,我也想知道会不会影响上架。

相关推荐
杂雾无尘12 分钟前
SwiftUI 动画新技能,让你的应用「活」起来!
ios·swiftui·swift
林大鹏天地1 小时前
iOS18系统 [YYKVStorage _dbClose] 偶现崩溃
ios
林大鹏天地1 小时前
使用Xcode16打包后,App在暗夜模式下,iOS18 切换Tabbar的item,会有一根白色线条闪过。
ios
2501_915909061 小时前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
2501_915106323 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
笑尘pyrotechnic16 小时前
DocC的简单使用
ios·objective-c
谈吐大方的鹏sir17 小时前
SwiftUI-Text组件学习
ios
你听得到1117 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
不自律的笨鸟18 小时前
iOS 26,双版本更新来了
ios·iphone
RaidenLiu21 小时前
Flutter Shader预热技术解析与实践指南
flutter·前端框架