iOS iPad 直播 画中画实现探索

iPad 画中画 功能添加

熊猫直播 iPad 版本 目前线上是没画中画功能的。这里画中画功能,主要模仿虎牙的画中画功能。
如下画面。

难点

直播间播放的时候正常情况下 是 FLV 格式的。但是目前画中画功能只支持 hls 格式。并且使用系统自带的控件。

接来来我们看看虎牙怎么实现的

1:使用Charles 抓包。

因为hls 格式的东东,会不断的发起http 请求,并且缓存10s 的短视频。

初步怀疑,虎牙支持画中画的房间都是使用hls 格式的视频流。

<strong>实践是打脸的唯一标准</strong>

charles抓包

虎牙只有在启动画中画功能的时候,才请求了http hls 格式的视频流。。

所以,方案有了,退出直播间,的时候,切换视频流格式。

2:使用hopper看看虎牙都做了什么,从iTunes 上下载虎牙 的 iPad 版本安装包,解压,看看里面的内容。不看不知道,一看吓一跳。里面有个短视频,mp4格式的,就是每次开打虎牙直播间的时候都是用的那个加载中,最开始我还一直以为是直播间自带的

因为从iTunes 上下载的都是有壳的,我们也是能看个大概,

解压之后的

看到beginPip 那个MP4 文件了么。。

在hopper 上,搜 pic 或者 pip (这里只是尝试,毕竟画中画系统的名字都是这样子取的),大概可以看到虎牙的实现画中的这些个类。

hopper 上看到的东东

1
2

这里就是虎牙实现画中类的所有方法名了,我们可以根据方法名猜测个大概!!

干货时间:

实现如下:


NS_ASSUME_NONNULL_BEGIN

@interface PTVPictureInpicture : NSObject

+ (instancetype)pictureInpicture;

///是否支持画中画中能
+ (BOOL)isSupportPictureInPicture;

@property (nonatomic, copy) NSString *roomID;

///#初始化 url m3u8格式
- (void)openPictureInPicture:(NSString *)url;

///#开启画中画
- (void)doPicInPic;

///#关闭画中画
- (void)closePicInPic;

@end

NS_ASSUME_NONNULL_END

.m文件

///kvo 监听状态
static NSString *const kForPlayerItemStatus = @"status";

@interface PTVPictureInpicture()<AVPictureInPictureControllerDelegate>

///#画中画
@property (nonatomic, strong) AVPictureInPictureController *pipViewController;// 画中画

@end

@implementation PTVPictureInpicture
{
    BOOL           _needEnterRoom;
    UIView        *_playerContent;
    AVQueuePlayer *_queuePlayer;
    ///#开始
    AVPlayerItem                 *_beginItem;
    AVPlayerItem                 *_playerItem;
    AVPlayerLayer                *_playerLayer;
}
+ (instancetype)pictureInpicture {
    static PTVPictureInpicture *_p;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        _p = [PTVPictureInpicture new];
    });
    return _p;
}

+ (BOOL)isSupportPictureInPicture {
    static BOOL _isSuportPic = NO;
    //    static dispatch_once_t onceToken;
    //    dispatch_once(&onceToken, ^{
    Class _c = NSClassFromString(@"AVPictureInPictureController");
    if (_c != nil) {
        _isSuportPic = [AVPictureInPictureController isPictureInPictureSupported];
    }
    //    });
    return _isSuportPic;
}


- (void)_initPicture {
    if (![[self class] isSupportPictureInPicture]) return;
    [self setupSuport];
}

-(void)setupSuport
{
    if([AVPictureInPictureController isPictureInPictureSupported]) {
        _pipViewController =  [[AVPictureInPictureController alloc] initWithPlayerLayer:_playerLayer];
        _pipViewController.delegate = self;
    }
}


