Build Periscope in 10 Minutes

November 30th, 2015 by Chris Allen

Create_header_2

With live streaming becoming increasingly prevalent in 2015, developers are focused on creating applications to address the public’s fascination with streaming media. Periscope is the prime example of such an application and the sheer size of Periscope’s user base and class-leading engagement metrics validate its dominance in the space.

But what does it take to build a live streaming and communication platform such as Periscope, with the capability to broadcast to one hundred thousand or even one million subscribers? What if I told you that you could build a live streaming application with Periscope-like functionality and scalability in just 10 minutes?

Before we created Red5 Pro it took some serious effort to build this kind of server-side infrastructure and tackle the high level of complexity to build a native Android and iOS video encoder/decoder that works with the server. We saw this trend of a new kind of mobile app that connects people in real-time, and we saw these early adopters cobble together inefficient software wasting tons of time and energy. We couldn’t allow this to happen anymore, so we decided to make it easy for developers. With Red5 Pro, you truly have the ability to build the guts of the next live streaming phenomenon in a matter of minutes, and here’s how:

Let’s first start with all the pieces, and what you would need to build if you were to do this from scratch.

The Fundamentals

1. Publish from the mobile client:

  • Access the camera

  • Encode the video

  • Encode microphone data

  • Negotiate a connection with a media server

  • Implement a low-latency streaming protocol for transport

  • Stream the data to the server

2. Intercept with a media server

  • Intercept the stream

  • Relay to other clients

      and/or

  • Re-stream to a CDN (adds latency)

  • Record the stream (optional)

3. Implement client side subscribing:

  • HLS in WebView (even more latency)

and/or

  • Setup connection with media server

  • Implement streaming protocol

  • Mix the audio and video

  • Decode video/audio

  • Render video and play the audio

 

*Note-this is actually a simplified list of all the tasks involved. Try doing this on multiple threads and getting it to perform well; it is complicated! It’s truly a rabbit hole that most developers don’t want to venture down. Given the awesome tools and libraries that exist for us developers, we thought that it was ridiculous that an easy-to-use and extensible live streaming platform just didn’t exist. That’s why we built Red5 Pro.

 

Red5 Pro to the Rescue

Let’s uncomplicate this. The Red5 Pro Streaming SDKs provide what we think is an intuitive and flexible API to remove the complexity while retaining tremendous control if you need it. Let’s take a look at the classes our SDKs provide. (note that they are the same on Android and iOS).

Graph

Let’s step through an example using these classes, piece by piece.

The Publisher

R5Configuration:

Red5Pro_tools

The first step is to create an R5Configuration. This class holds the various data used by your streaming app. It contains things like the address of your server, the ports used, protocols, etc. In this example we are connecting to a server running at 192.168.0.1 on port 8554 via the RTSP protocol. This Red5 Pro server has an app called “live” running on it, and that is what we want to connect to based on the context name. And finally we are setting the buffer time to half a second.

iOS

 

Android

 

R5Connection:

Red5Pro_links

Next, you create an R5Connection object, passing in your configuration. This establishes a connection to the Red5 Pro media server.

 

iOS

 

Android

 

 

R5Stream:

Red5Pro_stream

Now you create a stream object passing in the connection object you just created. Note that the R5Stream is also used for incoming streams, which we will get to in a bit.

 

iOS

 

 

Android

 

R5Camera:

Red5Pro_camera

Next we create a camera object and attach it to the R5Stream as a video source.

 

iOS

 

 

Android

 

 

R5Microphone:

Red5Pro_microphone

Then we create a microphone object and attach it to the stream as an audio source.

 

iOS

 

 

Android

 

 

R5VideoView:

 

Red5Pro_view

While it’s not a requirement to publish a live stream, we find it useful to provide a preview for the user of their video being streamed from the camera. This is how you set that up.

 

iOS

 

 

Android

 

R5Stream.publish():

Red5Pro_publish

Finally the last step for the publisher is to publish the stream using a unique name that the subscriber can subscribe to.

 

iOS

 

 

Android

 

The record type parameter tells the server the recording mode to use on the server. In this example we are setting it to live, meaning it won’t record the stream on the server.

 

Here are your other choices.

R5RecordTypeLive – Stream but do not record

R5RecordTypeRecord – Stream and record the file name. Replace existing save.

R5RecordTypeAppend – Stream and append the recording to any existing save.

If you compiled and ran this app with it configured to point to a running Red5 Pro server, you would be able to see it running in your browser. Open a browser window and navigate to –> http://your_red5_pro_server_ip:5080//live/streams.jsp to see a list of active streams. Click on the flash version to subscribe to your stream.

 

LiveStreaming.png

The Subscriber

Now that we’ve built the publisher we have established a live stream being published to the server. Yes, we did see the stream in Flash, but in order to consume that stream on mobile we need to build the subscriber client. Let’s dig into that now.

 

R5Configuration:

Red5Pro_tools

Just as before, we setup a configuration object holding the details of our connection and protocols.

 

iOS

 

 

Android

 

 

R5Stream:

Red5Pro_stream

Then, like in the publisher, we set up a stream by passing in the configuration into the constructor.

 

