Custom Web Portal that integrate with Avigilon Control Center Server. Can be accessed by popular modern browser. This Web portal is developed using Avigilon SDK provided by Avigilon as supplementary to their Enterprises license.

View Website

Avigilon Control Center Server

Avigilon Control Center Server is Video Management System (VMS) which provide system to manage Video output of CCTV System. It’s Key Features Include:

1. Video Storage Management
2. High Definition Stream Management
3. Video Processing (Motion Detection, Plate Number Recognition)

Avigilon Control Center can be installed on a Machine server . That server will automatically detect CCTV that connected on LAN. If needed, it can also add CCTV from WAN network by specifying it’s IP address to Avigilon Control Server. Connected camera will have it video stored in ACC server. That stored video can be requested on server. ACC server can also be used to handle streaming on camera. When Stream request are made, ACC server transmit newly processed video to requesting client.

Avigilon SDK

Avigilon SDK is SDK provided by Avigilon to build a program that can interact with Avigilon control server. With avigilon SDK we can build program to request frame, video, accessing ptz, and downloading video from ACC Server.

Avigilon SDK comes with enterprises license of ACC Server. With this SDK, building a web portal server to handle request from browser to ACC Server is made possible.

Schema of Web Portal

Web portal work as a service server to serve web client accessing some of functionality of avigilon control server / NVR. Aside from that function, Web Portal server has a landing page to introduce it’s product.

Web portal Act as gateway to client request with web client originated from internet.

Flow of Data described as follows:

A Client login with credential that available from NVR/Avigilon Control Server. After a client gets it’s credential, it can access web portal features. All Resource such as user data and video data is stored on ACC Server. Web portal will only redirect user login data to get authorize to ACC Server. Then after Authorization, Web portal able to retrieve camera data that it’s user had. 

Web Portal Feature

1. Display List of Camera from Avigilon Control Center Site

After logged in, a user can view list of camera that privileged to him/her. List of camera that can be viewed will include some basic information such as: Location of CCTV, Default Image Size, And description. The image displayed as list of CCTV is refreshed on each page request. By Clicking on one of image, a user can enter streaming mode for that specific camera. 

2. Real Time Video Streaming from avigilon control center connected CCTV

Streaming mode can be seen on image below. The Video is in m-jpeg format. When a user requested a live streaming action, server with first save it's request id and will start sending stream of images to that user. The Video streamed to a user is taken live or up to date from CCTV.

3. PTZ Control on Streaming

On CCTV that has PTZ to it, PTZ icon will appear and can be activated. To Activate PTZ control, a user can click PTZ icon and it will turned it's color green that indicates status as active. While PTZ control is activate, click, scroll, and drag-release which done inside the streaming video region will be handled and translated to control PTZ on camera. The control handled by PTZ function is as follows: 
- Click, will trigger movement of camera to move it's center of streaming video toward the position that clicked previously
- Scroll, will trigger zoom feature on camera.
- Drag and Relase, it will first form a transparent rectangle when dragged. Then when released, it will trigger relative field of view to rectangle. it will zoom in and move so that the streaming displayed will correspond the previously created rectangle. 

4. Download Stored Video from avigilon control center

The last feature is download. when a user click on download video menu, a pop up of download form will appear. That form contain date, length, and resolution of video that a user want to download. After a user fill that form and cilck generate download link button, server will then look for data in it's storage correspond to request form from user. If Avigilon Control Center Server hold that specified data, it will then export an avi video to the web portal server with same specification as requested by user. By that time, Download form will display the progress of exporting video that is done by web portal server. After proccess of exporting video is finished, a download link will appear to download that video. But if Avigilon Control Center Server don't hold that data, web portal server will display error message in download form. 

  • Web Portal Component

Video Streaming mechanism is performed using SignalR. SignalR is library for to develop realtime application. With SignalR, image data is transferred from server to client with continuity without periodic request from client. When a Client requesting Stream from Web Portal server, Web Portal server call function IStreamCallback provided by Avigilon SDK to provide stream of images from ACC Server. For each retrieved images that retrieved from IStreamCallback Function, Web Portal Server will send SignalR message that represent the image to specific client connection ID that call this particular streaming event. After stream process is stopped by the client by closing streaming page or login out, then server will detect this closing activities and stop streaming live image to client.

PTZ Control Mechanism is performed using AJAX to control streaming properties that is streamed to Client. When PTZ control is active, some javascript function is activated to monitor the activity that happen to control image streaming process. For Example, Scrolling mouse where cursor in top of streaming image and PTZ button is active will make camera zoom in or zoom out. For each zoom that a user do, an ajax request is sent to Web Portal server that contain instruction to do PTZ properties manipulation specific for that streaming camera.

Bolt CMS is used to manage landing page of Web Portal. Bolt is an Content Management Tool, which strives to be as simple and straightforward as possible. It is quick to set up, easy to configure, uses elegant templates, and above all: It’s a joy to use. Then, some customization is done to bolt CMS to match the style and functionality that needed in Web Portal Project 

Dashbord that is created will have some function as follows:

  1. Pages: To Edit content from landing page (Text, Image).
  2. Sliders: To Add, Edit, or Delete background image on landing page.
  3. Nvr: To Add, Edit, or Delete information about nvr which displayed on login portal page. 
  4. Advertise: To Add, Edit, or Delete advertise that will be displayed on advertise box on web portal.
  5. Social Media: To Edit link social media, and activate or disactivate it.
  6. Configuration =>
  7. Sub-menu ‘users & permissions’:  Add User and manage user privileges.
  8. Sub-menu ‘clear the cache’: Clear Cache on web portal.
  9. Sub-menu ‘change log’: To see log of change that is done by developer.
  10. Sub-menu ‘system log’: To see log if change that is done to backend menu. 
  11. Uploaded files: To Manage image files that is uploaded to server.


Tools We've Used




Visual Studio

Avigilon SDK



— Copyright © 2019 PT. Comestoarra Bentarra Noesantarra —