- (void)openPictureInPicture:(NSString *)url {
    
    if (![[self class] isSupportPictureInPicture]) return;
    if (!url || url.length == 0 ) return;
    if (![url containsString:@"m3u8"]) return;
    
    [self closePicInPic];
    
    [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:nil];
    [[AVAudioSession sharedInstance] setActive: YES error: nil];
    
    _playerItem = [AVPlayerItem playerItemWithURL:[NSURL URLWithString:url]];
    
    ///#等待资源加载好
    NSString *path = [[NSBundle mainBundle] pathForResource:@"BeginPIP"
                                                     ofType:@"mp4"];
    
    NSURL *sourceMovieUrl = [NSURL fileURLWithPath:path];
    AVAsset *movieAsset = [AVURLAsset URLAssetWithURL:sourceMovieUrl options:nil];
    _beginItem = [AVPlayerItem playerItemWithAsset:movieAsset];
    
    
    [_playerItem addObserver:self
                  forKeyPath:kForPlayerItemStatus
                     options:NSKeyValueObservingOptionNew context:nil];// 监听loadedTimeRanges属性
    
    [_beginItem addObserver:self
                 forKeyPath:kForPlayerItemStatus
                    options:NSKeyValueObservingOptionNew context:nil];// 监听loadedTimeRanges属性
    
    
    _queuePlayer = [AVQueuePlayer queuePlayerWithItems:@[_beginItem,_playerItem]];
    
    _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_queuePlayer];
    _playerLayer.videoGravity = AVLayerVideoGravityResizeAspect;  // 适配视频尺寸
    _playerLayer.backgroundColor = (__bridge CGColorRef _Nullable)([UIColor blackColor]);
    
    [self _initPicture];
    
    if (!_playerContent) {
        _playerContent = [UIView new];
        _playerContent.frame = CGRectMake(-10, -10, 1, 1);
        _playerContent.alpha = 0.0;
        _playerContent.backgroundColor = [UIColor clearColor];
        _playerContent.userInteractionEnabled = NO;
    }
    _playerLayer.frame = CGRectMake(0, 0, 1, 1);
    [_playerContent.layer addSublayer:_playerLayer];
    
    UIWindow *window = (UIWindow *)GetAppDelegate.window;
    [window addSubview:_playerContent];
    
    [_queuePlayer play];
}


- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
    if ([keyPath isEqualToString:@"status"]) {
        
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            
            if (_queuePlayer.status == AVPlayerStatusReadyToPlay) {
                [_queuePlayer play];
                if (!_pipViewController.isPictureInPictureActive) {
                    [self doPicInPic];
                }
            } else {
                [self closePicInPic];
            }
            
        });
        
    }
    
}


- (void)doPicInPic {
    if (![[self class] isSupportPictureInPicture]) return;
    
    if (!_pipViewController.pictureInPictureActive) {
        [_pipViewController startPictureInPicture];
        _needEnterRoom = YES;
    }
}


- (void)closePicInPic {
    if (![[self class] isSupportPictureInPicture]) return;
    if (!_pipViewController) return;
    
    [self _removePlayerContentView];
    _needEnterRoom = NO;
    [self _removeObserve];
    
    if (_pipViewController.pictureInPictureActive) {
        [_pipViewController stopPictureInPicture];
    }
    
    ///# 释放资源
    _playerItem  = nil;
    _playerLayer = nil;
    _beginItem   = nil;
    _queuePlayer = nil;
}

- (void)_removeObserve {
    if (_playerItem) {
        [_playerItem removeObserver:self
                         forKeyPath:@"status"];
        _playerItem = nil;
    }
    if (_beginItem) {
        [_beginItem removeObserver:self
                        forKeyPath:@"status"];
        _beginItem = nil;
    }
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}


- (void)pictureInPictureController:(AVPictureInPictureController *)pictureInPictureController restoreUserInterfaceForPictureInPictureStopWithCompletionHandler:(void (^)(BOOL restored))completionHandler {
    
    if (_needEnterRoom) {
        
        [self _removePlayerContentView];
        
        if (self.roomID) {
####进入直播间            
        }
        [self _removeObserve];
    }
    completionHandler(YES);
}

- (void)pictureInPictureControllerDidStopPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
}

- (void)pictureInPictureControllerDidStartPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
}

- (void)pictureInPictureControllerWillStopPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
    [self _removeObserve];
}

- (void)pictureInPictureController:(AVPictureInPictureController *)pictureInPictureController failedToStartPictureInPictureWithError:(NSError *)error {
    [self _removePlayerContentView];
}

- (void)pictureInPictureControllerWillStartPictureInPicture:(AVPictureInPictureController *)pictureInPictureController {
}

- (void)_removePlayerContentView {
    if (_playerContent && _playerContent.superview) {
        [_playerContent removeFromSuperview];
    }
}

@end

稍微说两句。此处,最开始先加载一个本地视频,因为,切换视频格式的时候,不能马上唤起画中画的画面。只有等到 <code>AVPlayerItem</code> 的 status 是 AVPlayerStatusReadyToPlay 的时候才能显示,所以,直接加载一个本地视频,本地视频的 AVPlayerItem 就直接 AVPlayerStatusReadyToPlay 了。

这里使用 AVQueuePlayer ,切换两个 AVPlayerItem 的时候,过程中间有一个 菊花在转动。挺好

效果图:

1
2
3
4
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,454评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,553评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,921评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,648评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,770评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,950评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,090评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,817评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,275评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,592评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,724评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,409评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,052评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,815评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,043评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,503评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,627评论 2 350

推荐阅读更多精彩内容