{ "definitions": { "events": { "$ref": "#/definitions/Events", "$schema": "http://json-schema.org/draft-07/schema#", "definitions": { "CardinalDirection": { "enum": [ "C", "N", "S", "NE", "SE", "NW", "SW", "NO", "SO", "W", "O" ], "type": "string" }, "Events": { "additionalProperties": false, "properties": { "deletePreset": { "additionalProperties": false, "properties": { "name": { "type": "string" }, "playerId": { "type": "string" }, "time": { "format": "date-time", "type": "string" }, "token": { "type": "string" }, "x": { "type": "number" }, "y": { "type": "number" }, "z": { "type": "number" } }, "required": [ "name", "playerId", "time", "token", "x", "y", "z" ], "type": "object" }, "goToHome": { "additionalProperties": false, "properties": { "id": { "type": "string" }, "movementSettings": { "$ref": "#/definitions/TMovementSettings" }, "time": { "format": "date-time", "type": "string" } }, "required": [ "movementSettings", "id", "time" ], "type": "object" }, "goToPreset": { "additionalProperties": false, "properties": { "movementSettings": { "$ref": "#/definitions/TMovementSettings" }, "name": { "type": "string" }, "playerId": { "type": "string" }, "time": { "format": "date-time", "type": "string" }, "token": { "type": "string" }, "x": { "type": "number" }, "y": { "type": "number" }, "z": { "type": "number" } }, "required": [ "movementSettings", "name", "playerId", "time", "token", "x", "y", "z" ], "type": "object" }, "goToSelectedArea": { "additionalProperties": false, "properties": { "height": { "type": "number" }, "htmlVideoElementHeight": { "type": "number" }, "htmlVideoElementWidth": { "type": "number" }, "id": { "type": "string" }, "left": { "type": "number" }, "movementSettings": { "$ref": "#/definitions/TMovementSettings" }, "time": { "format": "date-time", "type": "string" }, "top": { "type": "number" }, "width": { "type": "number" } }, "required": [ "movementSettings", "id", "top", "left", "width", "height", "htmlVideoElementWidth", "htmlVideoElementHeight", "time" ], "type": "object" }, "initVideo": { "additionalProperties": false, "properties": { "htmlVideoElement": {}, "id": { "type": "string" }, "time": { "format": "date-time", "type": "string" } }, "required": [ "id", "time", "htmlVideoElement" ], "type": "object" }, "panelMove": { "additionalProperties": false, "properties": { "id": { "type": "string" }, "opened": { "type": "boolean" } }, "required": [ "id", "opened" ], "type": "object" }, "sendDirection": { "additionalProperties": false, "properties": { "direction": { "enum": [ "up", "right", "down", "left" ], "type": "string" }, "id": { "type": "string" }, "joyId": { "type": "string" }, "movementSettings": { "$ref": "#/definitions/TMovementSettings" }, "time": { "format": "date-time", "type": "string" } }, "required": [ "movementSettings", "direction", "id", "joyId", "time" ], "type": "object" }, "sendJoystickPosition": { "additionalProperties": false, "properties": { "cardinalDirection": { "$ref": "#/definitions/CardinalDirection" }, "id": { "type": "string" }, "joyId": { "type": "string" }, "movementSettings": { "$ref": "#/definitions/TMovementSettings" }, "time": { "format": "date-time", "type": "string" }, "x": { "type": "number" }, "y": { "type": "number" } }, "required": [ "movementSettings", "x", "y", "cardinalDirection", "id", "joyId", "time" ], "type": "object" }, "setPreset": { "additionalProperties": false, "properties": { "id": { "type": "string" }, "time": { "format": "date-time", "type": "string" } }, "required": [ "id", "time" ], "type": "object" }, "zoomAction": { "additionalProperties": false, "properties": { "direction": { "enum": [ "in", "out" ], "type": "string" }, "id": { "type": "string" }, "movementSettings": { "$ref": "#/definitions/TMovementSettings" }, "time": { "format": "date-time", "type": "string" } }, "required": [ "movementSettings", "direction", "id", "time" ], "type": "object" } }, "required": [ "initVideo", "panelMove", "goToHome", "goToSelectedArea", "setPreset", "goToPreset", "deletePreset", "zoomAction", "sendJoystickPosition", "sendDirection" ], "type": "object" }, "TMovementSettings": { "additionalProperties": false, "properties": { "precision": { "type": "number" }, "speed": { "type": "number" } }, "required": [ "speed", "precision" ], "type": "object" } } }, "component": { "$ref": "#/definitions/Component", "$schema": "http://json-schema.org/draft-07/schema#", "definitions": { "Component": { "additionalProperties": false, "properties": { "configuration": { "additionalProperties": false, "properties": { "addPreset": { "type": "boolean" }, "clickToCenter": { "type": "boolean" }, "deletePreset": { "type": "boolean" }, "home": { "type": "boolean" }, "joystick": { "type": "boolean" }, "pan": { "type": "boolean" }, "presets": { "type": "boolean" }, "settings": { "type": "boolean" }, "switchPreset": { "type": "boolean" }, "tilt": { "type": "boolean" }, "zoom": { "additionalProperties": false, "properties": { "in": { "type": "boolean" }, "out": { "type": "boolean" } }, "type": "object" } }, "type": "object" }, "current_preset": { "type": "string" }, "id": { "type": "string" }, "is_home": { "type": "boolean" }, "is_ptz_connected": { "type": "boolean" }, "is_ptz_panel_opened": { "type": "boolean" }, "live_uri": { "type": "string" }, "media_type": { "enum": [ "hls", "webrtc", "auto", "whep", "" ], "type": "string" }, "position": { "enum": [ "top", "right-bottom", "left-bottom", "bottom", "right-top", "left-top" ], "type": "string" }, "presets": { "items": { "$ref": "#/definitions/TPreset" }, "type": "array" }, "style": { "type": "string" } }, "required": [ "live_uri" ], "type": "object" }, "TPreset": { "additionalProperties": false, "properties": { "name": { "type": "string" }, "token": { "type": "string" }, "x": { "type": "number" }, "y": { "type": "number" }, "z": { "type": "number" } }, "required": [ "token", "name", "x", "y", "z" ], "type": "object" } } } }, "description": "Live camera view built on `hb-player-live` with a configurable PTZ panel: D-pad or analog joystick, zoom in/out, go home, click-to-center region on the video, optional grid overlay, fullscreen, mute, and play/pause. Manages camera presets in dialogs with `hb-table` (add, go to, delete). Toolbar uses Bulma `button` / `buttons has-addons`. Feature flags live in `configuration`; PTZ and UI state are driven by `is_ptz_connected`, `is_ptz_panel_opened`, and `is_home`. Dispatches movement, preset, and video-init events for the host app to wire to your backend.", "storybookArgs": { "presets": { "control": { "type": "object" } }, "live_uri": { "control": { "type": "text" } }, "media_type": { "options": [ "", "webrtc", "hls", "auto", "whep" ], "control": { "type": "select" } }, "current_preset": { "control": { "type": "text" } }, "is_home": { "control": { "type": "boolean" } }, "is_ptz_connected": { "control": { "type": "boolean" } }, "is_ptz_panel_opened": { "control": { "type": "boolean" } }, "initVideo": { "action": "initVideoEvent" }, "panelMove": { "action": "panelMoveEvent" }, "goToHome": { "action": "goToHomeEvent" }, "goToSelectedArea": { "action": "goToSelectedAreaEvent" }, "setPreset": { "action": "setPresetEvent" }, "goToPreset": { "action": "goToPresetEvent" }, "deletePreset": { "action": "deletePresetEvent" }, "zoomAction": { "action": "zoomActionEvent" }, "sendJoystickPosition": { "action": "sendJoystickPositionEvent" }, "sendDirection": { "action": "sendDirectionEvent" } }, "styleSetup": { "vars": [ { "name": "--bulma-danger", "valueType": "color", "defaultValue": "#f14668", "description": "Click-to-center selection rectangle on the video (`#area_selector`)." }, { "name": "--bulma-border", "valueType": "color", "defaultValue": "#dbdbdb", "description": "Optional grid overlay lines on the video surface." }, { "name": "--bulma-link", "valueType": "color", "defaultValue": "#485fc7", "description": "Toolbar buttons, PTZ controls, and active accents." }, { "name": "--bulma-text", "valueType": "color", "defaultValue": "#363636", "description": "Labels and metadata in dialogs and toolbars." }, { "name": "--bulma-scheme-main", "valueType": "color", "defaultValue": "#ffffff", "description": "Panel and dialog surfaces layered over the player." }, { "name": "--hb-pad-joystick-size", "valueType": "number", "defaultValue": "100px", "description": "Diameter passed to nested `hb-pad-joystick` (set on that child in component SCSS)." } ], "parts": [] }, "contributors": [], "htmlSlots": [], "i18n": [], "examples": [ { "name": "default", "data": { "live_uri": "", "is_ptz_connected": true, "is_ptz_panel_opened": true, "media_type": "auto" } }, { "name": "withPresets", "data": { "live_uri": "", "is_ptz_connected": true, "is_ptz_panel_opened": true, "media_type": "auto", "presets": [ { "name": "Preset 1", "token": "preset1", "x": 0, "y": 0, "z": 0 }, { "name": "Preset 2", "token": "preset2", "x": 0, "y": 0, "z": 0 } ] } }, { "name": "withPresetSelected", "data": { "live_uri": "", "media_type": "auto", "is_ptz_connected": true, "is_ptz_panel_opened": true, "presets": [ { "name": "Preset 1", "token": "preset1", "x": 0, "y": 0, "z": 0 }, { "name": "Preset 2", "token": "preset2", "x": 0, "y": 0, "z": 0 } ], "current_preset": "preset1" } }, { "name": "withPanelClosed", "data": { "live_uri": "", "media_type": "auto", "is_ptz_connected": true, "presets": [ { "name": "Preset 1", "token": "preset1", "x": 0, "y": 0, "z": 0 }, { "name": "Preset 2", "token": "preset2", "x": 0, "y": 0, "z": 0 } ], "current_preset": "preset1" } }, { "name": "disconnected", "data": { "media_type": "auto", "live_uri": "", "presets": [], "current_preset": "preset1" } } ], "iifeIntegrity": "sha384-nMWNuSOa/pVII5XlzoJxxl2VHkDFFZ/U64EdyzPmkQHGIERLPbUtdIeCeIfLeKRA", "dependencies": [ { "name": "hb-dialog", "dependencies": [] }, { "name": "hb-pad-joystick", "dependencies": [] }, { "name": "hb-player-live", "dependencies": [] }, { "name": "hb-table", "dependencies": [ { "name": "hb-dialog", "dependencies": [] }, { "name": "hb-dialogform", "dependencies": [ { "name": "hb-dialog", "dependencies": [] }, { "name": "hb-form", "dependencies": [ { "name": "hb-input-area", "dependencies": [] }, { "name": "hb-input-array-objects", "dependencies": [ { "name": "hb-form", "dependencies": [] }, { "name": "hb-table", "dependencies": [] } ] }, { "name": "hb-input-array-tags", "dependencies": [] }, { "name": "hb-input-checkbox", "dependencies": [] }, { "name": "hb-input-color", "dependencies": [] }, { "name": "hb-input-coords", "dependencies": [ { "name": "hb-input-number", "dependencies": [] }, { "name": "hb-map", "dependencies": [] } ] }, { "name": "hb-input-date", "dependencies": [] }, { "name": "hb-input-datetime", "dependencies": [ { "name": "hb-input-date", "dependencies": [] }, { "name": "hb-input-number", "dependencies": [] } ] }, { "name": "hb-input-email", "dependencies": [] }, { "name": "hb-input-file", "dependencies": [] }, { "name": "hb-input-number", "dependencies": [] }, { "name": "hb-input-radio", "dependencies": [] }, { "name": "hb-input-range", "dependencies": [] }, { "name": "hb-input-select", "dependencies": [] }, { "name": "hb-input-text", "dependencies": [] } ] } ] }, { "name": "hb-paginate", "dependencies": [ { "name": "hb-input-number", "dependencies": [] }, { "name": "hb-input-select", "dependencies": [] } ] }, { "name": "hb-tooltip", "dependencies": [] } ] } ], "screenshots": [], "licenses": [ { "type": "Apache-2.0", "path": "LICENSE.md", "cost": 0, "currency": "EUR" } ], "readmePath": "README.md", "name": "hb-player-live-camera-ptz", "category": "media", "tags": [ "media", "video", "streaming", "camera" ], "size": {}, "iifePath": "main.iife.js", "repoName": "@htmlbricks/hb-player-live-camera-ptz", "version": "0.76.5" }