Browser Surveillance Station
A browser-only proof of concept for creating a short-lived local observation point when an Edge Agent cannot be installed.
Browser Surveillance Station is not a replacement for a managed video system. It is a deliberately bounded, local-first tool for rapid observation: use a permitted camera, detect motion, make short recordings, and optionally deliver selected clips to authorised Telegram chats.
Need a production-grade surveillance workflow?
Use this proof of concept to validate a need, then design a managed Edge Agent deployment with durable storage, monitoring, access control, and defined retention.
Use it when observation is needed now, but installing an Agent is not possible
Browser Surveillance Station runs as an experimental use case in the Banalytics Console. It asks the browser for access to a local camera and, only when selected, a microphone; it performs simple motion analysis in the open browser session and creates short clips when motion is detected or when an authorised Telegram user requests one.
It is useful for a rapid, local proof of concept-not for unattended, long-term, or safety-critical monitoring. There is no installed runtime, durable recording service, managed camera reconnect, guaranteed retention, or background execution once the browser session is suspended or closed.
The security and data boundaries are described below. The person who opens the component controls camera permission, starts and stops capture, decides whether messenger delivery is enabled, supplies the API token, approves or removes chats, and can revoke that delivery path. Banalytics does not initiate a clip transfer or select a recipient. An approved chat can request a clip only during the active session and only because the user explicitly granted that chat access.
Do not use this component as the only control for life safety, security dispatch, access control, employee monitoring, regulatory evidence retention, or any workflow that requires continuous coverage. Those needs call for an assessed production design with an installed Edge Agent or another managed video platform.
Four focused panels keep the observation workflow visible
The screen is arranged around the live scene. The camera preview shows the browser-selected source; the recordings area keeps a short, in-session list of generated clips; the right column contains four collapsible panels so an operator can keep only the controls needed for the current task open.
| Panel | What it controls or shows | Technology used in the browser |
|---|---|---|
| Live camera | Current camera feed after the browser permission is granted. | getUserMedia and the browser’s media-device APIs acquire the source on the user’s device. |
| Recordings | Short clips created during the current browser session. The list is capped in the interface and is not a retention archive. | MediaRecorder encodes the selected stream; the preview uses in-memory Blob objects and browser object URLs. |
| Capture settings | Camera source, microphone source, requested resolution, minimum kept duration, and maximum clip duration. | Browser device enumeration and media-stream constraints select the source and requested dimensions. |
| Motion detection | Motion preview and the minimum detected-object-size threshold. | OpenCV.js runs in the browser, reading camera frames through a canvas and comparing the current background with recent frames. |
| Telegram delivery | Bot connection, remembered-token option, and allowed users. | The browser calls the selected messenger’s Bot API directly with the token provided by the user. |
| Activity log | Local runtime messages, including recorder and camera activity. | JavaScript writes session diagnostics into the page; it is not a central monitoring or audit service. |
Each right-column panel can be collapsed or expanded. This is especially useful on smaller screens: start with the camera and the one setting you need, then open Telegram delivery only when a notification path is required.
Choose the source and set a bounded recording envelope
- Grant browser permission. Select the intended camera and, when audio is needed, microphone in the browser permission prompt. Camera labels are often visible only after permission is granted.
- Select video and audio sources. Use a front or rear phone camera, a laptop webcam, a USB camera, or another browser-visible input. Verify the preview after every source change.
- Choose a practical resolution. Start with 640×480. Increase resolution only when the evidence needs more detail and the device can sustain it without dropped frames, overheating, or excessive battery use.
- Set "Store video of greater than". This filters automatic motion clips shorter than the chosen number of seconds. It helps suppress very brief triggers. Explicit Telegram video-shot requests are retained even when short.
- Set "Split long videos to the duration". This is the maximum duration of a single recording segment. Shorter segments are easier to review and send, and they place less sustained pressure on a mobile device.
Configuration is session-oriented. Treat it as a field setup: write down the purpose, camera position, operator, start time, intended recipients, and any limits agreed for the proof of concept. If the observation becomes recurring, migrate those settings into a managed deployment rather than relying on a browser tab.
Configure the motion detector
The preview image shows the parts of the scene where the background has changed. A person passing through the frame, an opening door, moving equipment, a shadow, or camera noise can all produce a changed region.
The histogram below the image helps make that visible. It shows how often the detector sees small, medium, or large changed regions: a cluster of small values is usually harmless background noise, while a larger region is more likely to be the movement the operator cares about. The slider sets the minimum region size that starts a reaction and recording.
- Start by ignoring regular small noise. Move the slider above the small values that appear constantly, then check that the intended movement still creates a larger region.
- Test the actual scene. Light changes, reflections, rain, vibration, autofocus, and activity at the edge of the frame can change the result.
- Review a few clips. Adjust the slider until the recordings contain useful movement without filling the list with noise.
A practical proof of concept should define the observation in one sentence: for example, "notify the duty supervisor when a vehicle-sized movement reaches the temporary loading bay." If that sentence cannot name a reviewer and response, the component is collecting video without a clear operational purpose.
Connect only a bot and chats that are authorised for the task
Telegram delivery is optional. When enabled, the browser connects to the Telegram Bot API with the token supplied by the operator. A new chat is not allowed automatically: the operator must confirm the access request in the browser. The Telegram Delivery panel always shows the allowed-user list, including when the bot is not currently active, so access can be reviewed before the next session.
- Create or select the Telegram bot. Obtain its API token from Telegram and enter it in the component. Treat the token as a secret with the same care as a password for that bot.
- Decide whether to remember the token. Enabling Remember token displays a confirmation explaining that the token is stored in the browser’s local storage on that device, for the
console.banalytics.liveorigin, underbrowser-surveillance-station.telegram_bot_token. It is not a suitable option for a shared or untrusted device. - Start the bot and approve only intended chats. When a person first messages the bot, the local operator confirms or rejects the chat. Approved chat identifiers are shown in the panel and can be removed with the disconnect control.
- Use the Telegram buttons deliberately. After a chat is approved, the bot sends that chat interactive
/videoshot 1,/videoshot 5,/videoshot 10,/videoshot 30, and/videoshot 60buttons. Selecting one creates a clip of the chosen duration and delivers it to the allowed chats while the bot is active. - Use the matching bot command when appropriate. An allowed Telegram user may send
/videoshotor/videoshot <seconds>. The browser creates the requested short clip; it does not give the user general control of the device.
Removing the check from Remember token immediately deletes the saved token and saved allowed/denied chat configuration from that browser’s local storage. If the bot is already running, it keeps the token only in its active browser memory until the user stops it; it is not saved for the next session.
A browser tab is an interactive foreground tool, not an always-on recorder
Browser media APIs are intentionally constrained to protect battery, privacy, and device resources. Exact behaviour depends on the browser, operating system, permissions, hardware, and enterprise device-management policies. Validate the target device before relying on the component in a real situation.
| Condition | Mobile phones and tablets | Desktop and laptop computers | Operational response |
|---|---|---|---|
| Screen lock or sleep | The operating system commonly suspends the browser, camera, timers, and recording when the device locks or sleeps. | Sleep, hibernation, lid close, or an organisation’s screen-lock policy can suspend the browser and stop capture. | Keep the device awake and powered for supervised use. Do not assume recording continues in the background. |
| Background tab or app | Mobile browsers may heavily throttle or pause a backgrounded tab; switching applications can interrupt media capture. | Background tabs may be throttled, especially under power-saving or memory pressure. | Keep the use case open in the foreground. Test the exact browser and device-management policy. |
| Battery and heat | Camera capture, encoding, motion processing, and data transmission can drain battery and generate heat quickly. | Laptops can also throttle under battery-saving mode or high temperature. | Use mains power or an approved power bank, choose a modest resolution, and limit clip duration. |
| Permissions and device selection | Mobile browsers can offer fewer source choices and may alter behaviour after orientation changes. | USB cameras, microphones, privacy shutters, driver access, and corporate policies can affect availability. | Grant permission deliberately, verify the preview, and repeat the test after source or orientation changes. |
| Connectivity | Internet is required for the Console page and optional messenger API delivery; local camera capture may still be interrupted by browser lifecycle controls. | The same applies; corporate proxies or firewalls may also restrict access to the selected messenger API. | Confirm the approved network path before the task. Do not use the POC as an offline evidence archive. |
These limitations are the reason an installed Banalytics Edge Agent is the appropriate next step for continuous observation. An Agent can be deployed on a controlled host with defined power, storage, retention, monitoring, restart behaviour, and access policy; the browser component cannot provide those operational guarantees.
Keep the data path explicit before granting camera access
When the user opens this component, the Banalytics Console downloads unobfuscated, inspectable JavaScript and OpenCV support into that user’s browser. The code runs inside the browser process on the user’s device. Banalytics personnel do not start the camera, operate the browser, or receive the live stream through this component.
The user’s browser asks the user for camera permission and, only when selected, microphone permission. After permission is granted, the user’s device acquires the selected stream and performs motion processing in that browser tab. The component does not upload the live camera stream to a Banalytics video backend as part of its normal operation.
| Data or secret | Where it is handled | Who receives it |
|---|---|---|
| Live camera and microphone stream | The user’s browser media session on the user’s device, after explicit browser permission. | The local browser process. The component does not send the live stream to a Banalytics backend. |
| Motion-processing frames and recording chunks | Memory of the user’s browser and the active session’s recording preview on that device. | The local browser. Clips remain available for review in the session; they are not a durable archive unless the user separately saves or sends them. |
| Messenger bot token | Entered by the user. If Remember token is accepted, the user’s browser stores it in local storage under the documented origin and key. | The user’s browser and the messenger Bot API only when the user starts the bot. A person with access to the same browser profile may be able to access remembered local data. |
| Allowed and denied messenger chats | Held by the active browser session and, when remembering is enabled, stored in the same browser-origin local storage on the user’s device. | The local browser; the messenger receives messages only when the user’s active bot communicates with its API. |
| Delivered video clips | Encoded by the user’s browser, then sent directly from that browser to the messenger Bot API for chats the user allowed. | The selected messenger and the recipients authorised by the user. Their handling is governed by the organisation’s messenger-use policy and the messenger’s applicable terms and privacy documentation. |
Controller of the observation data: the organisation or individual using the component controls the resulting video and personal data. That party chooses the camera, purpose, location, recipients, retention, API token, and messenger bot; it must establish a lawful purpose, provide any required notices, limit access, set retention, respond to data-subject requests, and decide whether the selected messenger is an approved recipient.
Banalytics’ role: Banalytics delivers the inspectable code to the user’s browser. Banalytics does not operate the user’s camera, select recipients, start clip delivery, or receive the live stream through this component. Banalytics may separately process Console-account and service telemetry under the applicable service relationship; that is distinct from the browser component’s local camera stream.
Messenger’s role: once the user’s browser sends a clip, the selected messenger is an independent service in the delivery path. Use only a bot, chats, and recipient devices approved by the deployment owner. Do not send sensitive video merely because the technical connection works.