So you want to chat with the french President on Periscope?

Edit 03/03/2016: Twitter has deleted history. It appears that the history is available for 48h. After when you call the history public API, you get a malformed message, which looks like:

eventcache.go:104 get events from room=1BRJjapnwegGw err=eventcache.go:221 no events found err=not found/err=not found/err=eventcache.go:221 no events found err=not found/err=not found

A demo of retro engineering showing how to access data that are apparently no more accessible using: Chrome, node, tonicdev and codepen. Hope you’ll like the journey.

The 1st March 2016 the frenchPresident made a apparition on Periscope, the live video app from Twitter. Periscope is very engaging. It display a live video feed and allow user to react live at what they see and hear. You can throw heart just by tapping your screen, and of course you can write comments.

Of course immediately few people connected and join the live to throw hearts and insult the french President. The medias (Figaro, Huffington Post, etc.) have talked about a fail and l’Élysée said it was a practical exercice. Well I say, let’s see what the cloud has inside.

Our feed of interest is here : https://www.periscope.tv/w/1ypKdWqyPOgxW

The ID

When you have something on Internet, you always have an ID. It’s like the one you have on your identity card. It is uniq and it allows to identify the object of interest somewhere on the network. Somewhere is frequently a database, which is distributed among several servers. The ID here is:

1ypKdWqyPOgxW

This is our target. Now let’s see what happen when you play the periscope video:

You will notice in the right panel green bars and other colors. This is what we call request. A request is something the browser (Chrome, firefox, edge) ask to the server. When we hit play, the periscope app ask for chunk of images and video, and metadata. This metadata are what we are looking for. They contain information about people :

  • joining the live
  • leaving the live
  • commenting

The resume of this action looks like this:

requests made while watching a periscope feed

When you are looking at requests, you want to find the black sheep. The black sheep is the different thing that will catch your attention. So here, it is almost evident: history.

The history request

The history requests looks like this:

https://chatman-eu-central-1.periscope.tv/k=1ypKdWqyPOgxW/chatapi/v1/history (spoiler, clicking on this link won’t bring you any data)

and contains tons of information.

First, we guest that the chatman-eu-central-1.periscope.tv is a server which contains chat data.

Second we see that the request use the ID 1ypKdWqyPOgxW, we already talk about.

Finally we are asking something: chatapi / v1 / history… So let’s guess again what we are talking about:

  • chat
  • version of the chat API (v1)
  • history (of the chat)

As you can learn it is very verbose.

Lets continue with chrome to look what is inside:

JSON inspector on the history

And a much readable (for coders) version here.

This is what we call a JSON. It is a way to structure data and to save them. When you navigate on Internet you leave mark of your browsing and your action. This little chunks are frequently saved in this kind of structured data.

Inspect the JSON

The request is a method POST. It could have been a GET or a PUT or an OPTIONS. It is like when you want to open a door, you can either pull or open it. When you want data, you normally GET and when you update you POST. Here the devs from Twitter choose to POST when you need data.

This means that you have to follow your request with a PAYLOAD. It is like a message with multiple line of information ordered in fields :

So our fields are : access_token, cursor, limit, since. This is the only things we need to access to the history. Let’s make a request live using node, and following the standard code convention:

You can see it live here: https://tonicdev.com/gabrielstuff/periscopelive

What is great about tonicdev is that you can get a gateway or mock an API without needing to run your own server. So let’s publish this endpoints to make it available to display user from this periscope live.

Endpoints is here: https://tonicdev.io/gabrielstuff/periscopelive/branches/master/history

Let’s consume the API

We will use codepen for simplicity sake

From there, you can fetch data since 0 to the full length of the periscope. The codepen refresh every 5 secondes to show the content. You can see the rage coming.

From there you can imagine, dataviz of the periscope, studies of people location. Yes the geolocation is available as many people use Periscope from their mobile phone and thus share their lat and long.

Hope you enjoyed.