一言不合你就用环信搞个直播APP

Posted 2020-08-02

原文地址：http://community.easemob.com/article/825307904
里面还有我的更多开源项目干货，欢迎大家过来点赞

最近互联网直播平台催生了一批批网红大咖，作为程序猿，我们绝不甘于委身幕后做搬砖工，我们一定要闪亮登场！！！做一个属于我们程序猿的ios版直播平台~~

来吧！少年，跟着我们做完这个APP，下一个“朱碧石”，肯定就是你啦~

先看看我们即将要做的这个APP的成品截图，内心激动一下啵~

so…是不是很酷啊？But。。。上面这个APP，需要对各种布局细节处理，所以5分钟是搞不定的……小马只能提供源码给大家参考。
小马直播间 https://github.com/mengmakies/SmallHorseLive

接下来我们教大家做的这个app，也包含了最核心的音视频直播功能，亲测……结合环信IM的聊天室和Ucloud的直播云ULive，确实5分钟内可以完成。

• 环信IM http://www.easemob.com/
• Ucloud的直播云ULive https://www.ucloud.cn/site/product/ulive.html

首先，我们先来普及一下音视频直播的两个专业术语：推流、拉流。

• 推流：把视频流“推”送到服务器，也就是：视频录制；
• 拉流：把视频流从服务器“拉”出来，也就是：视频播放；
  注意：以上为个人理解，专业解释需要大家搜索百度或必应~!~

其次，做这个demo过程中有2个坑，小马都帮大家踩过了：

• 环信 iOS HyphenateFullSDK（包含实时通话功能）与UCloud的直播云SDK会冲突，推流的时候直接导致视频“卡住”不动。所以只能集成环信HyphenateSDK （不包含实时通话功能）；
• UCloud官方明确表明直播云SDK最低支持IOS7.0，可是经小马实测，IOS7.0.4无法推流（但是拉流正常），被这个坑了4天，所以建议大家真机测试时，IOS系统版本至少要8.0以上。

最后，我们可以开始做直播APP了：

第一步：创建推流和拉流加速

如何创建推流和拉流加速？https://docs.ucloud.cn/upd-docs/ulive/live_stream.html

需要准备的物料：
1. 已经备案的域名；
2. 在UCloud上购买流量（0.45元/GB）；

但是，要求准备一个已经备案的域名，这个确实让很多小伙伴望而生怯。so….我们直接用官方demo里的推流和拉流地址即可：

第二步：集成环信IM的聊天室功能

快速集成环信IM功能，可以参考以下文章，其中细节我们就不在这里累赘：
《IOS快速集成环信IM - 基于官方的Demo优化，5分钟集成环信IM功能》

在XCode中新建项目HxChatLiveDemo，参考上面的文章集成环信IM后，我们需要将单聊改成聊天室，在ViewController.m代码里，登录成功后，换成下面代码即可：

ChatViewController *chatVC = [[ChatViewController alloc] initWithConversationChatter:@"1432362535305065" conversationType:EMConversationTypeChatRoom];
chatVC.title = @"小马直播间";
[self.navigationController pushViewController:chatVC animated:YES];

第三步：集成UCloud的ULive直播云SDK

1. 下载小马直播间代码，将源码中的UCloudSDK和UCloudUI文件夹拷贝到项目的根目录，并拖到XCode项目中：
   

2.在HxChatLiveDemo-Prefix.pch中加入下面的代码：

编译运行….wait…如果没有报错，恭喜你~~你离成功就差一步了

第四步：在聊天室里集成推流(录制)和拉流(播放)功能

小马已经基于UCloud官方demo封装了调用推流和拉流的代码，大家只需把自定义直播控件UcCameraView拖入自己项目中即可：
1. 下载小马直播间代码，将源码中的Class->Custom文件夹拷贝到项目的根目录，并拖到XCode项目中：

2.在聊天室页面ChatViewController.m中初始化直播控件UcCameraView，请参照如下代码：

在viewDidLoad函数中初始化直播控件：

// 如果是聊天室，则显示直播~
    if (self.conversation.type == EMConversationTypeChatRoom ) {
        _cameraView = [[UcCameraView alloc] initWithStreamID:@"12345"];
        _cameraView.frame = [[UIScreen mainScreen] bounds];

        [_cameraView startRecord];// 直播视频
        // [_cameraView startPlay];// 播放视频

        [self.view addSubview:_cameraView];
        [self.view sendSubviewToBack:_cameraView];

        self.tableView.backgroundColor = [UIColor clearColor];
    }

编译运行~~~见证奇迹的时刻来了=.=


那….我们怎么验证推流是否成功？打开页面http://www.cutv.com/demo/live_test.swf ，输入推流或者拉流地址即可。比如我们当前直播的地址：
rtmp://publish3.cdn.ucloud.com.cn/ucloud/12345
或者
rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/12345

注意

关闭当前ChatViewController页面时，记得停止直播哦，即在dealloc和backAction函数中调用如下代码：

if (_cameraView) {
    [_cameraView stopRecord];
}

3.推流(录制)已经可以正常使用了，接下来我们就开始拉流(播放）视频了。其实很简单，将上面第二步的一行代码换成播放即可：

//[_cameraView startRecord];// 直播视频
 [_cameraView startPlay];// 播放视频

问题又来了？我们怎么验证是否拉流（播放）成功呢？So easy…
去Ucloud的直播云ULive官网下载安卓版的安装包，打开APP，输入视频流ID”12345“，点击左边的【录制】按钮开始【推流】：

Ucloud安卓APP推流效果图，注意第二张图左上角红框处，只有显示流量（例如128.KB/S）才真正推流成功。推流成功后，才能打开IOS版demo拉流播放，否则会提示：播放错误。

如果没有安卓机，大家可以用其它推流工具，墙裂推荐：https://www.qcloud.com/doc/api/258/4743

OK。。。大功告成！！！开香槟庆祝一下~最简单的直播APP已经制作完毕，其它细节问题（例如界面美化、聊天页面），大家要自己处理哦。本文示例代码已开源：
HxChatLiveDemo https://github.com/mengmakies/HxChatLiveDemo
小马直播间 https://github.com/mengmakies/SmallHorseLive

如有任何问题，请咨询【环信IM互帮互助群】，群号：340452063
或者加本人QQ：364223587，加Q请认准以下正宗小马头像：

原文地址：http://community.easemob.com/article/825307904