Sign inSign up

scottibyte/multiview-web

By scottibyte

•Updated 3 months ago

Browser dashboard for ScottiBYTE MultiView Server with Login, TOTP, and Docker.

Image
Security
Web servers
Monitoring & observability
0

338

scottibyte/multiview-web repository overview

⁠ScottiBYTE MultiView Web

ScottiBYTE MultiView Web is a self-hosted browser dashboard for viewing cameras from a paired ScottiBYTE MultiView Server.

This container is the web dashboard only. It does not configure cameras by itself and it does not replace MultiView Server. New users should install and configure MultiView Server first, then deploy MultiView Web as the browser-based viewer.

ScottiBYTE MultiView Web Dashboard

⁠Latest Release: v1.1.0

v1.1.0 adds camera rotation mode to MultiView Web.

⁠Added
  • Rotate mode for cycling through cameras in Full View.
  • Custom camera rotation selection.
  • Numbered badges showing selected camera rotation order.
  • Start Custom Rotation for selected cameras.
  • Rotate All mode when no cameras are selected.
  • Rotation speed selector.
  • Stop Rotation returns to rotation selection mode and keeps custom selections.
  • Exit Rotate Mode leaves rotation mode and clears the current selection.
  • Improved visual highlighting for selected rotation cameras.
  • Improved Rotate, Start Rotation, and Stop Rotation button styling.
⁠Docker Pull
docker pull scottibyte/multiview-web:1.1.0

Or use the current release tag:

image: scottibyte/multiview-web:1.1.0

The latest tag has also been updated to v1.1.0.

⁠What You Need First

Before using this Docker image, you need a working ScottiBYTE MultiView Server.

MultiView Server is the backend service that manages:

  • Camera configuration
  • Camera stream URLs
  • Remote client authorization
  • Pairing / approval of clients
  • Stream access control

 

MultiView Web connects to MultiView Server and provides:

  • A browser-based camera dashboard
  • Optional web-user login
  • Admin and viewer roles
  • Required TOTP authentication for admin accounts
  • Per-browser display settings
  • Full live camera viewing

Install MultiView Server first:

https://hub.docker.com/r/scottibyte/multiview-server⁠

MultiView Web source code:

https://github.com/ScottiBYTE/multiview-web⁠

MultiView Server source code:

https://github.com/ScottiBYTE/multiview-server⁠

ScottiBYTE MultiView is an ecosystem with multiple client options.

MultiView Web is one way to view cameras from MultiView Server. Other clients also exist for different viewing scenarios:

  • ScottiBYTE MultiView TV — Android TV / Fire TV style client for viewing MultiView Server cameras on a television.
  • ScottiBYTE MultiView Mobile — mobile client for viewing MultiView Server cameras from a phone or tablet.
  • ScottiBYTE MultiView Web — browser-based client for viewing MultiView Server cameras from any modern web browser.

 

All MultiView clients rely on ScottiBYTE MultiView Server for camera configuration, stream access, and client authorization.

⁠Simple Explanation for New Users

Think of the system as two parts:

Cameras → MultiView Server → MultiView Web → Browser

MultiView Server talks to your cameras.

MultiView Web talks to MultiView Server.

Your browser talks to MultiView Web.

Each browser must be authorized before it can view cameras. When a new browser opens MultiView Web, it can request an authorization code. An administrator then approves that browser in MultiView Server under Remote Clients.

⁠Features

  • Browser-based MultiView dashboard
  • MultiView Server browser authorization flow
  • Optional Web Login
  • Admin and viewer roles
  • Required TOTP authenticator setup for admin accounts
  • Admin user management
  • Camera thumbnail grid
  • Full live camera view
  • Keyboard navigation in full view
  • Configurable thumbnails per row
  • Per-browser camera visibility controls
  • Drag-and-drop camera ordering
  • Safe browser settings import/export
  • Dark and light mode
  • Docker and Docker Compose deployment support

⁠Screenshots

⁠Browser Authorization

ScottiBYTE MultiView Web Browser Authorization

⁠Login

ScottiBYTE MultiView Web Login

⁠Settings

ScottiBYTE MultiView Web Settings

⁠User Management

ScottiBYTE MultiView Web User Management

⁠Full View

ScottiBYTE MultiView Web Full View

⁠Docker Tags

Stable release:

docker pull scottibyte/multiview-web:1.0.0

Latest release:

docker pull scottibyte/multiview-web:latest

⁠Docker Compose Setup

Create the application directory:

mkdir -p multiview-web/config multiview-web/data/sessions
cd multiview-web

Create .env:

cat > .env <<ENVEOF
PUID=$(id -u)
PGID=$(id -g)
MULTIVIEW_SERVER_URL=https://multiview-server.example.com
ENVEOF

Replace this line:

MULTIVIEW_SERVER_URL=https://multiview-server.example.com

with the actual URL of your MultiView Server.

Examples:

MULTIVIEW_SERVER_URL=http://192.168.1.50:8080
MULTIVIEW_SERVER_URL=https://multiview-server.example.com

Create docker-compose.yml:

services:
  multiview-web:
    image: scottibyte/multiview-web:latest
    container_name: multiview-web
    user: "${PUID}:${PGID}"
    restart: unless-stopped
    ports:
      - "8090:8090"
    environment:
      NODE_ENV: production
      PORT: 8090
      MULTIVIEW_SERVER_URL: ${MULTIVIEW_SERVER_URL}
    volumes:
      - ./config:/app/config
      - ./data:/app/data

Start the container:

docker compose up -d

Open MultiView Web:

http://SERVER-IP:8090

Example:

http://192.168.1.60:8090

⁠First-Time Browser Authorization

After opening MultiView Web for the first time:

  1. Click Request Authorization.
  2. MultiView Web will display an authorization code.
  3. Open MultiView Server.
  4. Go to Remote Clients.
  5. Approve the matching browser/client request.
  6. Return to MultiView Web.
  7. The camera dashboard should load.

This authorization step is required because MultiView Server remains in control of which clients are allowed to view cameras.

⁠Optional Web Login

MultiView Web can also protect the browser dashboard with its own login system.

This is separate from MultiView Server authorization.

Viewer accounts can:

  • Log in with username and password
  • View authorized cameras
  • Use full live view

Admin accounts can:

  • Manage users
  • Enable or disable Web Login
  • Create viewer and admin accounts
  • Use admin-only settings

Admin accounts require a TOTP authenticator code when Web Login is enabled.

⁠Persistent Data

Persist these folders:

config/
data/

The config/ folder stores local web authentication data such as:

auth.json
session-secret

The data/ folder stores session data.

Keep both folders mounted as persistent volumes so Web Login configuration and browser sessions survive container updates.

⁠Environment Variables

VariableRequiredDescription
MULTIVIEW_SERVER_URLYesURL of the MultiView Server that this web instance connects to
PORTNoInternal web server port. Defaults to 8090
NODE_ENVNoUse production for Docker deployments
PUIDRecommendedHost user ID used by Docker Compose
PGIDRecommendedHost group ID used by Docker Compose

⁠Security Notes

  • MultiView Server remains responsible for camera/client authorization.
  • MultiView Web login protects browser access to the dashboard.
  • Admin accounts require TOTP when Web Login is enabled.
  • The MultiView Server URL is configured server-side with MULTIVIEW_SERVER_URL.
  • Browser users do not enter or edit the MultiView Server URL.
  • Exported browser settings do not include pairing tokens or web credentials.

⁠Updating

Pull the latest image:

docker compose pull
docker compose up -d

⁠Source Code

MultiView Web:

https://github.com/ScottiBYTE/multiview-web⁠

MultiView Server:

https://github.com/ScottiBYTE/multiview-server⁠

Other ScottiBYTE MultiView clients, including MultiView TV and MultiView Mobile, are part of the broader ScottiBYTE MultiView ecosystem.

Tag summary

Content type

Image

Digest

sha256:424152bd0…

Size

69.5 MB

Last updated

3 months ago

docker pull scottibyte/multiview-web