You make a live app with a ring letter.

Source: Internet
Author: User

Original address: http://community.easemob.com/article/825307904
There are more of my open source project dry, welcome to come to praise

Recently, the Internet live platform has spawned a batch of network red Big Coffee, as a procedural ape , we are not willing to commit to the behind-the-scenes do move brick work, we must be shiny debut!!! Be a part of our program Ape's iOS version of live platform ~ ~



Come on! Teenager, follow us to finish this app, next "Zhu Bi", must Be You ~

Let's take a look at the finished product of the app we're about to do.


So ... Isn't it cool? But ..... The above app requires a variety of layout details, so 5 minutes is uncertain ... Pony can only provide source code for everyone reference.
Pony Live Room https://github.com/mengmakies/SmallHorseLive

Next we teach you to do this app, also contains the most core audio and video live function, pro-test ... Combined with the chat room of the ring letter im and Ucloud's Live cloud ulive, it can be done in 5 minutes.

    • Ring Letter Im http://www.easemob.com/
    • Ucloud's Live cloud ulive https://www.ucloud.cn/site/product/ulive.html

First of all, we first to popularize the two professional terminology of audio and video broadcasting: Push stream, pull stream.

  • Push stream: The video stream "push" to the server, that is: video recording;
  • Lahue: The video stream from the server "pull" out, that is: video playback;
    Note: the above for personal understanding, professional interpretation needs everyone to search Baidu or Bing ~!~

Second, do this demo process there are 2 pits, the ponies have to help everybody stepped on:

  • The HYPHENATEFULLSDK IOS (including real-time calling feature) conflicts with Ucloud's live Cloud SDK, which directly causes the video to "snap" when it pushes the stream. Therefore can only integrate the ring letter HYPHENATESDK (does not include the real-time call function);
  • Ucloud official clearly indicated that the live Cloud SDK minimum support IOS7.0, but after the measurement of the pony, IOS7.0.4 can not push the stream (but pull the flow normal), was this pit for 4 days, so we recommend that the real machine test, iOS system version at least 8.0.

Finally, we can start the Live app:

First step: Create push and pull acceleration

How do I create a push stream and pull stream acceleration? Https://docs.ucloud.cn/upd-docs/ulive/live_stream.html

Items that need to be prepared:
1. The domain name that has been filed;
2. Purchase traffic on Ucloud ($ 0.45/gb);

However, the need to prepare a registered domain name, this really makes many small partners look timid. So .... We directly use the current push and pull addresses in the official demo:

Step Two: Integrate the chat room function of the Ring letter Im

The quick integration of the ring-letter Im feature allows you to refer to the following articles, where details are not burdensome here:
"iOS fast integrated ring Letter im-based on the official demo optimization, 5 minutes integrated with the Ring letter Im function"

Create a new project in Xcode Hxchatlivedemo, refer to the above article integrated with the Ring letter IM, we need to change the single chat room, in the viewcontroller.m code, login success, replaced by the following code:

ChatViewController *chatVC = [[ChatViewController alloc] initWithConversationChatter:@"1432362535305065" conversationType:EMConversationTypeChatRoom];chatVC.title = @"小马直播间";[self.navigationController pushViewController:chatVC animated:YES];
Step three: Integrate Ucloud's ulive live Cloud SDK
    1. Download the pony Live room code, copy the ucloudsdk and ucloudui folders from the source to the root of the project and drag them to the Xcode project:

2. Add the following code to the hxchatlivedemo-prefix.pch :

Compile run .... Wait ... If there is no error, congratulations ~ ~ You are one step away from success

Fourth step: Integrated push stream (record) and Lahue (play) function in Chat room

The pony has already encapsulated the code that invokes the push and pull streams based on the Ucloud official demo, so you can simply drag the custom live control Uccameraview into your project:
1. Download the pony Live room code, copy theCustom folder from the source to the root of the project and drag it to the Xcode project:

2. In the chat room page chatviewcontroller.m to initialize the live control Uccameraview, please refer to the following code:

Initialize the live control in the viewdidload function:

//if it is a chat room, show live ~  if  (self . Conversation. type  = = emconversationtypechatroom) {_  cameraVi EW = [[Uccameraview alloc] Initwithstreamid:@ "12345" ]; _  cameraview.frame = [[UIScreen mainscreen] bounds]; [_  cameraview Startrecord]; //live video  //[_cameraview startplay];//play Video  [self . View Addsubview:_  Cameraview]; [self . View Sendsubviewtoback:_  Cameraview]; self . Tableview.backgroundcolor = [Uicolor Clearcolor]; }

Compile Run ~ ~ ~ The time to witness a miracle =.=


So .... How do we verify that the push flow is successful? Open the page http://www.cutv.com/demo/live_test.swf, enter the push stream or pull the current address. For example, our current live address:
rtmp://publish3.cdn.ucloud.com.cn/ucloud/12345
Or
rtmp://vlive3.rtmp.cdn.ucloud.com.cn/ucloud/12345

Note

When you close the current Chatviewcontroller page, remember to stop the live broadcast, i.e. call the following code in the dealloc and backaction functions:

if{    [_cameraView stopRecord];}

3. The push stream (recording) is ready for normal use, and then we start to pull the stream (play) video. In fact, it is very simple, the second step above the line of code for playback:

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

Is that the problem again? How do we verify that the pull stream (playback) is successful? So easy ...
Go to Ucloud's Live cloud ulive official website Download the Android version of the installation package, open the app, enter the video stream id "12345", click on the left "record" button to start "Push flow":

Ucloud Android app to push the stream, note the top left corner of the second picture in the red box, only show traffic (for example, 128. KB/S) to actually push the stream successfully. After the push stream is successful, you can open the iOS version of demo pull stream, otherwise you will be prompted: play Error .

If there is no Andro, we can use other push flow tool, wall crack recommended: https://www.qcloud.com/doc/api/258/4743


Ok... Done!!! Open the champagne to celebrate ~ The simplest live streaming app has been finished, other details (such as screen beautification, chat page), we have to deal with it yourself oh. The sample code for this article is open Source:
Hxchatlivedemo Https://github.com/mengmakies/HxChatLiveDemo
Pony Live Room https://github.com/mengmakies/SmallHorseLive

If you have any questions, please contact "ring Letter im help each other group", group number: 340452063
Or add oneself qq:364223587, add Q Please look for the following authentic pony head:

Original address: http://community.easemob.com/article/825307904

You make a live app with a ring letter.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.