Axis PTZ and Swiping

I got a funny request today on how to control Axis PTZ on a webpage that was running on a tablet. And by controlling the PTZ i mean by the gestures that are supported in many different tablets and smartphones. The Swipe!

It’s fairly easy to control the Axis PTZ devices since they all have a unified API. From Axis website: http://www.axis.com/files/manuals/vapix_ptz_52933_en_1307.pdf

 

I’m also a big fan of jQuery have used that a lot while I’m doing anything related to web development. It’s so easy to use and has a ton of plugins. A quick search on google today gave me TouchSwipe, a jQuery plugin for tablets. Awesome, this shouldn’t be any issue to hack together.

Requirements

  1. The webpage / webapp does not run directly on the camera so both MJPEG streaming and PTZ controlling must be done from within the app.
  2. It cannot run on any plugins but what Javascript and HTML5 allows.

Alright, lets start looking into the streaming part. Streaming MJPEG is super easy with the Axis devices on a web page all that is needed is:

<img src="http://username:password@axis-device/axis-cgi/mjpeg/video.cgi?resolution=640x480" alt="" />

Note: This will not work on IE, but who cares? We want this on tablets.

The next part is a little trickier. Nothing else but HTML and Javascript. Since the app is not running on the same webpage Cross domain scripting is not allowed. So how do we translate our swipe movement into a HTTP command that can be sent to the Axis device? The answer is an ugly but lovely hack called the <iframe>. Iframes can load whatever content you like from whatever source  you like. Without even asking why.  Why is this so good? Because the PTZ api is all HTTP GET. Boom! Easy enough.

Ok, we have all our pieces for our solution. MJPEG will work with our browser, SwipeTouch will trigger when a user Swipes and the PTZ can be controlled from an iframe.

SwipeTouch is super easy to implement, just take a look at this piece

 $("html").swipe( {
 //Generic swipe handler for all directions
 swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
 
 alert('Swiped '+direction)
 },
 //Default is 75px, set to 0 for demo so any distance triggers swipe
 threshold:75
 });
 });

So, here we are listening on swipe events on all of the webpage, we could do it on the image tag as well if we wanted but lets keep it on the HTML for now. When the swipe event is triggered we get the direction, distance, finger count and finger data. The direction is particulary interesting, it comes in up,down,left,right. It’s super convenient since the PTZ API also allows commands like ?move=[left,right,up,down].

This means that we can translate this super easy, have a look:

$('#swipeFrame').attr('src', 'http://root:pass@[ip]/axis-cgi/com/ptz.cgi?move='+direction);

Put that between in the swipe event and create an iframe what has the id swipeFrame and you’ll have Axis PTZ control that moves 25% of its field of view on each swipe. It’s not enterprice vms integration but certainly good enough for some basic checks from your Tablet!

This blog post requires some basic HTML knowledge to understand what’s going on as I didnt tell how to include the JS files or how to set up the actual html frame. If I was too messy in my write up, have a look at the source code 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *