美文网首页OC开源项目iOS Collection固予
一言不合你就用环信搞个直播APP

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

作者: 江南孤鹜 | 来源:发表于2016-06-30 23:24 被阅读2459次

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

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


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

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



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


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

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

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

    其次,做这个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);
    Ucloud后台

    但是,要求准备一个已经备案的域名,这个确实让很多小伙伴望而生怯。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. 下载小马直播间代码,将源码中的UCloudSDKUCloudUI文件夹拷贝到项目的根目录,并拖到XCode项目中:

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


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

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

    小马已经基于UCloud官方demo封装了调用推流拉流的代码,大家只需把自定义直播控件UcCameraView拖入自己项目中即可:

    1. 下载小马直播间代码,将源码中的Class->Custom文件夹拷贝到项目的根目录,并拖到XCode项目中:

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

    声明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页面时,记得停止直播哦,即在deallocbackAction函数中调用如下代码:

    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

    相关文章

      网友评论

      • 1258fdbb8c98:环信聊天室有人数限制!
      • 我是李小米:楼主,问个问题,在官方demo中没有体现出保存直播录像的功能,不知道有没有这个功能呢?
      • H_Cynic:开了下评论 好像有坑。。。激动的心情一下冰冻了:scream:
      • PhoenixZhai:我出现9个同样的错误,怎么解决?
        ec7e52a0c452:怎么解决的?
      • 07a409386548:为什么我运行demo的时候一直报错 "_OBJC_CLASS_$_CameraServer",referenced from: Objc -class-ref in UcCameraView.o 这种类似的有5个。。。好纠结
      • d614b3361c2e:我这运行了就是一个聊天室啊 直播功能在哪呢
        江南孤鹜:@houwenlong https://github.com/mengmakies/SmallHorseLive
        江南孤鹜:@houwenlong 有音视频直播功能,效果图跟文章里的一样。
      • dd25f9257b81:可以玩玩
      • imGeek:厉害,收藏!!!
      • 南栀倾寒:写的有点乱 ,不过内容还算可以
        南栀倾寒:代码编译不过
        南栀倾寒:@江南孤鹜 嗯嗯 加油
        江南孤鹜:@南栀倾寒 谢谢您的建议,文采不佳,下次提高 :wink:

      本文标题:一言不合你就用环信搞个直播APP

      本文链接:https://www.haomeiwen.com/subject/hvutjttx.html