Do a copy of the live App? Just look at me

A brief introduction of the current situation

Do a copy of the live App? Just look at me

1 technology implementation level:

Technology is relatively mature, the device also supports hard coding. IOS also provides off the shelf Video ToolBox framework, you can deal with the camera and streaming media data structure, but the Video ToolBox framework is only compatible with more than 8 versions, the following 8 need to use the x264 library.

GitHub have a ready-made open-source implementation, push flow, beauty, watermark, barrage, like animation, filters, are playing. The technology is not difficult, but now many manufacturers provide cloud SDK, seven cattle cloud, Jin Shanyun, LETV, Tencent, Baidu cloud cloud cloud, Betta live streaming partner side, almost all of the functions are the same, no highlights, different is the simple broadcast platform service differentiation and access. Backend is now RTMP/HTTP-FLV, App hang a source station directly into the cloud vendor or CDN on OK.

2 broadcast optimization level

In fact, the most difficult is to improve the quality of service, first time Qos (Quality of Service, quality of service), how can the live experience in the packet loss rate of 20% cases to ensure the stable and smooth, need to consider the following scenario:

1 in order to speed up the first time, receiving active push streaming server: GOP (Group of Pictures: encoding strategies affect quality) called GOP, meaning the picture group, a GOP is a group of consecutive frames to the edge node, edge node cache GOP, playback side can quickly reduce the load, back to the source of delay

Do a copy of the live App? Just look at me

2.GOP frame, in order to solve the time delay, why delay, jitter, packet network congestion is not lost out, after all the time stamp must be modified, remember, or the client will card a GOP time is PTS (Presentation Time Stamp, because PTS is mainly used to measure what time frame after decoding is displayed) causes and DTS, or DTS and PTS also modified player (push flow end lost more complex GOD, I frames before throwing P frame will spend screen)

Do a copy of the live App? Just look at me

3 pure audio lost frame, to solve the problem of audio and video synchronization, so that the video delta increments to the audio you lose the Delta, then send the audio, otherwise it will not synchronize audio and video

4 source station main switch and disconnection reconnection

5 according to the TCP congestion window to do intelligent scheduling, when the congestion window is too large to explain the poor quality of service nodes, the need to switch nodes and troubleshooting

6 increase the uplink and downlink bandwidth detection interface, when the bandwidth is not satisfied to reduce the quality of the video, that is, to reduce the bit rate

7 timing to get the best push, pull link IP, as far as possible to ensure the best service

8 monitoring must be to monitor the status of each node Qos, to do the entire platform resource allocation optimization and scheduling

Do a copy of the live App? Just look at me
live process.3

9 if the product from the push side, CDN, players are their own, to protect the Qos advantage is very large

10 when the volume is very large, to join the cluster management and scheduling, protection Qos

11 player by increasing the delay to reduce the network jitter, by Nora to reduce delay. (known as Song Shaodong).

3 operating costs and customer experience

According to online data, Betta TV 300 million yuan, TV standard 150 million yuan, 120 million yuan for the dragon, tiger 30 million + rmb.

Operation and promotion: This is a burn, and some do live broadcast, live games, live show A round at least ten million.

User experience: gift system smooth, no Caton, Huaping, reconnection, packet loss strategy, first draw loading speed, rich, in order to improve the user experience, can be loaded in the background data to other pages, but the user experience and memory optimization to find the balance point.

Two, streaming media transmission

1.TCP:TCP is a peer to peer protocol, which can guarantee the reliability of data transmission, but it is more expensive to server resources.

2.UDP:UDP is not a reliable transport protocol, no need to maintain the connection state, do not think that each packet must arrive at the receiving end, thus the network load is smaller than TCP, the transmission speed is also faster than TCP; but in the network more crowded, more and more packet loss.

3.RTMP:RTMP a protocol specifically designed for efficient transmission of video, audio and data. It achieves real-time video and audio transmission by building a binary TCP connection or connecting to the HTTP tunnel.

4.FFmpeg:FFmpeg is a set of open source computer programs that can be used to record, convert digital audio, video, and convert it into a stream. Using LGPL or GPL license. It provides a complete solution for recording, converting, and streaming audio and video

Do a copy of the live App? Just look at me
protocol difference.4

In three, the project construction: collection end

1 more well-known VideoCore

At present, many well-known domestic push frame is the two development of VideoCore. This framework is mainly written in C++ to support RTMP push flow, but for iOS developers a bit obscure (except for C++). Want to open source and free choice now several well-known projects in VideoCore + GPUImage+ GPU beauty filters based on modified IJKPlayer with their own play.

2 Comparison of domestic fire LiveVideoCoreSDK

IOS provides a framework for Apple’s mobile phone RTMP push flow to fill in the RTMP service address, you can directly push flow, SDK download simple engineering configuration can be run directly, realize the beauty of live and filter function, based on OpenGL, at any time before and after switching camera provides RTMP connection status callback. The
framework is the earlier a push flow framework has many in the use of the SDK function is complete, the author also compared the cattle, used to study flow acquisition related content is very good, but integrated into the difficult project (for me). In general, this is a very powerful push SDK, almost all use C++ to write, compile efficiency is very good, if there is strength, then recommend the use of this framework to do their own project push side.

3 good readability LFLiveKit

Framework supports RTMP (Real Time Messaging Protocol): real time messaging protocol, Adobe.
HlS (HTTP Live Streaming): Apple’s own dynamic rate adaptive technology. Mainly for PC and Apple terminal audio and video services. Includes a M3U (8) index file, TS media fragmentation file and key encrypted string file.

This is the first recommendation framework because it is mainly written in OC, the rest of the C language used to write the framework document is very clear, which provides great convenience for beginners not proficient in C++, and the development is very strong, support dynamic switching rate function, support function of beauty.

