Tag Archives: javascript

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!

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

The webpage / webapp does not run directly on the camera so both MJPEG streaming and PTZ controlling must be done from within the app.

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:

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.

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].

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!