Yalantis: iOS, Android And Web App Development Company

What Technology Powers Periscope's Live Video Stream?

New concepts in the world of mobile development attract a lot of users, but these new concepts also attract developers who are eager to master new technologies. How many taxi apps were launched following Uber’s success? How many photo editing apps hit on the market after Instagram?

Video-driven apps are no different. Periscope is the new big name in the world of video-driven apps. But it’s just getting started. We decided to see what technology is behind Periscope application. Streaming video technology app development is getting more and more popular among startups.

Periscope lets viewers see the world through the eyes of others. The app gained a million users within the first ten days of its launch on iOS, and gained many millions more after its release on Android. As of August 2nd, 2015, Periscope had more than ten million accounts.

What can a user do with Periscope, and what technologies power Periscope?

Periscope has four essential features:

  1. Video streaming
  2. Maps and geolocation features
  3. Real-time messaging
  4. Engaging animations

Each of these features is implemented with a technology stack that creates a smooth and engaging user experience. Let’s look at each feature – and the technology behind it – separately. This will be useful for anybody who want to know how to develop video streaming app.

Periscope video streaming technology

[Image source: Mashable]

Video streaming

The most important feature of the app, video streaming lets Periscope users interact on a completely different level from previous popular services like Instagram and Snapchat. If you want to develop a video streaming apps, you need to know how to achieve high quality video streaming.

How can we achieve high quality video streaming?

Viewers want fast and smooth streaming, and an app like Periscope can only become successful if the technologies behind it can keep up with expectations. Periscope uses GPUImage, a framework for processing video frames using the GPU.

The GPUImage framework is a BSD-licensed iOS library that allows you to apply GPU-accelerated filters and other effects to images, live camera video, and pre-recorded video. This is essential if you want to create a live streaming app.

GPUImage allows developers to write their own customized filters. And while it has a simpler interface, GPUImage currently lacks some of the more advanced features of Core Image such as facial detection capabilities. Core Image currently outpaces GPUImage for more complex operations like Gaussian blurs at larger radius, however.

GPUImage compares favourably to CoreImage when working with video, however. On an iPhone 4 it takes only 2.5ms to get a single frame from the camera, apply a gamma filter to it, and display it. This same sequence, with CoreImage, takes 106ms.

In short, the GPUImage framework gives Periscope almost real-time streaming with high video quality. Developers might prefer GPUImage over more complicated native OpenGl solutions for its  simplified interface written in Objective-C.

Before streaming video, we first must encode it. The Periscope team found a ready-made solutions provided by GDCL. Most of them were associated with video encoding using hardware acceleration. GDCL also support frame re-ordering, which can improve compression ratios by allowing bi-directional prediction. Code samples are available here under the attribution license.

GDCL technology for video encoding gives developers a ready-made solution that can easily be added to existing code. Viewers also benefit from the great video streaming performance offered by GDCL technologies.

How to make an app like Periscope

[Image source: Medium]

Geolocation and Maps

Periscope lets you look into the lives of others. Part of the attraction is related to the app’s global user base. What could be more exciting than having free access to all kinds of events happening all over the world? 

In Periscope, whenever streamers share their video live, they can opt to share their location too. The Periscope team wanted viewers to be able to locate any stream on the map in a matter of seconds. Gelolocation is essential for 

Another Periscope feature related to geolocation is an iOS-only feature that uses the 3D Touch on Apple’s newest iPhones. It’s called “Teleport” and it creates a an effect of immediate immersion, allowing people to start watching a video stream right away. On iPhone 6s and 6s Plus, the Periscope icon features a shortcut that includes broadcast, mutual broadcast (which goes out to friends who have followed you back) ), and search.

Geolocation-related features were implemented with the help of MapKit and CoreLocation iOS frameworks. The MapKit framework provides an interface for embedding maps directly into windows and views. This framework also helps developers annotate maps, add overlays, and perform reverse-geocoding lookups to determine a location for any given map coordinate.

