0
评论

一言不合你就搞个直播APP UCloud 直播

江南孤鹜 发表了文章 • 38 次浏览 • 2016-06-30 23:01 • 来自相关话题

最近互联网直播平台催生了一批批网红大咖,作为程序猿,我们绝不甘于委身幕后做搬砖工,我们一定要闪亮登场!!!做一个属于我们程序猿的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-doc ... .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请认准以下正宗小马头像:
                                      查看全部
最近互联网直播平台催生了一批批网红大咖,作为程序猿,我们绝不甘于委身幕后做搬砖工,我们一定要闪亮登场!!!做一个属于我们程序猿的IOS版直播平台~~
                                                                   
1.png

                                                                   
2.png


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

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

                                                                   
4.png

                                                                   
5.png


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

                                                                     
6.png


接下来我们教大家做的这个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-doc ... .html


需要准备的物料:
1. 已经备案的域名;
2. 在UCloud上购买流量(0.45元/GB);



7.png


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

8.png


第二步:集成环信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项目中:
9.png


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

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

第四步:在聊天室里集成推流(录制)和拉流(播放)功能
小马已经基于UCloud官方demo封装了调用【推流】和【拉流】的代码,大家只需把自定义直播控件【UcCameraView】拖入自己项目中即可:
1. 下载小马直播间代码,将源码中的【Class】->【Custom】文件夹拷贝到项目的根目录,并拖到XCode项目中:
11.png


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


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];
}

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


                                                                           
14.png

那....我们怎么验证推流是否成功?打开页面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
15.png


注意


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

if (_cameraView) {
[_cameraView stopRecord];
}

 



3.推流(录制)已经可以正常使用了,接下来我们就开始拉流(播放)视频了。其实很简单,将上面第二步的一行代码换成播放即可:
//[_cameraView startRecord];// 直播视频
[_cameraView startPlay];// 播放视频

问题又来了?我们怎么验证是否拉流(播放)成功呢?So easy...
去[UCloud的直播云ULive官网]下载安卓版的安装包,打开APP,输入视频流ID【12345】,点击左边的【录制】按钮开始【推流】:

16.png


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




17.png


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



                                                                         
18.png

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


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


0
回复

iOS 会话列表每次启动程序后进入没有数据 环信_iOS

回复

ssladn 发起了问题 • 1 人关注 • 24 次浏览 • 2016-06-30 22:53 • 来自相关话题

0
评论

环信IM精简版demo--用最少的代码实现通信 环信demo 精简demo

huangfangyi 发表了文章 • 27 次浏览 • 2016-06-30 22:34 • 来自相关话题

清洁版Eclipse工程包:仅5.5M---http://pan.baidu.com/s/1jIPg70i




全部类文件:




体验包:仅2.7M--http://fir.im/xy1z;
Android Studio兼容工程包----https://github.com/huangfangyi/EaseDemoLite
 
 
  查看全部
清洁版Eclipse工程包:仅5.5M---http://pan.baidu.com/s/1jIPg70i
QODHOJNGA4ATOA~3NG)MBAC.png