4 beauty

Beauty words are generally based on the use of GPUImage OpenGl development, pure OC language, this framework is very powerful, can make all kinds of different filters, high scalability. If no specific ideas can be directly used for BeautifyFace of beauty, can be added to the project, realize the beauty effect is very convenient.

Four, the specific project

1 how to achieve beauty?

Facial features using BeautifyFace, it can achieve very fast beauty, good effect, it is based on the underlying GPUImage, GPUImage on the very popular Developer, can refer to the BeautifyFace and write one of their own beauty, and add a variety of filters.

2 suspension TabBar implementation

The TabBar looks like it is done with a custom TabBar, but in fact it is still using the system’s TabBar, to the system’s tabBar.backgroundImage set a good background image.

Do a copy of the live App? Just look at me

After adding the top will find a shadow line, and the height of TabBar is not enough. The shadow line and the green line between the lines become transparent colors, the following methods to hide the shadow line, and the height of TabBar.

Do a copy of the live App? Just look at me
[[UITabBar appearance] setShadowImage:[UIImage / / hide shadow line new]];
- (void) setupTabBarBackgroundImage UIImage [UIImage imageNamed:@ {*image = "tab_bg"]; CGFloat top = 40; / / top cover height CGFloat bottom = 40; / / bottom end cap height CGFloat left = 100; / / left end cap width CGFloat right = 100; / / the right end cap width UIEdgeInsets insets = UIEdgeInsetsMake (top, left, bottom, right); / / designated stretch mode, stretching after re assignment *TabBgImage = [image UIImage resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch]; self.tabBar.backgroundImage = TabBgImage; [[UITabBar appearance] setShadowImage:[UIImage new]] [[UITabBar appearance] setBackgroundImage:[[UIImage; alloc]init]] TabBar;} / / custom height - (void) viewWillLayoutSubviews {CGRect tabFr Ame = self.tabBar.frame; tabFrame.size.height = 60; tabFrame.origin.y = self.view.frame.size.height - 60; self.tabBar.frame = tabFrame;}

3 player implementation

With the end of play for the RTMP optimized ijkplayer (ijkplayer), is a cross platform player based on FFmpeg, the open-source project has been more than App, which reflect the guest, beauty shot and Betta used ijkplayer (5700+ up). Provides in this paper at the end of, have been packaged ijkplayer directly into the project, you can use. Save the compilation process (compilation is cumbersome and error prone). Playback end call ijkplayer reference VoideSun Fangying written off Jane, if you have questions about ijkplayer, you can ask the daniel.

- (void) goPlaying URL self.url [NSURL {/ / acquisition = URLWithString:_liveUrl]; _player = [[IJKFFMoviePlayerController alloc] initWithContentURL:self.url withOptions:nil]; UIView *playerview = [self.player view]; UIView *displayView = [[UIView alloc] initWithFrame:self.view.bounds]; self.PlayerView = displayView; [self.view addSubview:self.PlayerView]; / / automatically adjust its width and height of playerview.frame = self.PlayerView.bounds; playerview.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight [self.PlayerView insertSubview:playerview; atIndex:1]; [_player setScalingMode:IJKMPMovieScalingModeAspectFill];}

4 push the realization of the end

Using LFLiveKit, push the flow side can choose a lot of open source projects on the GitHub alternative LFLiveKit, such as the above mentioned VideoCore, and LiveVideoCoreSDK. Commercially available, then you can choose the major manufacturers of SDK, NetEase live cloud, seven cattle, Tencent, Baidu, Sina, which I live in Jinshan cloud. The use of live cloud benefits that can fast on-line App, function is complete, and the player can push flow end server set down, a professional customer service staff to help integration project, flow drawback is too expensive, can understand the specific charges of major manufacturers.

- (UIButton*) startLiveButton{if (! _startLiveButton) {_startLiveButton [UIButton = new]; _startLiveButton.frame = CGRectMake (location / / (XJScreenW - 200) * 0.5, XJScreenH - 100, 200, 40); _startLiveButton.layer.cornerRadius = _startLiveButton.frame.size.height * [_startLiveButton setTitleColor:[UIColor blackColor] 0.5; forState:UIControlStateNormal]; [_startLiveButton.titleLabel setFont:[UIFont systemFontOfSize:16]]; [_startLiveButton setTitle:@ forState:UIControlStateNormal]; [_startLiveButton setBackgroundColor:[UIColor began to live "grayColor]]; _startLiveButton.exclusiveTouch = YES; __weak typeof (self) _self = self; [_startLiveButton addBlockFor ControlEvents:UIControlEventTouchUpInside block:^ (ID sender) {_self.startLiveButton.selected = _self.startLiveButton.selected; if! (_self.startLiveButton.selected) {[_self.startLiveButton setTitle:@ "the end of the live" forState: UIControlStateNormal]; LFLiveStreamInfo *stream [LFLiveStreamInfo = new]; stream.url = @ "rtmp://"; [_self.session startLive:stream];}else{[_self.startLiveButton setTitle:@ forState: UIControlStateNormal] "to live"; [_self.session stopLive];}}}]; return _startLiveButton;}

Stream.url is the address of the server, after the completion of the push flow using VLC player. Other people’s home server, do not recommend pushing time is too long (< 1 minutes), it is recommended to build their own RTMP server, see the details of my article.

  • Project address 520Linkee:GrayJIAXU/520Linkee

No server to set up a set of benefits to friends: backup server address (pro test available):

  • Rtmp://
  • Rtmp://
    (HKS name changed to other, such as AAA)
  • Rtmp://
  • Rtmp:// (rtmp://
  • Rtmp:// (rtmp://
  • Rtmp://
  • Rtmp://
  • Rtmp://

Contact me


Jane book