通过ReplayKit在触手、映客、企鹅电竞上直播游戏界面

在去年(2015)的WWDC Apple分享了主题《Going Social with ReplayKit and Game Center》。该Session展示了Apple在iOS9上面引入了一个全新的framework来提供录屏功能,这样游戏用户就可以通过这个功能将自己玩的内容进行录制并分享了,但是实际使用起来,这个工具却有诸多弊端,比如内容要自己编辑、需要自己保存等。发布一年多来,使用的人甚少,至少在腾讯、网易这些手游大拿的游戏上面都没有看到该录制功能。

所以在今年(2016)的WWDC上面,Apple又展开了一个新的Session 《Go Live with ReplayKit》,扩展了ReplayKit使其支持录屏直播的功能。简单描述就是可以将玩家的屏幕进行录屏并可以将录制的实时流取出来传递到网络上面进行广播。想想近年来火热的游戏直播,是不是很兴奋。Aplle更变(gei)态(li)的是,在直播屏幕的同时还可以录制摄像头,这简直是给美女游戏直播撤掉了蒙羞布啊。

废话不多说,先来看个效果图:

iPhone's Screen

首先这张是我们提供的demo运行在iPhone上的效果。

再来:

Android's Screen

这个是在Android上面通过触手直播进行的观看效果,那个美美的键盘加豆浆就是我等程序猿早上的必备装备了。

虽然这个Demo比较挫,但是也可以脑补下这个换成游戏界面(如果游戏是横屏的,直播那里也是横屏的),然后在加上美女头像,是多美的一个画面。文中Demo可以在github上进行下载。

拉起主播平台选择界面

既然是通过第三方App进行直播,首要工作肯定就是要拉起第三方应用(虽然这里说的是第三方应用,实际上是苹果的一个机制,就类似分享一样,有个列表可以选择内嵌App)。效果如下:

tabs

这里和分享一样,拉起一个列表,罗列了本机上装了的App中已经实现“BroadCast UI Extension”(直播App才需要实现)的App。

那要如何实现这一步呢?来看下面代码:

- (IBAction)onPopBroadcastServices:(id)sender {
    [RPBroadcastActivityViewController loadBroadcastActivityViewControllerWithHandler:^(RPBroadcastActivityViewController * _Nullable broadcastActivityViewController, NSError * _Nullable error) {
        if (nil != error) {
            NSLog(@"loadBroadcastActivityViewControllerWithHandler with error %@", error.domain);
            return ;
        }
        
        broadcastActivityViewController.delegate = self;
        [self presentViewController:broadcastActivityViewController animated:YES completion:^{
            //
        }];
    }];
}

这里主要调用RPBroadcastActivityViewController的一个类方法:

+ (void)loadBroadcastActivityViewControllerWithHandler:(void (^)(RPBroadcastActivityViewController *broadcastActivityViewController, NSError *error))handler;

光光只调用这个接口,本身是不会弹出页面的,这个API作用是搜索出本机上装了的App中已经实现“BroadCast UI Extension”(直播App才需要实现)的App,并构建好UI。当完成后会调用上面的Block handler进行回调:

void (^)(RPBroadcastActivityViewController *broadcastActivityViewController, NSError *error)

如果成功的话,error为nil,否则需要根据错误码进行判断。成功时,这里返回的RPBroadcastActivityViewController就是构建好的UI,一个UIViewController。通过rootViewController的presentViewController可以将其push出来。上面的代码就是做了这个事以后弹出UI的。

在弹出的页面中选择好要用的第三方直播App后,会短暂的切入到第三方直播App的控制界面中,比如给直播起个名字,有些直播App需要主播认证(企鹅电竞)。比如触手和映客的界面是这样的:

chushou

yingke

点击“开始直播”后。。。。

这个时候其实还没有开始直播,只是完成了一切设置过程而已。

如果这个时候回到App的界面,会发现,界面上的按钮都点击不了了。这是为啥呢????

如果留意上面的步骤会发现,我们手动“present”了一个ViewController,但是却没有手动的去“dismiss”掉。那该什么时候来dismiss呢?

RPBroadcastActivityViewController的Delegate

“什么时候?” 这种问题,肯定是要由Delegate来回答了。

上面构建的RPBroadcastActivityViewController我们可以为他设置一个Delegate:

RPBroadcastActivityViewControllerDelegate

其目前就只有一个事件,就是当用户选择完第三方直播App之后:

- (void)broadcastActivityViewController:(RPBroadcastActivityViewController *)broadcastActivityViewController 
   didFinishWithBroadcastController:(RPBroadcastController *)broadcastController 
                              error:(NSError *)error;

