Elgato_dark/Strix
1
0
Fork 0
mirror of https://github.com/eduard256/Strix synced 2026-04-21 13:37:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge develop into main for v2.1.0 release

Browse source
This commit is contained in:
eduard256 2026-04-08 11:31:03 +00:00
commit ffe77cb9c4
13 changed files with 3394 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

211
.claude/skills/frontend_design_strix/SKILL.md Normal file
View file

@ -0,0 +1,211 @@
---
name: frontend_design_strix
description: Create or redesign frontend pages for Strix. Use when building new HTML pages, redesigning existing ones, or working on any UI task in the www/ directory. Covers design principles, layout patterns, and component usage.
disable-model-invocation: true
---
# Strix Frontend Design
You are creating or modifying a frontend page for Strix. Your goal is to produce a page that looks **identical in quality** to the existing pages, especially `www/homekit.html` which is the design reference.
## Before you start
Read these files completely:
1. **`www/design-system.html`** -- All CSS variables, every component, JS patterns. This is your component library.
2. **`www/homekit.html`** -- The design reference. This page is the gold standard. Study its structure, spacing, how little text it uses, how the back button is positioned.
3. **`www/index.html`** -- The entry point. Understand the probe flow and how data is passed between pages via URL params.
If you need to understand backend APIs or the probe system, read:
- `www/standard.html` -- how probe data flows into a configuration page
- `www/test.html` -- how polling and real-time updates work
- `www/config.html` -- complex two-column layout with live preview
## Design Philosophy
### Radical minimalism
Every element on screen must earn its place. If something doesn't help the user complete their task, remove it.
- **10% text, 90% meaning.** A label that says "Pairing Code" with an info-icon is better than a paragraph explaining what a pairing code is.
- **Hide details behind info-icons.** Long explanations go into tooltips (the `(i)` icon pattern). The user who needs the explanation can hover. The user who doesn't is not bothered.
- **No decorative elements without function.** No ornamental icons, no badges that don't convey information, no cards-as-decoration.
- **One action per screen.** Each page should have one primary thing the user does. Everything else is secondary.
### How we think about design decisions
When building homekit.html, we went through this process:
1. **Started with all the data** -- device info table, long descriptions, badges, decorative icons
2. **Asked "does the user need this?"** for every element
3. **Removed everything that wasn't essential** -- the device info table (IP, MAC, vendor) was removed because the user doesn't need it to enter a PIN code
4. **Moved explanations into tooltips** -- "This camera supports Apple HomeKit. Enter the 8-digit pairing code printed on your camera or included in the manual" became just a label "Pairing Code" with a tooltip
5. **Removed format hints** -- "Format: XXX-XX-XXX" was removed because the input fields themselves make the format obvious
6. **Made the primary action obvious** -- big button, full width, impossible to miss
Apply this same thinking to every page you create.
### Visual rules
- Dark theme with purple accent -- never deviate from the color palette in `:root`
- All icons are inline SVG -- never use emoji, never use icon fonts, never use external icon libraries
- Fonts: system font stack for UI, monospace for technical values (URLs, IPs, codes)
- Borders are subtle: `rgba(139, 92, 246, 0.15)` -- barely visible purple tint
- Glow effects on focus and hover, never on static elements (except logos)
- Animations are fast (150ms) and subtle -- translateY(-2px) on hover, fadeIn on page load
- No rounded corners larger than 8px (except special cases like toggle switches)
## Layout Patterns
### Pages after probe (like homekit.html) -- TRUE CENTER
This is the most common case for new pages. Content is vertically centered on screen.
```
.screen {
min-height: 100vh;
display: flex;
align-items: center; /* TRUE CENTER -- not flex-start */
justify-content: center;
}
.container { max-width: 480px; width: 100%; }
```
**Back button** is positioned OUTSIDE the container, wider than content, using `.back-wrapper`:
```
.back-wrapper {
position: absolute; top: 1.5rem;
left: 50%; transform: translateX(-50%);
width: 100%; max-width: 600px; /* wider than container */
padding: 0 1.5rem;
z-index: 10;
}
```
This is MANDATORY for all centered layout pages. The back button must NOT be inside the centered container.
### Entry page (like index.html) -- TOP CENTER
Content is near the top with `margin-top: 8vh`. Used for the main entry point only.
### Content pages (like standard.html, create.html) -- STANDARD
Back button at top, then title, then content flowing down. `max-width: 600px`, no vertical centering.
### Data-heavy pages (like test.html) -- WIDE
`max-width: 1200px` with card grids.
### Two-column (like config.html) -- SPLIT
Settings left, live preview right. Collapses to tabs on mobile.
## Hero Section Pattern
For centered pages, the hero contains a logo/icon + short title:
```html
<div class="hero">
<svg class="logo-icon">...</svg> <!-- 48-72px, with glow filter -->
<h1 class="title">Short Name</h1> <!-- 1.25rem, white, font-weight 600 -->
</div>
```
- The icon should be recognizable and relevant (Strix owl for main, HomeKit house for HomeKit)
- The title is SHORT -- one or two words max
- No subtitles unless absolutely necessary
- Glow effect on the icon via `filter: drop-shadow()`
## Component Usage
All components are documented with live examples in `www/design-system.html`. Key ones:
- **Buttons**: `.btn .btn-primary .btn-large` for primary action (full width), `.btn-outline` for secondary
- **Inputs**: `.input` with `.label` and optional `.info-icon` with `.tooltip`
- **Toast**: Every page needs `<div id="toast" class="toast hidden"></div>` and the `showToast()` function
- **Error box**: `.error-box` with `.visible` class toggled
- **Info icon + tooltip**: For hiding explanations -- always prefer this over visible text
## Navigation -- CRITICAL
### Always pass ALL known data forward
When navigating to another page, pass every piece of data you have. This is non-negotiable. Future pages may need any of these values.
```javascript
function navigateNext() {
var p = new URLSearchParams();
p.set('primary_data', value);
// Pass through EVERYTHING known:
if (ip) p.set('ip', ip);
if (mac) p.set('mac', mac);
if (vendor) p.set('vendor', vendor);
if (model) p.set('model', model);
if (server) p.set('server', server);
if (hostname) p.set('hostname', hostname);
if (ports) p.set('ports', ports);
if (user) p.set('user', user);
if (channel) p.set('channel', channel);
// ... any other params from probe
window.location.href = 'next.html?' + p.toString();
}
```
### Page init always reads all params
```javascript
var params = new URLSearchParams(location.search);
var ip = params.get('ip') || '';
var mac = params.get('mac') || '';
var vendor = params.get('vendor') || '';
// ... read ALL possible params even if this page doesn't use them
// They need to be available for passing to the next page
```
## JavaScript Rules
- Use `var`, not `let`/`const` -- ES5 compatible
- Build DOM with `document.createElement`, not innerHTML
- Use `async function` + `fetch()` for API calls
- Always handle errors: check `!r.ok`, catch exceptions, show toast
- Debounce input handlers if they trigger API calls (300ms)
- Use `addEventListener`, never inline event handlers in HTML
## API Pattern
```javascript
async function doSomething() {
try {
var r = await fetch('api/endpoint', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!r.ok) {
var text = await r.text();
showToast(text || 'Error ' + r.status);
return;
}
var data = await r.json();
// success...
} catch (e) {
showToast('Connection error: ' + e.message);
}
}
```
## Checklist before finishing
- [ ] Page uses correct layout pattern for its type
- [ ] Back button positioned correctly (`.back-wrapper` for centered, inline for standard)
- [ ] All CSS variables from `:root` -- no hardcoded colors
- [ ] No unnecessary text -- everything possible hidden behind info-icons
- [ ] All known URL params are read at init and passed forward on navigation
- [ ] Toast element present, showToast function included
- [ ] Error states handled (API errors, validation)
- [ ] Mobile responsive (test at 375px width)
- [ ] No emoji anywhere
- [ ] All icons are inline SVG
- [ ] Primary action is obvious and full-width
- [ ] Page looks like it belongs with homekit.html and index.html

