ONVIF Profile S, Actions API, and PTZ Controls Implementation

docs/docs/developers/documentation.mdx

@@ -55,8 +55,11 @@ const ComponentMetadata: Component = {
   title: "Fancy Component",
   name: "fancy_component",
   description: "A fancy component",
-  image: "/img/components/fancy_component.png",
+  image: "/img/components/fancy_component.svg",  // SVG assets are prioritized.
   tags: ["motion_detector"],
+  category: "new",  // Set to null if it has already been published in a previous version.
+  path: "viseron/components/fancy_component",
+  issue: "fancy_component",
 };
 
 export default ComponentMetadata;
@@ -69,13 +72,16 @@ If domains are set up in the component, they will be automatically added to the
 The following tags are available:
 
 - `camera`
-- `face_recognition`
-- `image_classification`
-- `license_plate_recognition`
-- `motion_detector`
 - `nvr`
-- `object_detector`
 - `system`
+- `protocol`
+- `notification`
+- `object_detector`
+- `motion_detector`
+- `image_classification`
+- `face_recognition`
+- `license_plate_recognition`
+- `integration`
 
 :::warning
 

docs/docs/documentation.md

@@ -20,6 +20,7 @@ Viserons features include, but not limited to the following:
 - Tiered storage, allowing multiple storage media with different retention policies
 - A timeline view of events
 - Built in authentication system
