Introduction page for : Javascript based ptz control for axis P5534
goal for the example
The goal of this example is to show how to make a simple ptz control overlay for axis cameras using only pure javascript.
The example is made for the axis P5534 camera, but can be easily adapted (or will work 100%) for other ptz axis cameras.
The example page is called ptz.html and used 2 parameters in the url:
- control : the ip address of the camera to send ptz commands to
- video : the ip address of the camera to get the mjpeg video stream from
ptz.html?control=[IPNUMBER OF CAMERA]&video=[IPNUMBER OF CAMERA]
PTZ axis example : ptz.html?control=192.168.0.245&video=192.168.0.245 (working for daniel/noterik setup)
file structure
The example consists of 5 files:
- ptz.html : the main html page
- ptz.css : the css file for styling the page
- constants.js : the file with all constants (camera commands, button states, etc)
- support.js : the file with all support functions (set button states, send ptz commands, etc)
- handlers.js : the file with all event handlers (button clicks, mouse events, etc)
All the gfx are made by noldus and in svg format and can be found in the svg folder. These used to work with a viewport
in react but in javascript i could not that to work correctly so i made multiple copies and using a _[state] select the one
we need controlled from the support.js
I feel its best not to write a manual on how to use the app but to show it in a video so i did a screencast showing how to use it and how it works.
video screencast : click here to see the video
Made by Noterik for Noldus to act like a PoC (proof of concept) by Daniel Ockeloen with support/review from Pieter van Leeuwen