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!

, , , , ,

GDC12 – Game Developer Conference 2012: a Post-Mortem

March 30th, 2012 by Elliott Mitchell

GDC12- AaaaaAAaaaAAAaaAAAAaAAAAA!!! (Force = Mass x Acceleration) by Dejoban Games and Owlchemy Labs, played by Oleg Pridiuk (Unity Technologies) as Ichiro Lambe (Dejobaan Games) and Deniz Opal (Cerebral Fix) watch - Photo Elliott Mitchell (Infrared5)

This year’s Game Developer Conference (GDC) 2012 was networking, networking and more networking.

Within a one mile proximity of the San Francisco Moscone Center, hordes of game developers and artists could be seen in the streets, cafes, bars, mall food courts, and hotel lobbies and heard talking shop, showing off their games, catching up with friends, debating the ethics of cloning social games from indies, shopping to find publishers, contractors and jobs. It was an intense meeting of the minds of people who make games in the streets of San Francisco.

Google Huddle chats, Google Groups email, shared Google Calendars and Twitter were all utilized very effectively to make the most of GDC. Multitudes of varied networking opportunities streamed in real-time through my iPhone 24/7. The level of my success at GDC was determined by how much networking I could possibly handle. With the help of my friends and the social/mobile networks,  success was at my fingertips.

In addition to the obsessive networking, there were many other valuable aspects of GDC. I’ll briefly highlight a few:

Jeff Ward’s Pre-GDC Board Game Night

GDC12- Elliott Mitchell (Infrared5), John Romero (Loot Drop), Brenda Garno Brathwaite (Loot Drop) & Elizabeth Sampat (Loot Drop) playing games at Jeff Ward's (Fire Hose Games) 3rd Annual Pre-GDC Board Game Night - Photo Drew Sikora

Jeff Ward (Fire Hose Games) knows how to get an amazing collection of game designers and developers together for a night playing board games. This was one of my favorite events of GDC. When else would I ever be able to play board games with John Romero (Loot Drop) and Brenda Garno Brathwaite (Loot Drop) while enjoying hors d’oeuvre and spirits? The crowd was a rich blend of artists, game developers, game designers, indies, students and superstars. There were so many new and classic games to play. I personally played Family Business and a really fun indie game prototype about operating a successful co-operative restaurant. Walking around after playing my games, I observed a host of other cool games being played and pitched. I’ll definitely be back for this event next year.

Independent Games Summit and Main Conference Sessions

GDC12 Ryan Creighton (Untold Entertainment) presenting Ponycorns: Catching Lightning in a Jar- Photo Elliott Mitchell (Infrared5)

Many session topics were super interesting but it wasn’t possible to attend all of them. Luckily, those with a GDC All-Access pass have access to the GDC Vault filled with recorded sessions. Here are a few sessions I saw which I found useful and interesting:

*Perhaps a Time of Miracles Was at Hand: The Business & Development of #Sworcery (Nathan Vella – Capy Games)

*The Pursuit of Indie Happiness: Making Great Games without Going Crazy (Aaron Isaksen – Indie Fund LLC)

*Ponycorns: Catching Lightning in a Jar (Ryan Creighton – Untold Entertainment)

*Light Probe Interpolation Using Tetrahedral Tessellations (Robert Cupisz – Unity Technologies)

Independent Game Festival Contestants on the Expo Floor

I played a bunch of the Independent Games Festival contestants’ games on the Expo floor

GDC12 - Alex Schwartz (Owlchemy Labs) playing Johann Sebastian Joust (Die Gute Fabrik) - Photo Elliott Mitchell (Infrared5)

before the festival winners are announced. There was a whole lot of innovation on display from this group. I particularly loved Johann Sebastian Joust (Die Gute Fabrik), a game without graphics, and Dear Esther (thechineseroom) which is stunning eye candy. Check out all the games here.

12th Annual Game Developer Choice Awards

I was super stoked to see two indies win big!