+- [ONVIF](https://www.onvif.org/) compatible with Profile S
 - Object detection via:
   - YOLOv3, YOLOv4 and YOLOv7 Darknet using OpenCV
   - Tensorflow via [Google Coral EdgeTPU](https://coral.ai/)

docs/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
+    "prebuild": "node src/lib/generateCommitDates.mjs",
     "start": "docusaurus start --host=0.0.0.0",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",

docs/src/generated/commitDates.json

@@ -0,0 +1,91 @@
+{
+  "viseron/components/background_subtractor": {
+    "created": "2021-11-23T11:41:33Z",
+    "updated": "2026-03-06T18:38:28Z"
+  },
+  "viseron/components/codeprojectai": {
+    "created": "2023-04-27T12:09:31Z",
+    "updated": "2026-02-04T09:03:49Z"
+  },
+  "viseron/components/compreface": {
+    "created": "2022-11-01T16:12:07Z",
+    "updated": "2026-04-16T20:46:29Z"
+  },
+  "viseron/components/darknet": {
+    "created": "2021-12-06T15:10:41Z",
+    "updated": "2026-04-16T20:57:53Z"
+  },
+  "viseron/components/deepstack": {
+    "created": "2021-12-07T06:25:47Z",
+    "updated": "2026-02-04T09:03:49Z"
+  },
+  "viseron/components/discord": {
+    "created": "2025-03-17T23:00:48Z",
+    "updated": "2026-06-24T15:09:38Z"
+  },
+  "viseron/components/dlib": {
+    "created": "2021-12-27T14:26:06Z",
+    "updated": "2026-04-17T20:29:01Z"
+  },
+  "viseron/components/edgetpu": {
+    "created": "2021-11-01T10:25:23Z",
+    "updated": "2026-04-17T20:35:02Z"
+  },
+  "viseron/components/ffmpeg": {
+    "created": "2021-10-19T20:22:12Z",
+    "updated": "2026-05-15T14:57:37Z"
+  },
+  "viseron/components/go2rtc": {
+    "created": "2025-04-29T09:09:42Z",
+    "updated": "2026-07-30T20:54:04Z"
+  },
+  "viseron/components/gotify": {
+    "created": "2025-03-18T01:55:20Z",
+    "updated": "2026-03-13T22:17:22Z"
+  },
+  "viseron/components/gstreamer": {
+    "created": "2022-03-02T17:36:39Z",
+    "updated": "2026-05-02T12:41:46Z"
+  },
+  "viseron/components/hailo": {
+    "created": "2025-09-10T05:21:41Z",
+    "updated": "2026-04-17T20:31:34Z"
+  },
+  "viseron/components/logger": {
+    "created": "2021-10-11T12:53:55Z",
+    "updated": "2026-03-26T14:02:48Z"
+  },
+  "viseron/components/mog2": {
+    "created": "2021-11-23T11:40:40Z",
+    "updated": "2026-03-14T21:48:33Z"
+  },
+  "viseron/components/mqtt": {
+    "created": "2021-12-22T12:52:23Z",
+    "updated": "2026-06-08T15:13:58Z"
+  },
+  "viseron/components/nvr": {
+    "created": "2021-10-25T12:29:15Z",
+    "updated": "2026-06-08T15:13:58Z"
+  },
+  "viseron/components/onvif": null,
+  "viseron/components/storage": {
+    "created": "2023-06-12T15:05:18Z",
+    "updated": "2026-07-29T21:33:00Z"
+  },
+  "viseron/components/telegram": {
+    "created": "2024-07-29T21:40:23Z",
+    "updated": "2026-06-22T09:44:12Z"
+  },
+  "viseron/components/webhook": {
+    "created": "2025-08-15T12:18:50Z",
+    "updated": "2026-06-17T10:15:15Z"
+  },
+  "viseron/components/webserver": {
+    "created": "2021-10-12T14:58:37Z",
+    "updated": "2026-07-08T21:16:12Z"
+  },
+  "viseron/components/yolo": {
+    "created": "2025-06-22T17:09:46Z",
+    "updated": "2026-06-16T16:43:39Z"
+  }
+}

docs/src/lib/generateCommitDates.mjs

@@ -0,0 +1,105 @@
+import fs from "fs";
+import path from "path";
+
+const ROOT =
+  "src/pages/components-explorer/components";
+
+const OUTPUT =
+  "src/generated/commitDates.json";
+
+const BASE_URL =
+  "https://api.github.com/repos/roflcoopter/viseron/commits";
+
+const headers = {
+  /**
+  ...(process.env.GITHUB_TOKEN
+    ? { Authorization: `Bearer ${process.env.GITHUB_TOKEN}` }
+    : {}),
+  */
+  Accept: "application/vnd.github+json",
+};
+
+/**
+ * Recursively find all _meta.tsx files
+ */
+function findMetaFiles(dir) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  const result = [];
+
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      result.push(...findMetaFiles(full));
+    } else if (e.name === "_meta.tsx") {
+      result.push(full);
+    }
+  }
+  return result;
+}
+
+/**
+ * Extract `path: "..."` from _meta.tsx source
+ */
+function extractPathFromMeta(filePath) {
+  const content = fs.readFileSync(filePath, "utf8");
+
+  const match = content.match(
+    /path\s*:\s*["'`]([^"'`]+)["'`]/
+  );
+
+  return match?.[1] ?? null;
+}
+
+async function fetchCommitDates(repoPath) {
+  const encoded = encodeURIComponent(repoPath);
+
+  // latest commit
+  const latestRes = await fetch(
+    `${BASE_URL}?sha=master&path=${encoded}&per_page=1`,
+    { headers }
+  );
+  const latest = await latestRes.json();
+  if (!Array.isArray(latest) || latest.length === 0) {
+    return null;
+  }
+
+  const updated = latest[0].commit.author.date;
+
+  // oldest commit (paginate)
+  let page = 1;
+  let created = updated;
+
+  while (true) {
+    const res = await fetch(
+      `${BASE_URL}?sha=master&path=${encoded}&per_page=100&page=${page}`,
+      { headers }
+    );
+    const data = await res.json();
+    if (!Array.isArray(data) || data.length === 0) break;
+
+    created =
+      data[data.length - 1].commit.author.date;
+
+    if (data.length < 100) break;
+    page++;
+  }
+
+  return { created, updated };
+}
+
+async function main() {
+  const metaFiles = findMetaFiles(ROOT);
+  const result = {};
+
+  for (const file of metaFiles) {
+    const repoPath = extractPathFromMeta(file);
+    if (!repoPath) continue;
+
+    result[repoPath] = await fetchCommitDates(repoPath);
+  }
+
+  fs.mkdirSync(path.dirname(OUTPUT), { recursive: true });
+  fs.writeFileSync(OUTPUT, JSON.stringify(result, null, 2));
+}
+
+main().catch(console.error);

docs/src/lib/getCommitsDates.ts

@@ -0,0 +1,10 @@
+import data from "@site/src/generated/commitDates.json";
+
+type CommitDates = {
+  created?: string;
+  updated?: string;
+};
+
+export default function useCommitDates(path: string): CommitDates {
+  return data[path] ?? {};
+}

docs/src/lib/iconMap.tsx

@@ -4,8 +4,8 @@ import {
   Chip,
   ConnectionSignal,
   FaceActivated,
-  GroupObjects,
-  ImageReference,
+  WatsonHealth3DMprToggle,
+  VisualRecognition,
   Movement,
   Notification,
   Video,
@@ -18,8 +18,8 @@ export const iconMap: Record<string, CarbonIconType> = {
   CarFront,
   ConnectionSignal,
   FaceActivated,
-  GroupObjects,
-  ImageReference,
+  WatsonHealth3DMprToggle,
+  VisualRecognition,
   Movement,
   Notification,
   Chip,

docs/src/pages/components-explorer/_components/ComponentHeader/index.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-
+import { Debug, LogoGithub } from "@carbon/icons-react";
 import Head from "@docusaurus/Head";
+import Link from "@docusaurus/Link";
 import Heading from "@theme/Heading";
 
+import useCommitDates from "@site/src/lib/getCommitsDates";
 import { getIconComponent } from "@site/src/lib/iconMap";
 import { Component, DomainType, Domains } from "@site/src/types";
 
@@ -37,6 +39,8 @@ function TagBadge({ tag }: { tag: DomainType }) {
 }
 
 function ComponentHeader({ meta }: { meta: Component }) {
+  const { created, updated } = useCommitDates(meta.path);
+
   return (
     <div>
       <Head>
@@ -68,7 +72,66 @@ function ComponentHeader({ meta }: { meta: Component }) {
         </div>
         <img src={meta.image} alt={meta.title} />
       </div>
-      <hr className="divider" />
+      <hr className="divider" style={{ marginBottom: 10 }} />
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            columnGap: 20,
+          }}
+        >
+          <div
+            style={{
+              color: "gray",
+            }}
+          >
+            Created: {created ? new Date(created).toLocaleDateString() : "—"}
+          </div>
+          <div
+            style={{
+              color: "gray",
+            }}
+          >
+            Updated: {updated ? new Date(updated).toLocaleDateString() : "—"}
+          </div>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            columnGap: 20,
+          }}
+        >
+          <Link
+            href={`https://github.com/roflcoopter/viseron/tree/master/${meta.path}`}
+            style={{
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <LogoGithub />
+            &nbsp;View source on Github
+          </Link>
+          <Link
+            href={`https://github.com/roflcoopter/viseron/issues?q=is:issue%20${meta.issue}`}
+            style={{
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <Debug />
+            &nbsp;View all issues
+          </Link>
+        </div>
+      </div>
+      <hr className="divider" style={{ marginTop: 10 }} />
     </div>
   );
 }

docs/src/pages/components-explorer/_components/ComponentHeader/styles.module.css

@@ -6,8 +6,8 @@
 }
 
 .header img {
-  max-height: 67px;
-  max-width: 100%;
+  max-height: 90px;
+  max-width: 200px;
 }
 
 @media only screen and (max-width: 600px) {

docs/src/pages/components-explorer/components/background_subtractor/_meta.tsx

@@ -8,6 +8,8 @@ const ComponentMetadata: Component = {
   image: "/img/logos/opencv.svg",
   tags: ["motion_detector"],
   category: null,
+  path: "viseron/components/background_subtractor",
+  issue: 'background_subtractor OR label:"component: background_subtractor" OR label:"domain: motion_detector"',
 };
 
 export default ComponentMetadata;