全部类文件:
X]NE@UYV0CM2AG2J@P[JIM2.png

体验包:仅2.7M--http://fir.im/xy1z;
Android Studio兼容工程包----https://github.com/huangfangyi/EaseDemoLite
 
 
 
1
评论

开源项目-《方圆十里》-基于IM(环信通信云)+LBS(百度地图SDK+GeoHash距离算法)的社交APP 附近的人 凡信作者 方圆十里

huangfangyi 发表了文章 • 31 次浏览 • 2016-06-30 21:48 • 来自相关话题

一、功能列表:1、登录、注册(采用后端授权注册的方式绑定环信id,更安全)
2、用户资料:头像、昵称、性别、生日、地区(本地arrays.xml存储地区数据库)、个性签名
3、Tab1.-“人”---- 百度地图中显示十公里内的人(如果用户位置集中或者人数过少会导致无法测试,因此“更远”选项,搜寻更多,并且本身的十公里概念也未进行筛选)
4、Tab2.“事”----十公里内的动态--文字、图片、位置的动态(发布、回帖、通知提醒)
5、Tab3.“聊”----IM会话
6、Tab4. “友”---通讯录及好友申请
7、我的动态
8、二维码---通过扫二维码加好友
二、特点备注:
1、本项目中采用geohash算法编码用户的位置坐标,达到位置的粗分区,而后进行精确精算实现十公里之内的人和事的概念。
2、创建自定义的百度地图标注。
3、一套将环信IM系统和开发者自身的用户体系融合的解决方案(当前的解决方案在多个项目中得到检验,成熟稳定)。
4、常见的发帖回复模块的处理解决。
5、利用环信的透传消息进行用户的帖子发布、回复等提醒通知。(待更新)
6、UI优化,如电话聊天背景的取自用户头像的毛玻璃特效--参考微信电话聊天背景(待更新)

项目地址:https://github.com/huangfangyi/fangyuanshili 
体验包: http://fir.im/ld6m​
项目近期在着手更新,有兴趣加入本项目开源组的可以联系QQ:84543217,备注“方圆十里开源组” 查看全部
一、功能列表:1、登录、注册(采用后端授权注册的方式绑定环信id,更安全)
2、用户资料:头像、昵称、性别、生日、地区(本地arrays.xml存储地区数据库)、个性签名
3、Tab1.-“人”---- 百度地图中显示十公里内的人(如果用户位置集中或者人数过少会导致无法测试,因此“更远”选项,搜寻更多,并且本身的十公里概念也未进行筛选)
4、Tab2.“事”----十公里内的动态--文字、图片、位置的动态(发布、回帖、通知提醒)
5、Tab3.“聊”----IM会话
6、Tab4. “友”---通讯录及好友申请
7、我的动态
8、二维码---通过扫二维码加好友
二、特点备注:
1、本项目中采用geohash算法编码用户的位置坐标,达到位置的粗分区,而后进行精确精算实现十公里之内的人和事的概念。
2、创建自定义的百度地图标注。
3、一套将环信IM系统和开发者自身的用户体系融合的解决方案(当前的解决方案在多个项目中得到检验,成熟稳定)。
4、常见的发帖回复模块的处理解决。
5、利用环信的透传消息进行用户的帖子发布、回复等提醒通知。(待更新)
6、UI优化,如电话聊天背景的取自用户头像的毛玻璃特效--参考微信电话聊天背景(待更新)

项目地址:https://github.com/huangfangyi/fangyuanshili 
体验包: http://fir.im/ld6m
项目近期在着手更新,有兴趣加入本项目开源组的可以联系QQ:84543217,备注“方圆十里开源组”
1
回复

本系统登录聊天时,希望默认展示一些分组,这些群组在什么时候创建合理?用的是环信 环信_管理后台

ted.zl 回复了问题 • 2 人关注 • 27 次浏览 • 2016-06-30 19:38 • 来自相关话题

1
回复

iOS 如何 制作并上传推送证书 现在官网 找不到member center 环信_iOS

ted.zl 回复了问题 • 2 人关注 • 37 次浏览 • 2016-06-30 19:35 • 来自相关话题

1
回复
1
回复

移动端的聊天记录,后台可以查看吗 环信_Android

TestAlan 回复了问题 • 2 人关注 • 54 次浏览 • 2016-06-30 19:28 • 来自相关话题

1
回复

ios 语音通话的问题。听不到对方的声音,界面上显示没有通化数据。 语音通话 环信_iOS

ted.zl 回复了问题 • 2 人关注 • 34 次浏览 • 2016-06-30 19:28 • 来自相关话题

1
回复

ios2.0 视频通话,对方接受通话后,自己这边会收到Connect remote failure 环信_iOS

ted.zl 回复了问题 • 2 人关注 • 31 次浏览 • 2016-06-30 19:27 • 来自相关话题

1
回复

环信IOS开发即时聊天服务器 环信_管理后台 环信_iOS

ted.zl 回复了问题 • 2 人关注 • 30 次浏览 • 2016-06-30 19:25 • 来自相关话题

1
回复

关于ios环信3.0报错 环信_iOS

回复

招牌猪 回复了问题 • 1 人关注 • 31 次浏览 • 2016-06-30 16:56 • 来自相关话题

1
回复

android如何在聊天页面里判断环信后台发来的系统消息区别普通用户做操作 环信_Android

final 回复了问题 • 2 人关注 • 27 次浏览 • 2016-06-30 16:55 • 来自相关话题

1
回复

IOS 工程师 过来看看吧 环信_iOS

招牌猪 回复了问题 • 2 人关注 • 47 次浏览 • 2016-06-30 16:51 • 来自相关话题

2
回复

web-im是否有聊天室功能?如果没有我是否可以用群组模拟聊天室? 环信_WebIM

hblzg123 回复了问题 • 2 人关注 • 590 次浏览 • 2016-06-30 16:43 • 来自相关话题

1
回复

web 端通过接口 创建聊天室不成功 环信_WebIM

hblzg123 回复了问题 • 2 人关注 • 32 次浏览 • 2016-06-30 16:41 • 来自相关话题

2
回复

会话列表具体怎么集成啊? 会话列表 EaseUI 环信_iOS

ssladn 回复了问题 • 3 人关注 • 117 次浏览 • 2016-06-30 14:42 • 来自相关话题

1
评论

简单Android环信Demo 简单的环信Demo

urthebest 发表了文章 • 45 次浏览 • 2016-06-30 13:42 • 来自相关话题

https://github.com/ipurecode/huanxinintegration
 
提供个简单的环信Demo,来帮助新同学,学习集成环信,希望对大家有用。
https://github.com/ipurecode/huanxinintegration
 
提供个简单的环信Demo,来帮助新同学,学习集成环信,希望对大家有用。
2
回复

集成easeui 调用EMClient.getInstance().isLoggedInBefore()或EMClient.getInstance().login 空指针闪退 环信_Android

回复

wyz606 回复了问题 • 1 人关注 • 54 次浏览 • 2016-06-30 12:40 • 来自相关话题

0
回复

web 版 , 刷新 页面 后, 重新 进入时 好友聊天记录 就没有了 ,怎么回事?? web聊天

回复

youxdd0 发起了问题 • 1 人关注 • 42 次浏览 • 2016-06-30 12:01 • 来自相关话题

2
回复

iOS发送的消息给我自己写的view给遮住了。。怎么办怎么办。。。。 iOS环信UI集成 iOS环信聊天

su酥酥 回复了问题 • 2 人关注 • 58 次浏览 • 2016-06-30 10:59 • 来自相关话题

2
回复

EMClient 初始化后调用EMClient.getInstance().isLoggedInBefore() 为null 环信_Android 初始化问题

wyz606 回复了问题 • 2 人关注 • 322 次浏览 • 2016-06-30 10:54 • 来自相关话题

2
回复

EaseUI的来了消息在通知栏提示,怎么设置? 环信_Android

huangjiale 回复了问题 • 2 人关注 • 83 次浏览 • 2016-06-30 09:02 • 来自相关话题

2
回复

强制用户下线失败,返回结果成功,但用户还在线 环信_Android 环信_iOS 环信_RestAPI

敬顺昊天 回复了问题 • 2 人关注 • 68 次浏览 • 2016-06-30 09:00 • 来自相关话题

1
回复

点击发送报 Attempt to invoke virtual method 'int android.view.View.getImpor

TestAlan 回复了问题 • 2 人关注 • 42 次浏览 • 2016-06-29 20:11 • 来自相关话题