Because spying on your users is fun
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
views
.gitignore
LICENSE.md
README.md
app.js
package-lock.json
package.json

README.md

OpenCCTVdragon

In a nutshell; this was a fun experiment to 'spy' on users with WebSockets and OpenSeadragon. You can read more about the project in the blog post I wrote, or try a live demonstration on http://opencctvdragon.cogapp.com/

                  +-------------------+
           +----->+  Screens [1 - 9]  +-------+
           |      +-------------------+       |
  Occupy   |                                  |   Viewed by
           |                                  |
           |                                  |
           |                                  v
 +---------+----------+             +---------+---------+
 |                    |             |                   |
 |                    |             |                   |
 |      Cameras       |             |  Control Room(s)  |
 |                    |             |                   |
 |                    |             |                   |
 +---------+----------+             +---------+---------+
           ^                                  |
           |                                  |
   Data    |                                  |   Data
           |                                  v
+----------+----------------------------------+----------+
|                                                        |
|                                                        |
|                    WebSocket Server                    |
|                                                        |
|                                                        |
+---+---+---+--------------------------------+---+---+---+
    ^   ^   ^                                |   |   |
    |   |   |                                |   |   |
    |   |   |                                |   |   |
    |   |   |                                |   |   |
    |   |   |                                v   v   v
+---+---+---+---+                        +---+---+---+---+
|               |                        |               |
|    Clients    |                        |    Clients    |
|               |                        |               |
+---------------+                        +---------------+

Running this project locally

This was developed with node 8.x in mind.

  • Clone the repo
  • npm install
  • npm start
  • Go to http://localhost:3000

Running this project on a remote server

There are numerous ways of accomplishing this, but in my case the specific environment I had was already running apache. If you don't want to use apache you should be able to get similar results with iptables and/or nginx. For the configuration described in this README however, you will need:

  • node (8.x)
  • pm2
  • apache2

Reverse proxy in apache

This assumes there will be a separate virtualhost; that's probably the easiest way to do this because you can just proxy everything. There are other ways... but they require more effort 🌝

Ensure the following apache modules are enabled with a2enmod <module> <module> ...

  • headers
  • proxy
  • proxy_http
  • proxy_wstunnel

The virtualhost needs to be configured to:

  • Proxy requests to the node app
  • Rewrite headers so everything looks legit

Based on the above here is a sample config:

  ServerName "http://opencctvdragon.cogapp.com"
  Header edit Origin http://opencctvdragon.cogapp.com localhost:3000
  RequestHeader edit Origin http://opencctvdragon.cogapp.com localhost:3000
  Header edit Referer http://opencctvdragon.cogapp.com localhost:3000
  RequestHeader edit Referer http://opencctvdragon.cogapp.com localhost:3000

  ProxyPass /ws/control-room ws://localhost:3000/ws/control-room
  ProxyPassReverse /ws/control-room ws://localhost:3000/ws/control-room
  ProxyPass /ws/viewer ws://localhost:3000/ws/viewer
  ProxyPassReverse /ws/viewer ws://localhost:3000/ws/viewer
  ProxyPass / http://localhost:3000/
  ProxyPassReverse / http://localhost:3000/

N.B. The order of proxypass rules here is important, generally you'll want the longest to be declared first as the first match will be taken with subsequent rules ignored.