Realtime TfL Traffic Camera API

We’ve built a realtime API around the TfL traffic camera feed for London. With it you’re able to view an automatically-updating feed of images from any camera in the city.

Check out the demo and continue reading to learn more about the why and the how.

You don’t have to live around any city long to realise that traffic is a part of day-to-day life. Even if you don’t drive or take the bus, traffic is something you just can’t avoid. It’s noisy and it’s slow. It’s generally not much fun. So what can realtime do to help ease the pain?

A lot of realtime data sources and APIs exist to try and solve problems related to traffic. For example, realtime pollution data is used to highlight areas of cities that are experiencing above-average levels of air pollution due to traffic. Another example is live traffic disruption data being used to alert drivers about immediate and approaching issues so they can avoid them. In both cases, data about traffic is being used in realtime to make the lives of citizens a little better than they could be.

One area of traffic data that is often overlooked is realtime traffic camera feeds. These are commonly seen when you watch the news on TV, or check out the travel advice maps on the BBC. The idea is that they help you better plan your journey to and from work.

The problem with the official traffic camera API in London is that, although its many-hundred cameras cover a vast area of the city, the camera images are static and the API isn’t the easiest to consume. This can be improved.

Introducing the Realtime TfL Traffic Cameras API

We’ve created a realtime API for consuming the traffic camera feed from TfL. Not only is the API simpler to use but it also lets you know as soon as a camera is updated by TfL.

Knowing as soon as a camera is updated allows you to do a number of things that weren’t possible with a feed of static camera images, such as:

• Saving bandwidth by only needing to request a new image for cameras you know have been updated
• Seeing the most recent camera image even if it updates while you have the website open
• Creating a time-lapse of traffic flow over a long period of time (like we did with the gif)

We’re sure there’s much more and that’s why we’re releasing this API for others to take for free and use as they wish.

Using the API

The Realtime TfL Traffic Camera API has been built with simplicity in mind. All you need to do is subscribe using one of Pusher’s free platform libraries and decide what you want to do with each camera update.

Here’s an example that uses JavaScript and outputs the URL of the first camera in each update to the browser console (you may have to wait a few minutes for the next update):

bash
1<!-- Include the Pusher JavaScript library -->
2<script src="http://js.pusher.com/2.2/pusher.min.js"></script>
3
4<script>// <![CDATA[
5  // Open a Pusher connection to the Realtime TfL Traffic Camera API
6  var pusher = new Pusher("f1b8177ecbc7a66de0c7");
7
8  var channel = pusher.subscribe("cameras");
9
10  var tflURL = "http://tfl.gov.uk/tfl/livetravelnews/trafficcams/cctv/";
11
12  // Listen for new updates
13  channel.bind("cameras-update", function(cameras) {
14    var camerasArr = cameras.split("|");
15    console.log(tflURL + camerasArr[0] + ".jpg");
16  });
17// ]]></script>
Copy

You can see a working, interactive code example of this on JSBin. It’s not a huge step to take things from here and start visualising new stories in some way.

Try the demo and build your own application

We’ve built a demo that gives you a map of all the traffic cameras in London. Click on as many cameras as you want and they’ll refresh as soon as an update occurs (~3 minutes).

Give the API a go and see what else you can make with it. We’re sure there’s more to traffic cameras than being displayed on a map.

Thinking of making something with this free, no-limits API? Let us know when you have, we’d love to see it!