The CoreLocation framework can also determine the current location or heading of a device. Developers can also use CoreLocation to define geographic regions and monitor when a user crosses boundaries of those regions.

Periscope relies on native Apple maps. Pins are placed on the map to indicate the location of video streams. And the designers of Periscope used a smart clusterization technique to make sure that the map is manageable even when there are a lot of streams in a small geographic space (say, in Times Square or at a concert). Clusters of ten or more streams are displayed as a number instead of as individual pins. This makes it much easier to navigate.

Since iOS 4.2, MKMapView has offered a method for pin clustering called (NSSet *) annotationsInMapRect:(MKMapRect)mapRect. So the good news is that you could add a similar feature to your app without necessarily needing a third-party framework.

Being able to quickly locate interesting content on a map is arguably Periscope’s killer feature.  

Real-time messaging

While it’s fun to have a window to faraway parts of the world, what people really want is to participate in a small way in the lives of others who are a plane flight away. Periscope, like other social apps, provides their users with an efficient messaging solution that doesn’t interfere with video streaming – the app’s most important feature. In Periscope, messages appear at the bottom of the screen and move up while video streams continue to play in the background. When streamers get instant feedback from their audience, they’re more likely to keep streaming and stay engaged with the app.

Periscope needed a reliable solution for instant messaging and push notifications. PubNub fit the bill. PubNub is a low-latency messaging solution for any device, on any platform, anywhere in the world. It’s also a simple and reliable tool for developing automated push notifications. PubNub has several significant advantages over its competitors:

It allows large size messages (we are talking up to 32KB of notification payload!), it works across various platforms and devices and, most importantly, PubNub doesn’t drain the battery. Video-related apps are known to drain batteries fast, which is very inconvenient. Having a messaging solution that doesn’t kill the battery was a very good call on the part of the Periscope team. All this makes it really useful when it comes to video streaming app development.

how do you build video streaming like Periscope?

[Image source: Periscope blog]

Animations

The Periscope team realised that for an app banking on entertainment and socializing it’s not enough to provide users with purely text-based communication. Comments are essential, but people also want an engaging animated interface. Periscope introduced five types of animations for distinct features of the app:

  1. Flying hearts of various colours – an animation that appears on the right side of the screen when somebody likes a video stream. This animation is complemented by a notification that indicates when somebody has joined the stream. 
  2. Map animation – lets viewers toggle between a map of the world and a list of streams.
  3. Animated gradients at the top of the screen and in the navigation bar.
  4. Pin clustering animation. Video stream creation animation.

To provide an interactive user experience, Periscope uses Pop by Facebook – an animation engine that’s great for physics-based interactions.

Pop is an extensible animation engine for iOS, tvOS, and OS X. In addition to basic static animations it supports “Spring” and “Decay” dynamic animations, making it useful for building realistic, physics-based interactions. The “Spring” animation gives elements an attractive bounce. “Decay” brings movement to a slow halt. Both animations take velocity as an input and are solid options if you want to create a realistic response to user gestures.

Engaging animations contributed to the popularity of Periscope. People love to see how an app reacts to their actions.

Creating an app like Periscope is a complex process, and requires a lot of effort at the planning stage. At the same time, most of the technologies described above are easily accessible.

Now that you know how Pericope works, perhaps you’ll be inspired to implement some of these technologies in your own product.

Also check out:

Insights

Be Like Uber – Build Like Uber. What Is the Uber App Made From?

Insights

Video Recording and Video Editing App Development: Top Performers

Tech

Video Recording App Development: How We Built Instagram for Videos

Tech

Koloda Tinder-Like Animation Version 2. Prototyping in Pixate and Development in Swift

Tech

How to Process Audio for Your Android project

Ready to work with us?

We have everything you might ever need to create a mobile solution that can attack the market and win.

Contact us