error不为nil的话表示出错原因,比如用户点"X"的按钮。这里的RPBroadcastActivityViewController就是上面的罪魁祸首被"present"出来的ViewController了,我们在这个回调里面把他"dimiss"就可以了。

实现了这个Delegate后,如上面的例子,在loadBroadcastActivityViewControllerWithHandler的回调里面进行设置。

这里还有个重要的参数RPBroadcastController,其实他才是我们的主角,后面对录制过程的控制都要通过他来进行。

调用直播接口

怎么能没控制就直播呢?主播mm各种隐私是不是。所以还需要通过以下几个严格意义上的录制工具的API才能开始

- (void)startBroadcastWithHandler:(void (^)(NSError *error))handler;
- (void)pauseBroadcast;
- (void)resumeBroadcast;
- (void)finishBroadcastWithHandler:(void (^)(NSError *error))handler;

上面四个API对程序猿肯定没压力啦。就是开始、暂停、回复以及结束。这里需要注意的是开始和结束时有一个Block回调的,有同学反馈开始有的时候会失败,虽然我没有遇到过。不过还是做个检查比较好。

当调用startBroadcastWithHandler之后,在另一个手机上去看直播就可以了。经过试验,这个地方直播有个1-2min钟的延迟。另外不同的直播App表现也不一样。比如

  • 触手TV: 在调用startBroadcastWithHandler后,会在通知里面弹出“直播已连接”的提示,当finishBroadcastWithHandler的时候,会弹出“直播已结束”的提示。
    chushou1
    chushou2
  • 映客: 调用哪个API都没有明确提示,需要关注主播后看效果。

开始后应该就可以在其他手机上面看到直播画面了。

设置麦克风和摄像头

按照上面走下来,会发现既没有主播声音也主播头像,这该怎么办呢?

这里还需要用到RPScreenRecorder这个类,他实际上是一个单例对象,通过其单例方法:

+ (RPScreenRecorder *)sharedRecorder;

获得对象。

其有两个Setter方法:

@property(nonatomic, getter=isCameraEnabled) BOOL cameraEnabled;
@property(nonatomic, getter=isMicrophoneEnabled) BOOL microphoneEnabled;

将其设置成YES,就可以开启对应的功能了。

注意:这设置一定要再startBroadcastWithHandler之前设置好,否则不起作用

这个时候再直播看看。。。

此时会发现有主播MM甜甜的声音了,但是没有美美的头像。怎么整?这是因为摄像头的结果是个View,需要我们自己对其进行布局才可以显示。

startBroadcastWithHandler的Block里面对RPScreenRecorder

@property(nonatomic, readonly) UIView *cameraPreviewView;

进行设置,比如调整下位置,然后在添加到rootView上面:

[[RPScreenRecorder sharedRecorder].cameraPreviewView setFrame: CGRectMake(100, 100, 300, 300)];
[self.view addSubview: [RPScreenRecorder sharedRecorder].cameraPreviewView];

这里发现个坑爹的地方,就是这个View的位置可以改动,但是大小却不能变》》》》》

总结

通过上面的演示Demo可以了解到,Apple这次的诚意还是比较足的,以往一般主播是通过一个PC客户端的第三方工具获取屏幕内容,然后还要做麦克风和摄像头的同步,直播位置受限。现在通过ReplayKit,玩家可以随时随地的进行录屏直播,从而为iPhone游戏直播提供了一条更便捷的方式。

作为游戏测,只要使用ReplayKit的几个拉起直播平台的简单接口就可以实现通过第三方直播App进行直播。而直播App放则还要按照ReplayKit的要求创建“BroadCast UI Extension”以及“BroadCast Upload Extension”的功能来实现视频流的接收和上传,当然这个不在我们这篇文章的介绍范围之内。

参考

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,498评论 25 707
  • 一、市场背景 根据2016年5月17日发布的《中国移动互联网发展状况及其安全报告(2016)》内容显示,2015年...
    Sheridon阅读 7,548评论 0 46
  • 2016 年是直播元年,也是这个行业最辉煌的一年,不少平台拿到了B轮,甚至是C轮融资。而直播行业的火爆,直接引来了...
    方弟阅读 48,367评论 7 126
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,022评论 4 62
  • 现在的我努力的去学习,去生活,去健身………我希望在遇见那个走进我心里的人时,不会因为外貌和身材而给他造成困扰,让他...
    我是谁Who阅读 212评论 0 0