15
CHANGELOG.md
View file

@ -1,5 +1,20 @@
# Changelog
## [2.1.0] - 2026-04-08
### Added
- ONVIF protocol support: auto-discovery via unicast WS-Discovery, stream resolution through ONVIF profiles
- ONVIF probe detector: detects ONVIF cameras during network probe (4-7ms response time, no auth required)
- ONVIF camera page (onvif.html): credentials form with option to also test popular stream patterns
- ONVIF stream handler: resolves all camera profiles, tests each via RTSP, returns paired results (onvif:// + rtsp://) with shared screenshots
- Design system reference (design-system.html) with all UI components documented
### Changed
- ONVIF has highest probe priority (above HomeKit and Standard)
- JPEG-only streams (no H264/H265) are classified as Alternative in test results
- HomeKit page redesigned: Apple HomeKit logo, centered layout, floating back button
- Hardened create.html against undefined/null URL values in query parameters
## [2.0.0] - 2025-04-05
### Added

14
internal/probe/probe.go
View file

@ -33,6 +33,14 @@ func Init() {
}
ports = loadPorts()
// ONVIF detector (highest priority -- auto-discovers all streams)
detectors = append(detectors, func(r *probe.Response) string {
if r.Probes.ONVIF != nil {
return "onvif"
}
return ""
})
// HomeKit detector
detectors = append(detectors, func(r *probe.Response) string {
if r.Probes.MDNS != nil {
@ -115,6 +123,12 @@ func runProbe(parent context.Context, ip string) *probe.Response {
resp.Probes.HTTP = r
mu.Unlock()
})
run(func() {
r, _ := probe.ProbeONVIF(fastCtx, ip)
mu.Lock()
resp.Probes.ONVIF = r
mu.Unlock()
})
wg.Wait()

8
pkg/probe/models.go
View file

@ -14,6 +14,7 @@ type Probes struct {
ARP *ARPResult `json:"arp"`
MDNS *MDNSResult `json:"mdns"`
HTTP *HTTPResult `json:"http"`
ONVIF *ONVIFResult `json:"onvif"`
}
type PortsResult struct {
@ -43,3 +44,10 @@ type HTTPResult struct {
StatusCode int `json:"status_code"`
Server string `json:"server"`
}
type ONVIFResult struct {
URL string `json:"url"`
Port int `json:"port"`
Name string `json:"name,omitempty"`
Hardware string `json:"hardware,omitempty"`
}

126
pkg/probe/onvif.go Normal file
View file

@ -0,0 +1,126 @@
package probe
import (
"context"
"crypto/rand"
"encoding/hex"
"fmt"
"net"
"net/url"
"regexp"
"strings"
"time"
)
// ProbeONVIF sends unicast WS-Discovery probe to ip:3702.
// Returns nil, nil if the device does not support ONVIF.
func ProbeONVIF(ctx context.Context, ip string) (*ONVIFResult, error) {
conn, err := net.ListenPacket("udp4", ":0")
if err != nil {
return nil, err
}
defer conn.Close()
deadline, ok := ctx.Deadline()
if !ok {
deadline = time.Now().Add(100 * time.Millisecond)
}
_ = conn.SetDeadline(deadline)
// WS-Discovery Probe message
// https://www.onvif.org/wp-content/uploads/2016/12/ONVIF_Feature_Discovery_Specification_16.07.pdf
msg := `<?xml version="1.0" ?>
<s:Envelope xmlns:s="http://www.w3.org/2003/05/soap-envelope">
<s:Header xmlns:a="http://schemas.xmlsoap.org/ws/2004/08/addressing">
<a:Action>http://schemas.xmlsoap.org/ws/2005/04/discovery/Probe</a:Action>
<a:MessageID>urn:uuid:` + randUUID() + `</a:MessageID>
<a:To>urn:schemas-xmlsoap-org:ws:2005:04:discovery</a:To>
</s:Header>
<s:Body>
<d:Probe xmlns:d="http://schemas.xmlsoap.org/ws/2005/04/discovery">
<d:Types />
<d:Scopes />
</d:Probe>
</s:Body>
</s:Envelope>`
addr := &net.UDPAddr{IP: net.ParseIP(ip), Port: 3702}
if _, err = conn.WriteTo([]byte(msg), addr); err != nil {
return nil, err
}
buf := make([]byte, 8192)
for {
n, _, err := conn.ReadFrom(buf)
if err != nil {
return nil, nil // timeout -- device doesn't support ONVIF
}
body := string(buf[:n])
if !strings.Contains(body, "onvif") {
continue
}
xaddrs := findXMLTag(body, "XAddrs")
if xaddrs == "" {
continue
}
// fix buggy cameras reporting 0.0.0.0
// ex. <wsdd:XAddrs>http://0.0.0.0:8080/onvif/device_service</wsdd:XAddrs>
if s, ok := strings.CutPrefix(xaddrs, "http://0.0.0.0"); ok {
xaddrs = "http://" + ip + s
}
port := 80
if u, err := url.Parse(xaddrs); err == nil && u.Port() != "" {
fmt.Sscanf(u.Port(), "%d", &port)
}
scopes := findXMLTag(body, "Scopes")
return &ONVIFResult{
URL: xaddrs,
Port: port,
Name: findScope(scopes, "onvif://www.onvif.org/name/"),
Hardware: findScope(scopes, "onvif://www.onvif.org/hardware/"),
}, nil
}
}
// internals
var reXMLTag = map[string]*regexp.Regexp{}
func findXMLTag(s, tag string) string {
re, ok := reXMLTag[tag]
if !ok {
re = regexp.MustCompile(`(?s)<(?:\w+:)?` + tag + `\b[^>]*>([^<]+)`)
reXMLTag[tag] = re
}
m := re.FindStringSubmatch(s)
if len(m) != 2 {
return ""
}
return m[1]
}
func findScope(s, prefix string) string {
i := strings.Index(s, prefix)
if i < 0 {
return ""
}
s = s[i+len(prefix):]
if j := strings.IndexByte(s, ' '); j >= 0 {
s = s[:j]
}
s, _ = url.QueryUnescape(s)
return s
}
func randUUID() string {
b := make([]byte, 16)
rand.Read(b)
s := hex.EncodeToString(b)
return s[:8] + "-" + s[8:12] + "-" + s[12:16] + "-" + s[16:20] + "-" + s[20:]
}

104
pkg/tester/source_onvif.go Normal file
View file

@ -0,0 +1,104 @@
package tester
import (
"fmt"
"time"
"github.com/AlexxIT/go2rtc/pkg/core"
"github.com/AlexxIT/go2rtc/pkg/onvif"
)
// testOnvif resolves all ONVIF profiles, tests each via RTSP,
// and adds two Results per profile (onvif:// + rtsp://).
// ex. "onvif://admin:pass@10.0.20.111" or "onvif://admin:pass@10.0.20.119:2020"
func testOnvif(s *Session, rawURL string) {
client, err := onvif.NewClient(rawURL)
if err != nil {
return
}
tokens, err := client.GetProfilesTokens()
if err != nil {
return
}
for _, token := range tokens {
profileURL := rawURL + "?subtype=" + token
pc, err := onvif.NewClient(profileURL)
if err != nil {
continue
}
rtspURI, err := pc.GetURI()
if err != nil {
continue
}
testOnvifProfile(s, profileURL, rtspURI)
}
}
// testOnvifProfile tests a single RTSP stream and adds two Results (onvif + rtsp)
func testOnvifProfile(s *Session, onvifURL, rtspURL string) {
start := time.Now()
prod, err := rtspHandler(rtspURL)
if err != nil {
return
}
defer func() { _ = prod.Stop() }()
latency := time.Since(start).Milliseconds()
var codecs []string
for _, media := range prod.GetMedias() {
if media.Direction != core.DirectionRecvonly {
continue
}
for _, codec := range media.Codecs {
codecs = append(codecs, codec.Name)
}
}
// capture screenshot
var screenshotPath string
var width, height int
if raw, codecName := getScreenshot(prod); raw != nil {
var jpeg []byte
switch codecName {
case core.CodecH264, core.CodecH265:
jpeg = toJPEG(raw)
default:
jpeg = raw
}
if jpeg != nil {
idx := s.AddScreenshot(jpeg)
screenshotPath = fmt.Sprintf("api/test/screenshot?id=%s&i=%d", s.ID, idx)
width, height = jpegSize(jpeg)
}
}
// add onvif:// result
s.AddResult(&Result{
Source: onvifURL,
Screenshot: screenshotPath,
Codecs: codecs,
Width: width,
Height: height,
LatencyMs: latency,
})
// add rtsp:// result (same screenshot, same codecs)
s.AddResult(&Result{
Source: rtspURL,
Screenshot: screenshotPath,
Codecs: codecs,
Width: width,
Height: height,
LatencyMs: latency,
})
}

5
pkg/tester/worker.go
View file

@ -56,6 +56,11 @@ func testURL(s *Session, rawURL string) {
return
}
if strings.HasPrefix(rawURL, "onvif://") {
testOnvif(s, rawURL)
return
}
handler := GetHandler(rawURL)
if handler == nil {
return

11
www/create.html
View file

@ -328,8 +328,9 @@
// Pre-populate custom streams from "url" query parameter (supports multiple)
params.getAll('url').forEach(function(u) {
if (!u || typeof u !== 'string') return;
u = u.trim();
if (u && u.indexOf('://') !== -1 && customStreams.indexOf(u) === -1) {
if (u && u !== 'undefined' && u !== 'null' && u.indexOf('://') !== -1 && customStreams.indexOf(u) === -1) {
customStreams.push(u);
}
});
@ -395,7 +396,7 @@
addInput.type = 'text';
addInput.placeholder = 'rtsp://user:pass@host/path or bubble://...';
addInput.spellcheck = false;
addInput.value = pendingInput;
addInput.value = pendingInput || '';
var addBtn = document.createElement('button');
addBtn.className = 'btn-add';
@ -404,7 +405,7 @@
function addCustom() {
var v = addInput.value.trim();
if (!v) return;
if (!v || v === 'undefined' || v === 'null') return;
if (v.indexOf('://') === -1) {
showToast('URL must include protocol (rtsp://, http://, bubble://, ...)');
return;
@ -592,7 +593,7 @@
addInput.type = 'text';
addInput.placeholder = 'rtsp://user:pass@host/path or bubble://...';
addInput.spellcheck = false;
addInput.value = pendingInput;
addInput.value = pendingInput || '';
var addBtn = document.createElement('button');
addBtn.className = 'btn-add';
addBtn.type = 'button';
@ -600,7 +601,7 @@
function addCustom() {
var v = addInput.value.trim();
if (!v) return;
if (!v || v === 'undefined' || v === 'null') return;
if (v.indexOf('://') === -1) { showToast('URL must include protocol (rtsp://, http://, bubble://, ...)'); return; }
if (customStreams.indexOf(v) !== -1 || dbStreams.indexOf(v) !== -1) { showToast('This URL is already in the list'); return; }
customStreams.push(v);

2249
www/design-system.html Normal file
View file

File diff suppressed because it is too large Load diff

278
www/homekit.html
View file

@ -42,15 +42,31 @@
}
.screen {
min-height: 100vh; padding: 1.5rem;
display: flex; align-items: flex-start; justify-content: center;
min-height: 100vh;
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn var(--transition-base);
}
.container { max-width: 520px; width: 100%; margin-top: 6vh; }
.container { max-width: 480px; width: 100%; }
@media (min-width: 768px) {
.screen { padding: 3rem 1.5rem; }
.container { max-width: 540px; }
}
.back-wrapper {
position: absolute; top: 1.5rem;
left: 50%; transform: translateX(-50%);
width: 100%; max-width: 600px;
padding: 0 1.5rem;
z-index: 10;
}
@media (min-width: 768px) {
.back-wrapper { max-width: 660px; }
}
.btn-back {
@ -58,87 +74,75 @@
background: none; border: none;
color: var(--text-secondary); font-size: 0.875rem;
font-family: var(--font-primary); cursor: pointer;
padding: 0.5rem 0; margin-bottom: 2rem;
padding: 0.5rem 0;
transition: color var(--transition-fast);
}
.btn-back:hover { color: var(--purple-primary); }
.card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
text-align: center;
}
.hero { text-align: center; margin-bottom: 2.5rem; }
.card-icon {
width: 48px; height: 48px;
margin: 0 auto 1.25rem;
color: var(--purple-light);
}
.card-title {
.title {
font-size: 1.25rem; font-weight: 600;
margin-bottom: 0.5rem;
letter-spacing: 0.03em;
color: var(--text-primary);
}
.card-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(139, 92, 246, 0.15);
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 6px;
font-size: 0.75rem; font-weight: 600;
color: var(--purple-light);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1.5rem;
.homekit-logo {
width: 72px; height: 72px;
margin: 0 auto;
filter: drop-shadow(0 4px 16px rgba(255, 171, 31, 0.3));
}
.device-info {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
text-align: left;
.form-group { margin-bottom: 1.5rem; }
.label {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.875rem; font-weight: 500;
color: var(--text-secondary); margin-bottom: 0.75rem;
}
.device-row {
display: flex; justify-content: space-between;
padding: 0.375rem 0;
font-size: 0.8125rem;
/* Info icon + tooltip */
.info-icon {
position: relative; display: inline-flex;
align-items: center; justify-content: center;
width: 16px; height: 16px; cursor: help;
color: var(--text-tertiary); transition: color var(--transition-fast);
}
.device-row:not(:last-child) {
border-bottom: 1px solid rgba(139, 92, 246, 0.07);
.info-icon:hover { color: var(--purple-primary); }
.info-icon svg { width: 16px; height: 16px; }
.tooltip {
position: absolute; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%);
background: var(--bg-elevated);
border: 1px solid var(--purple-primary);
border-radius: 8px; padding: 1rem;
width: 320px; max-width: 90vw;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--purple-glow);
z-index: 1000; opacity: 0; visibility: hidden;
transition: opacity var(--transition-fast), visibility var(--transition-fast);
pointer-events: none;
}
.device-label { color: var(--text-tertiary); }
.device-value { color: var(--text-primary); font-family: var(--font-mono); font-size: 0.75rem; }
.tooltip::after {
content: ''; position: absolute; bottom: 100%; left: 50%;
transform: translateX(-50%);
border: 6px solid transparent; border-bottom-color: var(--purple-primary);
}
.info-icon:hover .tooltip { opacity: 1; visibility: visible; }
.tooltip-title { font-weight: 600; color: var(--purple-primary); margin-bottom: 0.5rem; font-size: 0.875rem; }
.tooltip-text { font-size: 0.75rem; line-height: 1.5; color: var(--text-secondary); }
/* PIN input */
.pin-section { margin-bottom: 1.5rem; }
.pin-label {
font-size: 0.875rem; font-weight: 500;
color: var(--text-secondary);
margin-bottom: 0.75rem;
}
.pin-hint {
font-size: 0.75rem; color: var(--text-tertiary);
margin-top: 0.625rem;
}
.pin-row {
display: flex; align-items: center; justify-content: center;
gap: 0;
}
.pin-group {
display: flex; gap: 0.375rem;
}
.pin-group { display: flex; gap: 0.375rem; }
.pin-separator {
font-size: 1.5rem; font-weight: 300;
@ -149,8 +153,8 @@
}
.pin-digit {
width: 44px; height: 56px;
background: var(--bg-primary);
width: 57px; height: 69px;
background: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
@ -195,27 +199,28 @@
.pin-group { gap: 0.25rem; }
}
/* Error message */
.error-msg {
margin-top: 1rem; padding: 0.75rem 1rem;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
/* Error */
.error-box {
padding: 1rem;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
font-size: 0.8125rem; color: var(--error);
text-align: left;
color: var(--error);
font-size: 0.875rem;
margin-bottom: 1.5rem;
display: none;
animation: fadeIn var(--transition-fast);
}
.error-msg.visible { display: block; }
.error-box.visible { display: block; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 8px;
font-size: 0.9375rem; font-weight: 600; font-family: var(--font-primary);
font-size: 1rem; font-weight: 600; font-family: var(--font-primary);
cursor: pointer; transition: all var(--transition-fast);
border: none; outline: none; width: 100%;
border: none; outline: none;
}
.btn-primary {
@ -229,14 +234,20 @@
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-large { width: 100%; padding: 1.5rem; font-size: 1.125rem; }
.btn-outline {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 8px;
font-size: 1rem; font-weight: 600; font-family: var(--font-primary);
cursor: pointer; transition: all var(--transition-fast);
background: transparent; color: var(--text-secondary);
border: 1px solid var(--border-color);
border: 1px solid var(--border-color); width: 100%;
margin-top: 0.75rem;
}
.btn-outline:hover { border-color: var(--purple-primary); color: var(--purple-light); }
/* Pairing state */
/* Pairing spinner */
.pairing-spinner {
width: 20px; height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
@ -256,45 +267,56 @@
</head>
<body>
<div class="back-wrapper">
<button class="btn-back" id="btn-back">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Back
</button>
</div>
<div class="screen">
<div class="container">
<button class="btn-back" id="btn-back">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<div class="hero">
<svg class="homekit-logo" viewBox="100 120 824 780" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#FA9012" d="M883.2,413.1l-70.4-55.6l0,0V231.1c0-8.6-3.4-11-9.5-11h-64.4c-7,0-11.3,1.4-11.3,11v59.1l0,0 C634.5,216.7,533.6,137,529.8,134c-7.6-6-12.3-7.6-17.8-7.6c-5.4,0-10.1,1.6-17.8,7.6c-7.6,6-343.2,271.1-353.4,279.1 c-12.4,9.8-8.9,23.9,4.9,23.9h65.5v355.6c0,23,9.2,32.2,31.1,32.2h539.4c21.9,0,31.1-9.2,31.1-32.2V436.9h65.5 C892.1,436.9,895.6,422.9,883.2,413.1z M757.6,742.6c0,15.9-8.2,26.9-24.8,26.9H291.1c-16.6,0-24.8-11-24.8-26.9V410.3 c0-19.3,8.4-31.6,18.1-39.2l212.4-167.7c5.6-4.4,10.4-6.3,15.1-6.3s9.5,1.9,15.1,6.4l212.4,167.7c9.6,7.6,18.1,19.9,18.1,39.2 V742.6z"/>
<path fill="#FFAB1F" d="M739.6,371.1L527.1,203.3c-5.6-4.4-10.6-6.3-15.1-6.3c-4.6,0-9.5,1.9-15.1,6.4L284.4,371.1 c-9.6,7.6-18.1,19.9-18.1,39.2v332.3c0,15.9,8.2,26.9,24.8,26.9h441.7c16.6,0,24.8-11,24.8-26.9V410.3 C757.6,391,749.2,378.7,739.6,371.1z M702.6,692.7c0,14.8-8.4,21.7-20.7,21.7H342.2c-12.3,0-20.7-6.9-20.7-21.7V433.2 c0-14.4,3.4-22.6,13.6-30.7c5.8-4.6,160.3-126.6,164.4-129.8c4.1-3.3,8.5-4.9,12.5-4.9c4,0,8.4,1.7,12.5,4.9 c4.1,3.3,158.6,125.3,164.4,129.8c10.2,8.1,13.6,16.4,13.6,30.7L702.6,692.7z"/>
<path fill="#FFBE41" d="M688.9,402.5c-5.8-4.5-160.3-126.6-164.4-129.8c-4.1-3.3-8.5-4.9-12.5-4.9c-4,0-8.4,1.7-12.5,4.9 c-4.1,3.3-158.6,125.3-164.4,129.8c-10.2,8.1-13.6,16.4-13.6,30.7v259.5c0,14.8,8.4,21.7,20.7,21.7h339.7 c12.3,0,20.7-6.9,20.7-21.7V433.2C702.5,418.9,699.1,410.6,688.9,402.5z M647.4,642.8c0,11.9-6.6,16.5-15.6,16.5H392.2 c-9,0-15.6-4.6-15.6-16.5V456.2c0-8.3,0-14.9,9.1-22.2c6-4.8,113.2-89.4,116.4-91.9s6.4-3.8,9.9-3.8c3.6,0.1,7.1,1.5,9.9,3.8 c3.2,2.5,110.4,87.1,116.4,91.9c9.1,7.3,9.1,13.9,9.1,22.2L647.4,642.8z"/>
<path fill="#FFD260" d="M638.3,434c-6-4.8-113.2-89.4-116.4-91.9c-2.8-2.4-6.3-3.7-9.9-3.8c-3.5,0-6.7,1.3-9.9,3.8 S391.6,429.2,385.7,434c-9.1,7.3-9.1,13.9-9.1,22.2v186.6c0,11.9,6.6,16.5,15.6,16.5h239.5c9,0,15.6-4.6,15.6-16.5V456.2 C647.4,447.8,647.4,441.2,638.3,434z M592.3,593c0,9.2-4.6,11.2-11,11.2H442.8c-6.4,0-11-2.1-11-11.2V479.1 c0-6.4,2.9-12.6,7.8-16.6c2.8-2.3,63-49.4,65.1-51.1c4.2-3.5,10.4-3.5,14.6,0c2.2,1.7,62.3,48.8,65.1,51.1 c5,4.1,7.9,10.2,7.8,16.6L592.3,593z"/>
<path fill="#FFE780" d="M512,604.1h69.2c6.4,0,11-2.1,11-11.2V479.1c0-6.4-2.9-12.6-7.8-16.6c-2.8-2.3-63-49.4-65.1-51.1 c-4.2-3.5-10.4-3.5-14.6,0c-2.1,1.7-62.3,48.8-65.1,51.1c-5,4.1-7.9,10.2-7.8,16.6v113.8c0,9.2,4.6,11.2,11,11.2L512,604.1z"/>
</svg>
Back
</button>
<div class="card">
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
<h2 class="card-title" id="card-title">HomeKit Camera</h2>
<div class="card-badge">Apple HomeKit</div>
<div id="device-info" class="device-info"></div>
<div class="pin-section">
<div class="pin-label">Enter the 8-digit code from your camera</div>
<div class="pin-row" id="pin-row">
<div class="pin-group" id="group-0"></div>
<span class="pin-separator">-</span>
<div class="pin-group" id="group-1"></div>
<span class="pin-separator">-</span>
<div class="pin-group" id="group-2"></div>
</div>
<div class="pin-hint">Printed on the camera or in the manual</div>
</div>
<div class="error-msg" id="error-msg"></div>
<button class="btn btn-primary" id="btn-pair" disabled>Pair Device</button>
<button class="btn btn-outline" id="btn-standard">Try Standard Discovery</button>
<h1 class="title">Apple HomeKit</h1>
</div>
<div class="form-group">
<label class="label">
Pairing Code
<span class="info-icon">
<svg viewBox="0 0 16 16" fill="none">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<div class="tooltip">
<div class="tooltip-title">HomeKit Pairing Code</div>
<p class="tooltip-text">The 8-digit code is usually printed on a label on the camera itself, on the packaging, or in the setup manual. It looks like XXX-XX-XXX.</p>
</div>
</span>
</label>
<div class="pin-row" id="pin-row">
<div class="pin-group" id="group-0"></div>
<span class="pin-separator">-</span>
<div class="pin-group" id="group-1"></div>
<span class="pin-separator">-</span>
<div class="pin-group" id="group-2"></div>
</div>
</div>
<div class="error-box" id="error-box"></div>
<button class="btn btn-primary btn-large" id="btn-pair" disabled>Pair Device</button>
<button class="btn-outline" id="btn-standard">Skip, use Standard Discovery</button>
</div>
</div>
@ -315,34 +337,6 @@
var mdnsPaired = params.get('mdns_paired') || '';
var mdnsDeviceId = params.get('mdns_device_id') || '';
// title
if (mdnsName) document.getElementById('card-title').textContent = mdnsName;
// device info
var infoDiv = document.getElementById('device-info');
var rows = [];
if (ip) rows.push(['IP Address', ip]);
if (mdnsModel) rows.push(['Model', mdnsModel]);
if (mdnsCategory) rows.push(['Category', mdnsCategory]);
if (vendor) rows.push(['Vendor', vendor]);
if (mac) rows.push(['MAC', mac]);
rows.forEach(function(r) {
var row = document.createElement('div');
row.className = 'device-row';
var label = document.createElement('span');
label.className = 'device-label';
label.textContent = r[0];
var value = document.createElement('span');
value.className = 'device-value';
value.textContent = r[1];
row.appendChild(label);
row.appendChild(value);
infoDiv.appendChild(row);
});
if (rows.length === 0) infoDiv.style.display = 'none';
// PIN input -- 8 digits: 3-2-3
var pinGroups = [3, 2, 3];
var inputs = [];
@ -444,14 +438,14 @@
}
function showError(msg) {
var el = document.getElementById('error-msg');
var el = document.getElementById('error-box');
el.textContent = msg;
el.classList.add('visible');
inputs.forEach(function(input) { input.classList.add('error'); });
}
function hideError() {
document.getElementById('error-msg').classList.remove('visible');
document.getElementById('error-box').classList.remove('visible');
}
function showSuccess() {
@ -515,9 +509,7 @@
var data = await r.json();
showSuccess();
btnPair.textContent = '';
var check = document.createTextNode('Paired!');
btnPair.appendChild(check);
btnPair.textContent = 'Paired!';
// redirect to create.html with the homekit URL
setTimeout(function() {

49
www/index.html
View file

@ -317,8 +317,8 @@
const data = await r.json();
if (data.type === 'standard' || (data.reachable && data.type !== 'homekit')) {
navigateStandard(ip, data);
if (data.type === 'onvif') {
navigateOnvif(ip, data);
return;
}
@ -327,6 +327,11 @@
return;
}
if (data.type === 'standard' || data.reachable) {
navigateStandard(ip, data);
return;
}
if (data.type === 'unreachable') {
showUnreachable(ip);
return;
@ -340,6 +345,46 @@
}
}
function navigateOnvif(ip, data) {
var p = new URLSearchParams();
p.set('ip', ip);
var probes = data.probes || {};
if (probes.ports && probes.ports.open && probes.ports.open.length) {
p.set('ports', probes.ports.open.join(','));
}
if (probes.arp) {
if (probes.arp.mac) p.set('mac', probes.arp.mac);
if (probes.arp.vendor) p.set('vendor', probes.arp.vendor);
}
if (probes.http && probes.http.server) {
p.set('server', probes.http.server);
}
if (probes.dns && probes.dns.hostname) {
p.set('hostname', probes.dns.hostname);
}
if (probes.ping && probes.ping.latency_ms) {
p.set('latency', Math.round(probes.ping.latency_ms));
}
if (probes.onvif) {
if (probes.onvif.url) p.set('onvif_url', probes.onvif.url);
if (probes.onvif.port) p.set('onvif_port', probes.onvif.port);
if (probes.onvif.name) p.set('onvif_name', probes.onvif.name);
if (probes.onvif.hardware) p.set('onvif_hardware', probes.onvif.hardware);
}
if (probes.mdns) {
if (probes.mdns.name) p.set('mdns_name', probes.mdns.name);
if (probes.mdns.model) p.set('mdns_model', probes.mdns.model);
if (probes.mdns.category) p.set('mdns_category', probes.mdns.category);
if (probes.mdns.device_id) p.set('mdns_device_id', probes.mdns.device_id);
if (probes.mdns.port) p.set('mdns_port', probes.mdns.port);
p.set('mdns_paired', probes.mdns.paired ? '1' : '0');
}
window.location.href = 'onvif.html?' + p.toString();
}
function navigateStandard(ip, data) {
var p = new URLSearchParams();
p.set('ip', ip);

469
www/onvif.html Normal file
View file

@ -0,0 +1,469 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#0a0a0f">
<title>Strix - ONVIF Camera</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg-primary: #0a0a0f;
--bg-secondary: #1a1a24;
--bg-tertiary: #24242f;
--bg-elevated: #2a2a38;
--purple-primary: #8b5cf6;
--purple-light: #a78bfa;
--purple-dark: #7c3aed;
--purple-glow: rgba(139, 92, 246, 0.3);
--purple-glow-strong: rgba(139, 92, 246, 0.5);
--text-primary: #e0e0e8;
--text-secondary: #a0a0b0;
--text-tertiary: #606070;
--success: #10b981;
--error: #ef4444;
--border-color: rgba(139, 92, 246, 0.15);
--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
--font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
font-family: var(--font-primary);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.5;
min-height: 100vh;
}
.screen {
min-height: 100vh;
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn var(--transition-base);
}
.container { max-width: 480px; width: 100%; }
@media (min-width: 768px) {
.screen { padding: 3rem 1.5rem; }
.container { max-width: 540px; }
}
.back-wrapper {
position: absolute; top: 1.5rem;
left: 50%; transform: translateX(-50%);
width: 100%; max-width: 600px;
padding: 0 1.5rem;
z-index: 10;
}
@media (min-width: 768px) {
.back-wrapper { max-width: 660px; }
}
.btn-back {
display: inline-flex; align-items: center; gap: 0.5rem;
background: none; border: none;
color: var(--text-secondary); font-size: 0.875rem;
font-family: var(--font-primary); cursor: pointer;
padding: 0.5rem 0;
transition: color var(--transition-fast);
}
.btn-back:hover { color: var(--purple-primary); }
.hero { text-align: center; margin-bottom: 2.5rem; }
.onvif-word {
font-size: 2.5rem; font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 1rem;
}
.onvif-o {
background: linear-gradient(180deg, #00a0e9 0%, #1a237e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.onvif-nvif {
color: var(--text-primary);
}
.title {
font-size: 1.25rem; font-weight: 600;
letter-spacing: 0.03em;
color: var(--text-primary);
}
.subtitle {
font-size: 0.8125rem; color: var(--text-tertiary);
margin-top: 0.375rem;
font-family: var(--font-mono);
}
.subtitle .highlight {
color: var(--purple-light);
}
/* Form */
.form-group { margin-bottom: 1.5rem; }
.label {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.875rem; font-weight: 500;
color: var(--text-secondary); margin-bottom: 0.5rem;
}
.info-icon {
position: relative; display: inline-flex;
align-items: center; justify-content: center;
width: 16px; height: 16px; cursor: help;
color: var(--text-tertiary); transition: color var(--transition-fast);
}
.info-icon:hover { color: var(--purple-primary); }
.info-icon svg { width: 16px; height: 16px; }
.tooltip {
position: absolute; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%);
background: var(--bg-elevated);
border: 1px solid var(--purple-primary);
border-radius: 8px; padding: 1rem;
width: 320px; max-width: 90vw;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--purple-glow);
z-index: 1000; opacity: 0; visibility: hidden;
transition: opacity var(--transition-fast), visibility var(--transition-fast);
pointer-events: none;
}
.tooltip::after {
content: ''; position: absolute; bottom: 100%; left: 50%;
transform: translateX(-50%);
border: 6px solid transparent; border-bottom-color: var(--purple-primary);
}
.info-icon:hover .tooltip { opacity: 1; visibility: visible; }
.tooltip-title { font-weight: 600; color: var(--purple-primary); margin-bottom: 0.5rem; font-size: 0.875rem; }
.tooltip-text { font-size: 0.75rem; line-height: 1.5; color: var(--text-secondary); }
.input {
width: 100%; padding: 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-primary);
font-size: 1rem; font-family: var(--font-primary);
transition: all var(--transition-fast);
outline: none;
}
.input:focus {
border-color: var(--purple-primary);
box-shadow: 0 0 0 3px var(--purple-glow);
}
.input::placeholder { color: var(--text-tertiary); }
.input-password { position: relative; }
.input-password .input { padding-right: 3rem; }
.btn-toggle-pass {
position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
background: none; border: none; padding: 0.5rem; cursor: pointer;
color: var(--text-tertiary); display: flex;
transition: color var(--transition-fast);
}
.btn-toggle-pass:hover { color: var(--purple-primary); }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 8px;
font-size: 1rem; font-weight: 600; font-family: var(--font-primary);
cursor: pointer; transition: all var(--transition-fast);
border: none; outline: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--purple-primary), var(--purple-dark));
color: white; box-shadow: 0 4px 12px var(--purple-glow);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 20px var(--purple-glow-strong);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-large { width: 100%; padding: 1.5rem; font-size: 1.125rem; }
.btn-outline {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 8px;
font-size: 1rem; font-weight: 600; font-family: var(--font-primary);
cursor: pointer; transition: all var(--transition-fast);
background: transparent; color: var(--text-secondary);
border: 1px solid var(--border-color); width: 100%;
margin-top: 0.75rem;
}
.btn-outline:hover { border-color: var(--purple-primary); color: var(--purple-light); }
/* Checkbox */
.checkbox-row {
margin-bottom: 1.5rem;
}
.checkbox-label {
display: flex; align-items: center; gap: 0.625rem;
font-size: 0.875rem; color: var(--text-secondary);
cursor: pointer; user-select: none;
}
.checkbox-label input { display: none; }
.checkbox-custom {
width: 18px; height: 18px; flex-shrink: 0;
border: 2px solid var(--border-color);
border-radius: 4px;
background: var(--bg-secondary);
transition: all var(--transition-fast);
position: relative;
}
.checkbox-label input:checked + .checkbox-custom {
background: var(--purple-primary);
border-color: var(--purple-primary);
}
.checkbox-label input:checked + .checkbox-custom::after {
content: '';
position: absolute; top: 2px; left: 5px;
width: 5px; height: 9px;
border: solid white; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
</style>
</head>
<body>
<div class="back-wrapper">
<button class="btn-back" id="btn-back">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M12 4L6 10l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Back
</button>
</div>
<div class="screen">
<div class="container">
<div class="hero">
<div class="onvif-word"><span class="onvif-o">O</span><span class="onvif-nvif">nvif</span></div>
<h1 class="title" id="title">ONVIF Camera</h1>
<p class="subtitle" id="subtitle"></p>
</div>
<div class="form-group">
<label class="label">
Username
<span class="info-icon">
<svg viewBox="0 0 16 16" fill="none">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<div class="tooltip">
<div class="tooltip-title">ONVIF Username</div>
<p class="tooltip-text">The username for your camera's ONVIF service. Usually the same as the web interface login. Common defaults: admin, root.</p>
</div>
</span>
</label>
<input type="text" id="f-user" class="input" value="admin" autocomplete="off" spellcheck="false">
</div>
<div class="form-group">
<label class="label">
Password
<span class="info-icon">
<svg viewBox="0 0 16 16" fill="none">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/>
<path d="M8 7v4M8 5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<div class="tooltip">
<div class="tooltip-title">ONVIF Password</div>
<p class="tooltip-text">The password for your camera's ONVIF service. Some cameras allow ONVIF access without a password -- leave empty to try.</p>
</div>
</span>
</label>
<div class="input-password">
<input type="password" id="f-pass" class="input" placeholder="Camera password" autocomplete="off">
<button class="btn-toggle-pass" id="btn-toggle-pass" type="button">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
</button>
</div>
</div>
<div class="checkbox-row" id="checkbox-row">
<label class="checkbox-label">
<input type="checkbox" id="cb-top1000" checked>
<span class="checkbox-custom"></span>
Also test popular stream patterns
</label>
</div>
<button class="btn btn-primary btn-large" id="btn-discover">Discover Streams</button>
<button class="btn-outline" id="btn-standard">Skip, use Standard Discovery</button>
<button class="btn-outline" id="btn-homekit" style="display:none">Try HomeKit Pairing</button>
</div>
</div>
<script>
var params = new URLSearchParams(location.search);
var ip = params.get('ip') || '';
var ports = params.get('ports') || '';
var mac = params.get('mac') || '';
var vendor = params.get('vendor') || '';
var server = params.get('server') || '';
var hostname = params.get('hostname') || '';
var latency = params.get('latency') || '';
var onvifUrl = params.get('onvif_url') || '';
var onvifPort = params.get('onvif_port') || '';
var onvifName = params.get('onvif_name') || '';
var onvifHardware = params.get('onvif_hardware') || '';
var mdnsName = params.get('mdns_name') || '';
var mdnsModel = params.get('mdns_model') || '';
var mdnsCategory = params.get('mdns_category') || '';
var mdnsPort = params.get('mdns_port') || '';
var mdnsPaired = params.get('mdns_paired') || '';
var mdnsDeviceId = params.get('mdns_device_id') || '';
// title from ONVIF name
if (onvifName) {
document.getElementById('title').textContent = onvifName;
}
// subtitle with IP and hardware
var subtitleEl = document.getElementById('subtitle');
var parts = [];
if (ip) parts.push(ip);
if (onvifHardware && onvifHardware !== onvifName) parts.push(onvifHardware);
if (parts.length) {
while (subtitleEl.firstChild) subtitleEl.removeChild(subtitleEl.firstChild);
parts.forEach(function(text, i) {
if (i > 0) {
var sep = document.createElement('span');
sep.textContent = ' / ';
subtitleEl.appendChild(sep);
}
var span = document.createElement('span');
span.className = 'highlight';
span.textContent = text;
subtitleEl.appendChild(span);
});
}
// show HomeKit button only if mDNS data present
if (mdnsName && mdnsDeviceId) {
document.getElementById('btn-homekit').style.display = '';
}
// password toggle
document.getElementById('btn-toggle-pass').addEventListener('click', function() {
var input = document.getElementById('f-pass');
input.type = input.type === 'password' ? 'text' : 'password';
});
// discover streams -> build onvif:// URL and go to create.html
document.getElementById('btn-discover').addEventListener('click', function() {
var user = document.getElementById('f-user').value.trim();
var pass = document.getElementById('f-pass').value;
var auth = '';
if (user || pass) {
auth = encodeURIComponent(user) + ':' + encodeURIComponent(pass) + '@';
}
var host = ip;
var port = parseInt(onvifPort, 10) || 80;
if (port !== 80) {
host = ip + ':' + port;
}
var onvifStreamUrl = 'onvif://' + auth + host;
var p = new URLSearchParams();
p.set('url', onvifStreamUrl);
if (ip) p.set('ip', ip);
if (mac) p.set('mac', mac);
if (vendor) p.set('vendor', vendor);
if (onvifName) p.set('model', onvifName);
if (server) p.set('server', server);
if (hostname) p.set('hostname', hostname);
if (ports) p.set('ports', ports);
if (document.getElementById('cb-top1000').checked) {
p.set('ids', 'p:top-1000');
p.set('user', user);
if (pass) p.set('pass', pass);
}
window.location.href = 'create.html?' + p.toString();
});
// standard discovery
document.getElementById('btn-standard').addEventListener('click', function() {
var p = new URLSearchParams();
if (ip) p.set('ip', ip);
if (ports) p.set('ports', ports);
if (mac) p.set('mac', mac);
if (vendor) p.set('vendor', vendor);
if (server) p.set('server', server);
if (hostname) p.set('hostname', hostname);
if (latency) p.set('latency', latency);
window.location.href = 'standard.html?' + p.toString();
});
// homekit pairing
document.getElementById('btn-homekit').addEventListener('click', function() {
var p = new URLSearchParams();
if (ip) p.set('ip', ip);
if (ports) p.set('ports', ports);
if (mac) p.set('mac', mac);
if (vendor) p.set('vendor', vendor);
if (server) p.set('server', server);
if (hostname) p.set('hostname', hostname);
if (latency) p.set('latency', latency);
if (mdnsName) p.set('mdns_name', mdnsName);
if (mdnsModel) p.set('mdns_model', mdnsModel);
if (mdnsCategory) p.set('mdns_category', mdnsCategory);
if (mdnsPort) p.set('mdns_port', mdnsPort);
if (mdnsPaired) p.set('mdns_paired', mdnsPaired);
if (mdnsDeviceId) p.set('mdns_device_id', mdnsDeviceId);
window.location.href = 'homekit.html?' + p.toString();
});
// back
document.getElementById('btn-back').addEventListener('click', function() {
window.location.href = 'index.html';
});
// autofocus password field (user is prefilled)
document.getElementById('f-pass').focus();
</script>
</body>
</html>

8
www/test.html
View file

@ -423,11 +423,13 @@
function classifyResult(r) {
var scheme = r.source.split('://')[0] || '';
var isRtsp = scheme === 'rtsp' || scheme === 'rtsps';
var isRecommended = scheme === 'rtsp' || scheme === 'rtsps' || scheme === 'onvif';
var isJpegOnly = r.codecs && r.codecs.length > 0 && r.codecs.indexOf('H264') === -1 && r.codecs.indexOf('H265') === -1;
var isHD = r.width >= 1280;
if (isRtsp && isHD) return 'rec-main';
if (isRtsp) return 'rec-sub';
if (isJpegOnly) return 'alt';
if (isRecommended && isHD) return 'rec-main';
if (isRecommended) return 'rec-sub';
return 'alt';
}