viseron
viseron copied to clipboard
Stuck in blank login page when opening in Home Assistant
To reproduce:
Add a web panel in Home Assistant that points to the Viseron page.
Occurs when the page is loaded in any iframe. Minimal example:
<iframe src="http://viseron.local:8888/#/" frameborder="0">
Expected Operation:
Shows cameras
Observed operation:
Redirects to http://192.168.4.106:8888/#/login
, shows loading spinner followed by blank page with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Viseron</title>
<meta charset="utf-8" />
<meta
name="description"
content="Viseron - self-hosted, local only NVR."
/>
<meta name="google" content="notranslate" />
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
<!-- <link rel="manifest" href="/static/site.webmanifest"> -->
<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Viseron">
<meta name="application-name" content="Viseron">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/browserconfig.xml">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/static/manifest.json" />
<script type="module" crossorigin src="/assets/main-12825570.js"></script>
<link rel="modulepreload" crossorigin href="/assets/index-3a10fa1e.js">
<link rel="stylesheet" href="/assets/index-4ee18ee7.css">
<link rel="stylesheet" href="/assets/index-b67b3d0b.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
No screenshot included, just imagine a blank rgb(10,25,41) background. No console message in browser.
Docker container logs:
[2023-10-30 21:20:42] [DEBUG ] [viseron.components.webserver.api.handlers] - Routing to AuthAPIHandler.auth_enabled(*args=[], **kwargs={}, request_arguments={})
Enviroment:
Version: roflcoopter/viseron 2.3.1 d19259cfa5d1
Tested platforms:
- iOS 17
- macOS 13.6/Safari 16.6
Config:
ffmpeg:
camera:
camera_1: # This value has to be unique across all cameras
name: Door Camera
host: 192.168.4.243
port: 554
path: "/user=admin&password=&channel=1&stream=0?.sdp?real_stream"
mog2:
motion_detector:
cameras:
camera_1: # Attach detector to the configured camera_2 above
fps: 1
trigger_recorder: true
nvr:
camera_1: # Run NVR for camera_1
mqtt:
# redacted lol
home_assistant:
logger:
default_level: debug
For some reason this occasionally works.
In Chromium 120, a blank camera window appears instead of a totally blank page.
Interesting, will need to look into if it is fixable. Will take me some time tho, currently quite busy