Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

captain-Lu/Live

Folders and files

NameName
Last commit message
Last commit date

Latest commit

History

40 Commits

Repository files navigation

This project is to demonstrate how to build a live broadcast app. It include these features:

  • Create a room to broadcast your live stream
  • Join a room to watch the live
  • Send likes, gifts, and comments

image image

Introduction

How to run

I've set up a test server at 139.196.179.230, so you can directly run the iOS project.

1. Nginx RTMP server

You can set up your own rtmp server, the guidance can be found here:

2. WebSocket server

Just go to the live-server folder, run npm install, then start the server by node app.js

3. iOS client

Go to the live-ios folder, run pod install(must use cocoapods 0.39.0)

In Config.swift, update the server url:

struct Config {
 static var rtmpPushUrl = "rtmp://139.196.179.230/mytv/"
 static var rtmpPlayUrl = "rtmp://139.196.179.230/mytv/"
 static var serverUrl = "http://139.196.179.230:3000"
}

The app can also run on a simulator, but to broadcast, you need to run it on a real device.

Tutorial

1. Live streaming

The basic live streaming flow is:

broadcaster -> rtmp -> media server -> cdn -> rtmp or hls -> audience

For the simplest case, we don't need a cdn server, then the flow will be:

broadcaster -> rtmp -> media server -> rtmp or hls -> audience

That is, the boadcaster push the live stream using the RTMP protocal to a media server, the audience pull the stream from the server using RTMP or HLS protocal.

Some explaination for RTMP and HLS:

  • RTMP: RTMP is used to stream audio, video or data and is originally a proprietary protocol introduced by Macromedia (owned by Adobe). The protocol is TCP-based and offers therefore persistent connections. In short, RTMP encapsulates MP3/AAC audio and MP4/FLV video multimedia streams.

  • HLS: HTTP Live Streaming is known as HLS. As the name implies, it is the media streaming communications protocol based on HTTP; developed by Apple as part of their QuickTime, Safari, OS X, and iOS products. How does it work? It breaks the overall stream into a sequence of small HTTP-based files (.ts: Transport Stream). These transport stream files are indexed in the file .m3u8. It is required to download first the .m3u8 playlist to play a live stream.

For the media server, there are serveral choices:

  • Adobe media server
  • Red5
  • Nginx RTMP module
  • crtmpserver

After setting up the server, you can test it using ffmpeg(install it by brew install ffmpeg).

  • push stream
ffmpeg -f avfoundation -framerate 30 -i "1:0" -f flv rtmp://server-url

p.s. Lots of live stream cloud already covers the media server and cdn parts. You just need to push/pull the stream from it.

2. iOS RTMP libs

There are serveral open source projects supporting RTMP, this project uses:

You can find the usage of these libs in their project pages.

3. Websocket server

This project uses socket.io to handle the client-server communication, the logic is very simple, on the server side:

var rooms = {}
io.on('connection', function(socket) {
 socket.on('create_room', function(room) {
 var roomKey = room.key
 rooms[roomKey] = room
 socket.roomKey = roomKey
 socket.join(roomKey)
 })
 socket.on('close_room', function(roomKey) {
 delete rooms[roomKey]
 })
 socket.on('disconnect', function(roomKey) {
 if (socket.roomKey) {
 delete rooms[roomKey]
 }
 })
 socket.on('join_room', function(roomKey) {
 socket.join(roomKey)
 })
 socket.on('upvote', function(roomKey) {
 io.to(roomKey).emit('upvote')
 })
 socket.on('gift', function(data) {
 io.to(data.roomKey).emit('gift', data)
 })
 
})

On the client side, it uses the socket.io swift client(https://github.com/socketio/socket.io-client-swift), the logic is also simple:

create, join, or close a room:

socket.on("connect") {data, ack in
 self.socket.emit("create_room", self.room)
}
socket.on("connect") {data, ack in
 self.socket.emit("join_room", self.room.key)
}
socket.emitWithAck("close_room", room.key)(timeoutAfter: 0) {data in
 self.socket.disconnect()
}

publish likes and comments events:

socket.emit("upvote", room.key)
socket.emit("comment", [
 "roomKey": room.key,
 "text": text
])

listen likes and comments events:

socket.on("upvote") {data ,ack in
 self.emitterView.emitImage(R.image.heart()!)
}
 
socket.on("comment") {data ,ack in
 let comment = Comment(dict: data[0] as! [String: AnyObject])
 self.comments.append(comment)
 self.tableView.reloadData()
}

About

Demonstrate how to build a live broadcast app.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Swift 59.3%
  • Objective-C 38.6%
  • JavaScript 1.6%
  • Ruby 0.5%

AltStyle によって変換されたページ (->オリジナル) /