Flutter PIP 插件 ---- iOS Video Call

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

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

简介

画中画(Picture in Picture, PiP)是一项允许用户在使用其他应用时继续观看视频内容的功能。本文将详细介绍如何在 iOS 应用中实现 PiP 功能。

系统要求

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

核心组件

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

  1. AVPictureInPictureController - 负责管理 PiP 会话
  2. AVPictureInPictureControllerContentSource - 定义 PiP 内容源
  3. AVPictureInPictureVideoCallViewController - 控制 PiP 窗口的视图控制器

实现步骤

1. 检查设备支持

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

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

2. 创建 PiP 视图

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

objc 复制代码
@interface PipView : UIView
@end

@implementation PipView
+ (Class)layerClass {
    return [AVSampleBufferDisplayLayer class];
}
@end

3. 配置 PiP 控制器

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

objc 复制代码
- (BOOL)setup:(PipOptions *)options {
    if (!self.isSupported) {
        return NO;
    }
    
    if (@available(iOS 15.0, *)) {
        // 创建 PiP 视图
        _pipView = [[PipView alloc] init];
        
        // 创建视图控制器
        AVPictureInPictureVideoCallViewController *pipViewController = 
            [[AVPictureInPictureVideoCallViewController alloc] init];
        pipViewController.preferredContentSize = options.preferredContentSize;
        [pipViewController.view addSubview:_pipView];
        
        // 创建内容源
        AVPictureInPictureControllerContentSource *contentSource =
            [[AVPictureInPictureControllerContentSource alloc]
                initWithActiveVideoCallSourceView:options.sourceContentView
                contentViewController:pipViewController];
                
        // 初始化 PiP 控制器
        _pipController = [[AVPictureInPictureController alloc]
            initWithContentSource:contentSource];
        _pipController.delegate = self;
        _pipController.canStartPictureInPictureAutomaticallyFromInline = 
            options.autoEnterEnabled;
            
        return YES;
    }
    
    return NO;
}

4. 控制 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];
    }
}

5. 实现状态回调

通过实现 AVPictureInPictureControllerDelegate 协议来处理 PiP 状态变化:

objc 复制代码
- (void)pictureInPictureControllerDidStartPictureInPicture:
    (AVPictureInPictureController *)pictureInPictureController {
    _isPipActived = YES;
    [_pipStateDelegate pipStateChanged:PipStateStarted error:nil];
}

- (void)pictureInPictureControllerDidStopPictureInPicture:
    (AVPictureInPictureController *)pictureInPictureController {
    _isPipActived = NO;
    [_pipStateDelegate pipStateChanged:PipStateStopped error:nil];
}

- (void)pictureInPictureController:
    (AVPictureInPictureController *)pictureInPictureController
    failedToStartPictureInPictureWithError:(NSError *)error {
    [_pipStateDelegate pipStateChanged:PipStateFailed error:error.description];
}

注意事项

  1. PiP 功能仅支持 iOS 15.0 及以上版本
  2. 启动 PiP 时需要适当延迟以确保正常显示
  3. 自动进入 PiP 模式需要在 setup 时配置 autoEnterEnabled 选项
  4. 释放资源时建议使用 contentSource = nil 而不是直接调用 stopPictureInPicture
  5. PiP 窗口的默认大小建议设置为至少 100x100,否则可能导致启动失败

最佳实践

  1. 在初始化时检查设备是否支持 PiP 功能
  2. 实现适当的错误处理和状态回调
  3. 在应用进入后台时,如果启用了自动进入选项,PiP 会自动启动
  4. 注意内存管理,及时释放不需要的资源

总结

iOS 的 PiP 功能实现主要依赖于 AVKit 框架,通过合理配置 AVPictureInPictureController 及其相关组件,可以为用户提供流畅的画中画体验。在实现过程中需要注意版本兼容性、状态管理和资源释放等问题。

参考

PS

本次实现还不太全面,出来的PIP窗口只是一个背景黑色,还没有实现视频的显示,后续会持续更新。

相关推荐
QuantumLeap丶1 小时前
《Flutter全栈开发实战指南:从零到高级》- 05 - 基础组件实战:构建登录界面
flutter·ios
黄毛火烧雪下1 小时前
(四)Flutter插件之IOS插件开发
flutter·ios
2501_915106321 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者81 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
西西学代码2 小时前
Flutter---弹窗
flutter
RaidenLiu2 小时前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
2501_915921434 小时前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
—Qeyser4 小时前
Flutter字体引用与使用指南
flutter
2501_916008895 小时前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
I烟雨云渊T5 小时前
iOS原生与Flutter的交互编程
flutter·ios·交互