iOS 自定义画中画

前言

Picture-In-Picture is coming to ‌iPhone‌ as well, the implementation looking similar to that currently available on the iPad.

画中画是在桌面以浮窗的形式播放视频的功能,从 iOS 14 开始支持。桌面这块宝地肯定是各个App 都眼馋的,就会出现各种骚操作,本来是只能用来播放视频的,用来展示其他内容,比如某云的桌面歌词。老板看了说也想要,无奈只能找找资料看看怎么做。(个人不推荐这种骚操作

以下是一些问题记录。

如何自定义

添加自定义 UIView

创建 AVPictureInPictureController 之后,系统会创建一个 PGHostedWindowwindowLevel 为 -10000000。所以可以通过 UIApplication 获取到这个 window,将自定义的 UIView 添加到这个 window 即可。

添加 View 的时机

pictureInPictureControllerWillStartPictureInPicture 或者 pictureInPictureControllerDidStartPictureInPicture 代理方法回调时添加。

但 willStart 时,window 的实际大小还不确定,更推荐在 didStart 时添加

获取 Window 的时机

在添加 view 的时候获取,即 pictureInPictureControllerWillStartPictureInPicture: 代理方法。

ini 复制代码
UIWindow *window = [UIApplication sharedApplication].windows.firstObject;

此方法有一定的风险,如果创建了多个 AVPictureInPictureController,对应的会存在多个 PGHostedWindow

可以监听 UIWindowDidBecomeVisibleNotification 通知,在收到通知后持有下这个 window 的引用。

ini 复制代码
- (void)windowDidBecomeVisible:(NSNotification *)notification {
    id object = notification.object;
    if ([object isKindOfClass:NSClassFromString(@"PGHostedWindow")]) {
        self.hostedWindow = notification.object;
        [[NSNotificationCenter defaultCenter] removeObserver:self
                                                        name:UIWindowDidBecomeVisibleNotification
                                                      object:nil];
    }
}

或者用 KVO 监听 isPictureInPicturePossible 属性

设置 contentSource (iOS 15 +)

将自定义 View 的 layerClass 改写成 AVSampleBufferDisplayerLayer

objectivec 复制代码
@implementation PIPCustomView

+ (Class)layerClass {
    return [AVSampleBufferDisplayLayer class];
}

@end

再通过 initWithSampleBufferDisplayLayer 创建 AVPictureInPictureControllerContentSource

ini 复制代码
PIPCustomView *customView = [[PIPCustomView alloc] init];
AVSampleBufferDisplayLayer *layer = (AVSampleBufferDisplayLayer *)customView.layer;
AVPictureInPictureControllerContentSource *source = [[AVPictureInPictureControllerContentSource alloc] initWithSampleBufferDisplayLayer:layer playbackDelegate:customView];
AVPictureInPictureController *controller = [[AVPictureInPictureController alloc] initWithContentSource:source];

再将 CALayer 转换成 CMSampleBuffer

CALayer -> UIImage -> CVPixelBufferRef -> CMSampleBufferRef

再通过 enqueueSampleBuffer 更新到画中画

直接交互🚫

在自定义的 UIView 添加一个 UIButton,iOS 14、15 可正常执行点击回调方法,iOS 16 及以上则没有任何反应

去除播放相关按钮

css 复制代码
[controller setValue:[NSNumber numberWithInt:1] forKey:@"controlsStyle"];

在 iOS 16 及以上版本支持点击画中画直接回到 App

css 复制代码
[controller setValue:[NSNumber numberWithInt:2] forKey:@"controlsStyle"];

控制画中画窗口大小

无法直接控制画中画窗口的大小,只能控制窗口的比例,系统会根据所播放视频的比例自动适配到相应的大小。并且在同一个视频在不同的机型,实际显示大小也不一致。

视频大小 336 x 456

iPhone 8 窗口实际大小 191 x 259.5

iPhone 15 窗口实际大小 164.333 x 223

画中画开启时机

应用在前台✅

直接调用 startPictureInPicture 即可

App 切换到后台时自动开启✅

canStartPictureInPictureAutomaticallyFromInline 设置为 YES 后,可在 App 切换到后台时自动开启。但需要注意的是该属性只在 iOS 14.2 及以上可用,并且视频必须是在播放中的。

应用在后台🚫

如果想在后台收到某个通知时打开,系统是不允许的,会出现如下错误

Error Domain=AVKitErrorDomain Code=-1001 "Failed to start picture in picture." UserInfo={NSLocalizedDescription=Failed to start picture in picture., NSLocalizedFailureReason=The UIScene for the content source has an activation state other than UISceneActivationStateForegroundActive, which is not allowed.}

参考

Adopting Picture in Picture in a Custom Player | Apple Developer Documentation
Can I add custom view on AVPictureInPictureController?

Picture in Picture for any UIView

GitHub - CaiWanFeng/PiP: The best way to customize picture-in-picture for iOS.

相关推荐
coding随想几秒前
从零开始:前端开发者的SEO优化入门与实战
前端
前端工作日常3 分钟前
我理解的JSBridge
前端
Au_ust3 分钟前
前端模块化
前端
顺丰同城前端技术团队3 分钟前
还不会用 Charles?最后一遍了啊!
前端
BUG收容所所长4 分钟前
二分查找的「左右为难」:如何优雅地找到数组中元素的首尾位置
前端·javascript·算法
彬师傅4 分钟前
geojson、csv、json 数据加载
前端
用户52709648744905 分钟前
🔥 我与 ESLint 的爱恨纠葛:从"这破玩意儿"到"真香警告"
前端
梨子同志5 分钟前
手动实现 JavaScript 的 call、apply 和 bind 方法
前端·javascript
梨子同志7 分钟前
ES6 let 和 const
前端·javascript
用户5806139393007 分钟前
超越 console.log():前端调试的 10 个神级技巧
前端