[Project] Control of CCTV using Browser

◆ Summary

 

 

 

 

---

 

◆ Problem Situation

A large number of CCTVs must be operated simultaneously in operation.

Existing CCTV control software can't perform this function, so it is inconvenient for CCTV surveillance soldiers to match them one by one.

Existing software often occurred monitoring and operation failure when the server computer overloaded.

 

---

 

◆ Requirements

CCTV simultaneous operation 

For example, server time synchronization and monitoring direction initialization(move to origin))

Accessing and manipulating specific CCTV web pages

 

---

 

◆ Restrictions

Software language restriction due to network restrictions

Only CCTV IP can be accessed because of a closed network.

Can't install software language.

There are various CCTV production companies, and each company has different characteristics and websites.

 

---

 

◆ Solutions

HTML, CSS, Javascript-based CCTV manipulation web software production using pre-installed Internet Explorer

Reason for adoption: Among the software languages, HTML, CSS, and Javascript is embedded in IE so that can be written without installation.

 

---

 

◆ Result

Software (GitHub link to be added)

 

User's Manual (How to use)

 

1. Click the right rectangle and input the desired number (CCTV number) and select the CCTV Type on the left. You can manipulate entered CCTV by pressing a keyboard

• Enter → Access the entered CCTV page (displayed at the middle left) 
• Ctrl + 0 (Number pad) → Execute saved the group* motion of  entered CCTV
• Ctrl+Delete / Insert (Key Down) → Zoom In / Out the entered CCTV 
• Ctrl+End / Home → Turn IR (Infrared Mode) On / Off the entered CCTV 
• Ctrl + Arrow key (Key Down) → Operate in the corresponding direction of the entered CCTV
• Ctrl + 1~9 (Number Pad) → Execute saved preset* motions of entered CCTV

 

Term Description

• Preset*: Remembered direction to watch (Can be set from the relevant CCTV web address (IP))
• Group*: Repeat user setting operation by connecting multiple presets (Can be set from the relevant CCTV web address (IP), too)

 

2. CCTV Home button (a button that sets multiple CCTVs in the desired direction at once),

When you click this, the CCTVs registered in the software move to the preset registered in the software at once.

 

3. CCTV Time Synchronization button (Synchronizes the time of all CCTVs with the user's computer time)

When you click this, the time of all CCTVs registered in the software is synchronized with the computer time at once.

 

4. Display the current time based on the user's computer

 

5. Switch to the Dark Mode/ Back to Light Mode

• Ctrl + * (Number Pad) → Switch Dark Mode / Light Mode

 

Source (GitHub link to be added)

 

 

Source Manual 

 

 

---

 

◆ Advantages

A quick operation is possible.

In the case of the existing software, to operate the desired CCTV, it was possible to operate it by finding and selecting the desired CCTV among many CCTVs.

However, in the case of this web software, by selecting Radio Box and inputting CCTV number, only data are transmitted/received to the server immediately, so that operation is possible quickly.

This feature gives benefits, even more, when an unspecified number of CCTVs need to be operated sequentially.

 

It is possible to change and operate multiple CCTV settings at once.

In the case of existing software, it is possible to select and operate CCTVs one by one.

It takes a long time to adjust the time of all CCTVs to the time of the computer and causes inaccurate problems.

However, in the case of this web software, data transmission/reception is possible by accessing multiple IPs at almost the same time.

 

High stability

In the case of the existing software, all CCTVs in the operation area use the Client account, which transmits and receives data through the administrator account of the connected Server computer.

So when the server computer fails, CCTV operation and monitoring become impossible.

Because this case has a long route and all traffic is concentrated on the server computer.

The server computer often fails due to overload.

It happened every day while doing monitoring work.

Each time, I was able to operate/monitor the CCTV using this web software.

The data exchange path is short and there are no errors due to server computer failure.

 

---

 

◆ Disadvantages

There is no recording function

However, this web software does not provide a recording function.

In the case of the existing software, there is a recording function that saves the image in the form of a picture in the frame unit and reproduces it again.

I think the record function is the most important function of CCTV, but it doesn't supply the record function.

For this, I think I have to learn about the back-end like DBMS. I don't know about it well.

 

Requires the user to set up the basic js file.

Existing software also requires connecting CCTV to the software, so I think some initial setup may be necessary.

However, the process can be carried out using a convenient UI that anyone can do.

In the case of this web software, it is necessary to use the administrator tool (F12) to get the URL to be used in the ajax of the manipulation function and substitute it.

In this process, you need to understand coding.

In the case of the place where I am, users don't need to set it up because I have performed all of these processes and optimized it myself.

But for others, the process of optimization must inevitably exist.

 

---

 

◆ What I learned and felt

I tried to solve the problem situation with coding, and it was very meaningful that I succeeded.

Studying HTML, CSS, and Javascript which I didn't know anything about, and I got a weak understanding of server and client concepts.

Learned the basics of how web pages work by developing a simple front-end.

Experience the software development process alone while developing in an agile method(maybe) that continuously checks and supplements the UX.

 

---

 

◆ Points to be improved

Creating a setting UI to allow users to add new CCTV and configure the home button setting

This causes the settings HTML to open when the settings button is pressed, and receive CCTV information from users.

I thought it would be possible by adding it to the webInfo Array existing in web_Information.js.

Home button setup also makes home button CCTV Array (CCTV name, operation function information), allows the user to check the CCTV and operation functions currently registered in the home button,
If they want to add, input the CCTV name and Preset or Group number.

I thought it would be possible by reflecting this to the home() function of control_Button.js.

 

To automatically get the URL to be used for the ajax of the manipulation function and use it in the manipulation function

I thought it to be unsolvable in a closed network.

To solve the above problem, it is necessary to access the web address only with the CCTV IP and to find and store the manipulated URL through crawling.

However, I know that it is impossible to crawl a web address with Javascript alone in a closed network, and I know that Node.js is required.

When I have skills in the future and look at this again, I want to know if this is a problem that can only be solved by Javascript.

---