Superbrothers: Sword & Sorcery EP (Capy Games/Superbrothers) took the Best Handheld/Mobile Game award.

Johann Sebastian Joust (Die Gute Fabrik) won the Innovation Award.  Johann Sebastian Joust is worthy of it’s own blog post in the future.

EXPO FLOOR

* Unity booth – Cool tech from Unity and development venders partners showing off their wares
* Google Booth – Go Home Dinosaurs (Fire Hose Games) on Google Chrome
* Autodesk Booth (Maya and Mudbox)
* Indie Game Festival area ( All of it)

GDC12 - Chris Allen (Brass Monkey) and Andrew Kostuik (Brass Monkey) at the Unity Booth - Photo by Elliott Mitchell (Infrared5)

GDC PLAY

Lots of cool tech at the 1st Annual GDC Play. Our sister company, Brass Monkey, impressed onlookers with their Brass Monkey Controller for mobile devices and Play Brass Monkey web portal for both 2d and 3d games.

UNITY FTW!

Last but not least, the most useful and pleasurable highlight of GDC was face time with the Unity Technology engineers and management. Sure, I’m on email, Skype, Twitter and Facebook with these guys but nothing is like face to face time with this crew. Time and access to Unity’s founders, engineers, evangelists and management is worth the price of GDC admission. Can’t wait until Unite 2012 in Amsterdam and GDC13 next March!

, , , , , , , , , , ,

The Evolution of Infrared5

June 21st, 2011 by Keith Peters

I joined Infrared5 back in November 2007. Those were very different times. We were a hard core Flash shop, focusing on Red5 Server based applications and Papervision3D. The iPhone had been out for less than six months and only Apple could write apps for it. The iPod Touch was just a few weeks old. Nobody had heard of Android. Tablets were just a failed venture by Microsoft that most people had forgotten about a few years before. Nobody was particularly excited about HTML (5 or otherwise) or JavaScript. If there was any perceived threat to Flash at the time, it might have been Silverlight, but nobody was particularly worried about that.

Now, the landscape is very different. I’m not going to say Flash is dead. I don’t think it is. I don’t even think that it is dying, per se. What is happening though, is that there are so many other cool and interesting things out there now, that Flash has lost its place in the spotlight for many developers. Also, I think that Flash initially had a very low learning curve and very little barrier to entry. A lot of Flash developers grew up as Flash did, learned real programming, object orientation, design patterns, best practices, etc., and were then able to branch out to other languages and platforms.

I have to say, that Infrared5 has not only rolled with the changes very well, but has completely embraced the change. I think virtually all of our front end developers are now seasoned iOS developers. Several have embraced Android development as well. We have Windows Phone 7 knowledge (mostly me), and our 3D platform has moved from Papervision to Unity. We’re doing HTML5 stuff as well as Flash and Flex sites, iPad apps, kiosk applications. Many of our projects even span multiple platforms – a Flex 4 app with an HTML5 public facing site, Flash or Unity 3D games with a companion iPhone app via Brass Monkey.

The company’s tag line is “Yeah, we can build that.” I’d say we’ve lived up to that.

In closing, I ran across this quote the other day that I really loved. It comes from a free on line book, “Learn Python the Hard Way”, by Zed A. Shaw, which you can find here: http://learnpythonthehardway.org/ . In the last section called “Advice From An Old Programmer”, he says:

“What I discovered after this journey of learning is that the languages did not matter, it’s what you do with them. Actually, I always knew that, but I’d get distracted by the languages and forget it periodically. Now I never forget it, and neither should you.

Which programming language you learn and use does not matter. Do not get sucked into the religion surrounding programming languages as that will only blind you to their true purpose of being your tool for doing interesting things.

Programming as an intellectual activity is the only art form that allows you to create interactive art. You can create projects that other people can play with, and you can talk to them indirectly. No other art form is quite this interactive. Movies flow to the audience in one direction. Paintings do not move. Code goes both ways.”

The full quote is here: http://learnpythonthehardway.org/book/advice.html

, , , , , , ,