iOS

 

 

Android

 

R5VideoView:

Red5Pro_view

This is the step where things deviate just a little from the publisher. We still set up an R5View, but this time we want to use it to display the incoming stream

 

iOS

 

 

Android

 

 

R5Stream.play():

Red5Pro_play

Finally, we tell the stream to play by using the play method and passing in the unique stream name that the publisher is using.

 

iOS

 

Android

 

Voila, you can now build your own one-to-many live streaming experience, all within minutes with the help of Red5 Pro. What do you think, are there ways we could make this even easier? We love hearing feedback, so let us know in the comments or email us directly. Happy Coding!

, , , , ,

What We’ve Quietly Been Working On: Red5 Pro – Going Back to Our Roots

November 4th, 2015 by Chris Allen

red5pro_live_broadcast.png

 

The Times They Are A Changin’

As you might have noticed, we recently updated our website to better reflect our new direction at Infrared5. We are now focused on the Red5 Pro Server and SDKs for iOS and Android that enable developers to build experiences like Meerkat or FaceTime in a matter of minutes. Yes, you read that correctly – the ability to create mobile streaming applications in minutes. We originally started this company because of the tremendous reception and interest in the Red5 Open Source Media Server. For those that aren’t familiar with the project, our initial team, composed of John Grden, Paul Gregoire, Dominick Accattato and myself, worked with other developers around the world to reverse engineer the RTMP protocol and create an open source alternative to Macromedia’s Flash Communication Server. This project eventually became Red5. Two years later as the project grew, we noticed strong demand from developers who needed custom work and consulting on Red5 – so much so that we decided to quit our day jobs and start Infrared5. Over the years though, our focus drifted away from exclusively building live streaming solutions with Red5.

Games and Brass Monkey

Our developers at Infrared5 have always been interested in disrupting the present and pushing the boundaries with new technologies. One of these instances was the Unity game engine. Andy Zupko and John Grden really pushed us in this direction as early adopters of the platform. We built many great games on Unity including the Star Wars Trench Run, Hasbro’s Game of Life Zapped Edition, and most recently the augmented reality Force Trainer feature in the official Star Wars app. Even though we are no longer focused on games, our passion for game design and the unique experiences they enable really influence our product design. We want to make using Red5 Pro fun and enjoyable for developers, which in many respects isn’t far off from the goal of a good game.

b-pre-connect

During this time Rebecca led Infrared5 not just in games projects, but also on IoT and streaming projects that leveraged the open source Red5. Another project that Infrared5 invented and spun off was our smartphone-as-a-game (SAAG?) controller product, Brass Monkey. I moved over to lead that company as CEO in 2010, but eventually I came back to Infrared5 full time, as we weren’t able to effectively convince people to pay for smartphone controlled, browser-based games. Note though, we kept the technology, and it’s now part of Red5 Pro as the Second Screen SDK.

Going Back To Our Roots

After Steve Jobs announced the demise of Flash with the lack of support in iOS, and the eventual decay of support for Android, we came to the conclusion that we would solve the “Get off of Flash Problem” for live streaming mobile apps. We heard from a lot of our consulting clients that they wanted this, and instead of trying to build custom solutions over and over again, we decided Red5 needed an upgrade. Mobile SDKs for RTMP are mostly fragmented, hard to use, clunky and generally just a mess. We have now made it our mission to make building a live streaming app for iOS and Android efficient and intuitive. Whether it’s a one-to-many live broadcasting app like Periscope, a many-to-many conferencing app, or a one-to-one video chat application, we want to make it so incredibly simple that any developer can do it.

The Future: WebRTC, Second Screen, IoT

While migrating existing live streaming Flash apps to our new platform is super helpful, what we are most excited about is our vision for the myriad applications of the Red5 Pro technology.

An ever-increasing number of browsers are adding support for WebRTC; heck, even Microsoft Edge is getting there! We think this is clearly the future for in-browser streaming, and we are currently working on making Red5 Pro speak this protocol. We see the Red Pro Server as the underlying hub that is able to talk to all different streaming mobile apps and browser apps with minimal latency and outstanding performance.

However, the phones we carry in our pockets, the laptops sitting on our desks, and the tablets we browse while sitting on the couch are truly just the beginning. Other devices with cameras that can connect to the internet are the next big thing in live streaming. We are thrilled to make Red5 Pro integrate with all of these Internet of Things devices. The possibilities are endless: imagine fully immersing yourself in a live concert via your VR headset streamed live from a 3D camera at the venue, or enabling live video streaming among military troops over mesh networks going to their AR headsets. There are countless things for developers to build in this space, and we’re excited to see how we can power them through Red5 Pro.

Finally, we think that the second screen experiences like what we started with Brass Monkey have huge potential for changing the way people interact with technology. Not only can you as a developer turn phones into game controllers, but you can also create new banking software that enables your phone to interact with and take away information from a screen in bank branches of the future.

red5pro_secondscreen

…And There’s More!

Of course we can only think of so many scenarios of how our tech can be applied. The true innovation will be done by what you as a developer create with it. What would you build with Red5 Pro? Let us know in the comments. Much more coming your way soon!

, , , ,