Merge pull request #371 from dermotduffy/rename-providers
Rename live providers to avoid WebRTC confusion
This commit is contained in:
Dermot Duffy
@@ -33,7 +33,6 @@ A full-featured Frigate Lovelace card:
|
||||
* Lovelace visual editing support.
|
||||
* Full [Picture Elements](https://www.home-assistant.io/lovelace/picture-elements/) support.
|
||||
* Theme friendly.
|
||||
* **Advanced**: Support for [WebRTC](https://github.com/AlexxIT/WebRTC) live viewing by embedding the WebRTC card.
|
||||
|
||||
## Screenshots Below!
|
||||
|
||||
@@ -92,36 +91,49 @@ cameras:
|
||||
| - | - | - | - |
|
||||
| `camera_entity` | | :heavy_multiplication_x: | The Home Assistant camera entity to use with the `frigate` live provider view. Also used to automatically detect the name of the underlying Frigate camera, and the title/icon of the camera. |
|
||||
| `camera_name` | Autodetected from `camera_entity` if that is specified. | :heavy_multiplication_x: | The Frigate camera name to use when communicating with the Frigate server, e.g. for viewing clips/snapshots or the JSMPEG live view. To view the birdseye view set this to `birdseye` and use the `frigate-jsmpeg` live provider.|
|
||||
| `live_provider` | `auto` | :heavy_multiplication_x: | The choice of live stream provider. See [Live Providers](#live-providers) below.|
|
||||
| `frigate_url` | | :heavy_multiplication_x: | The URL of the frigate server. If set, this value will be (exclusively) used for a `Frigate UI` menu button. |
|
||||
| `label` | | :heavy_multiplication_x: | A Frigate label / object filter used to filter events (clips & snapshots), e.g. 'person'.|
|
||||
| `zone` | | :heavy_multiplication_x: | A Frigate zone used to filter events (clips & snapshots), e.g. 'front_door'.|
|
||||
| `client_id` | `frigate` | :heavy_multiplication_x: | The Frigate client id to use. If this Home Assistant server has multiple Frigate server backends configured, this selects which server should be used. It should be set to the MQTT client id configured for this server, see [Frigate Integration Multiple Instance Support](https://docs.frigate.video/integrations/home-assistant/#multiple-instance-support).|
|
||||
| `title` | Autodetected from `camera_entity` if that is specified. | :heavy_multiplication_x: | A friendly name for this camera to use in the card. |
|
||||
| `icon` | Autodetected from `camera_entity` if that is specified. | :heavy_multiplication_x: | The icon to use for this camera in the camera menu and in the next & previous controls when using the `icon` style. |
|
||||
| `webrtc` | | :heavy_multiplication_x: | The WebRTC entity/URL to use for this camera. See below. |
|
||||
| `id` | `camera_entity`, `webrtc.entity` or `camera_name` if set (in that preference order). | :heavy_multiplication_x: | An optional identifier to use throughout the card configuration to refer unambiguously to this camera. See [camera IDs](#camera-ids). |
|
||||
| `webrtc_card` | | :heavy_multiplication_x: | The WebRTC entity/URL to use for this camera with the `webrtc-card` live provider. See below. |
|
||||
| `id` | `camera_entity`, `webrtc_card.entity` or `camera_name` if set (in that preference order). | :heavy_multiplication_x: | An optional identifier to use throughout the card configuration to refer unambiguously to this camera. See [camera IDs](#camera-ids). |
|
||||
|
||||
#### Camera WebRTC configuration
|
||||
<a name="live-providers"></a>
|
||||
|
||||
The `webrtc` block configures only the entity/URL for this camera to be used with the WebRTC live provider. This configuration is included as part of a camera entry in the `cameras` array.
|
||||
#### Available Live Providers
|
||||
|
||||
|Live Provider|Latency|Frame Rate|Installation|Description|
|
||||
| -- | -- | -- | -- | -- |
|
||||
|`ha` (default HA configuration)|Poor|High|Builtin|Use the built-in Home Assistant camera stream. The camera doesn't even need to be a Frigate camera! |
|
||||
|`ha` (when configured with LL-HLS)|Better|High|Builtin|Use the built-in Home Assistant camera streams -- can be configured to use an [LL-HLS](https://www.home-assistant.io/integrations/stream/#ll-hls) feed for lower latency.|
|
||||
|`ha` (Native WebRTC)|Best|High|Builtin|Use the built-in Home Assistant camera streams -- can be configured to use [native WebRTC](https://www.home-assistant.io/integrations/rtsp_to_webrtc/) offering a very low-latency feed direct to your browser.|
|
||||
|`frigate-jsmpeg`|Better|Low|Builtin|Stream the JSMPEG stream from Frigate (proxied via the Frigate integration). See [note below on the required integration version](#jsmpeg-troubleshooting) for this live provider to function. This is the only live provider that can view the Frigate `birdseye` view.|
|
||||
|`webrtc-card`|Best|High|Separate installation required|Embed's [AlexxIT's WebRTC Card](https://github.com/AlexxIT/WebRTC) to stream live feed, requires manual extra setup, see [below](#webrtc). Not to be confused with native Home Assistant WebRTC (use `ha` provider above).|
|
||||
|
||||
#### Camera WebRTC Card configuration
|
||||
|
||||
The `webrtc_card` block configures only the entity/URL for this camera to be used with the WebRTC Card live provider. This configuration is included as part of a camera entry in the `cameras` array.
|
||||
|
||||
```yaml
|
||||
cameras:
|
||||
- webrtc:
|
||||
- webrtc_card:
|
||||
```
|
||||
|
||||
| Option | Default | Overridable | Description |
|
||||
| - | - | - | - |
|
||||
| `entity` | | :heavy_multiplication_x: | The RTSP entity to pass WebRTC for this camera. Specify this OR `url` (below). |
|
||||
| `url` | | :heavy_multiplication_x: | The RTSP url to pass to WebRTC. Specify this OR `entity` (above). |
|
||||
| `entity` | | :heavy_multiplication_x: | The RTSP entity to pass to the WebRTC Card for this camera. Specify this OR `url` (below). |
|
||||
| `url` | | :heavy_multiplication_x: | The RTSP url to pass to the WebRTC Card. Specify this OR `entity` (above). |
|
||||
|
||||
See [Using WebRTC](#webrtc) below for more details on how to use WebRTC with this card.
|
||||
See [Using the WebRTC Card](#webrtc) below for more details on how to use the WebRTC Card live provider.
|
||||
|
||||
<a name="camera-ids"></a>
|
||||
|
||||
#### Camera IDs: Refering to cameras in card configuration
|
||||
|
||||
Each camera configured in the card has a single identifier (`id`). For a given camera, this will be one of the camera {`id`, `camera_entity`, `webrtc.entity` or `camera_name`} parameters for that camera -- in that order of precedence. These ids may be used in conditions or custom actions to refer to a given camera unambiguously. |
|
||||
Each camera configured in the card has a single identifier (`id`). For a given camera, this will be one of the camera {`id`, `camera_entity`, `webrtc_card.entity` or `camera_name`} parameters for that camera -- in that order of precedence. These ids may be used in conditions or custom actions to refer to a given camera unambiguously. |
|
||||
|
||||
#### Example
|
||||
|
||||
@@ -196,19 +208,10 @@ live:
|
||||
| `lazy_unload` | `false` | :heavy_multiplication_x: | Whether or not to lazily **un**load lazyily-loaded cameras in the camera carousel, or just leave the camera paused. Setting this to `true` will cause cameras to be entirely unloaded when they are no longer visible (either because the carousel has scrolled past them, or because the document has been marked hidden/inactive by the browser). This will cause a reloading delay on revisiting that camera in the carousel but will save the streaming network resources that are otherwise consumed. This option has no effect if `lazy_load` is false. |
|
||||
| `draggable` | `true` | :heavy_multiplication_x: | Whether or not the live carousel can be dragged left or right, via touch/swipe and mouse dragging. |
|
||||
| `transition_effect` | `slide` | :heavy_multiplication_x: | Effect to apply as a transition between live cameras. Accepted values: `slide` or `none`. |
|
||||
| `provider` | `frigate` | :white_check_mark: | The means through which the live camera view is displayed. See [Live Provider](#live-provider) below.|
|
||||
| `actions` | | :white_check_mark: | Actions to use for the `live` view. See [actions](#actions) below.|
|
||||
| `controls` | | :white_check_mark: | Configuration for the `live` view controls. See below. |
|
||||
| `jsmpeg` | | :white_check_mark: | Configuration for the `frigate-jsmpeg` live provider. See below.|
|
||||
| `webrtc` | | :white_check_mark: | Configuration for the `webrtc` live provider. See below.|
|
||||
|
||||
#### Available Live Providers
|
||||
|
||||
|Live Provider|Latency|Frame Rate|Installation|Description|
|
||||
| -- | -- | -- | -- | -- |
|
||||
|`frigate`|High|High|Builtin|Use the built-in Home Assistant camera stream from Frigate (RTMP). The camera doesn't even need to be a Frigate camera! Latency may be lowered through the use of [LL-HLS](https://www.home-assistant.io/integrations/stream/#ll-hls).|
|
||||
|`frigate-jsmpeg`|Lower|Low|Builtin|Stream the JSMPEG stream from Frigate (proxied via the Frigate integration). See [note below on the required integration version](#jsmpeg-troubleshooting) for this live provider to function. This is the only live provider that can view the Frigate `birdseye` view.|
|
||||
|`webrtc`|Lowest|High|Separate installation required|Uses [WebRTC](https://github.com/AlexxIT/WebRTC) to stream live feed, requires manual extra setup, see [below](#webrtc).|
|
||||
| `webrtc_card` | | :white_check_mark: | Configuration for the `webrtc-card` live provider. See below.|
|
||||
|
||||
#### Live Provider: JSMPEG Configuration
|
||||
|
||||
@@ -225,20 +228,20 @@ live:
|
||||
|
||||
<a name="webrtc-live-configuration"></a>
|
||||
|
||||
#### Live Provider: WebRTC Configuration
|
||||
#### Live Provider: WebRTC Card Configuration
|
||||
|
||||
All configuration is under:
|
||||
|
||||
```yaml
|
||||
live:
|
||||
webrtc:
|
||||
webrtc_card:
|
||||
```
|
||||
|
||||
| Option | Default | Overridable | Description |
|
||||
| - | - | - | - |
|
||||
| `*`| | :white_check_mark: | Any options specified in the `webrtc:` YAML dictionary are silently passed through to WebRTC. See [WebRTC Configuration](https://github.com/AlexxIT/WebRTC#configuration) for full details this external card provides. This implies that if `entity` or `url` are specified here they will override the matching named parameters under the per camera configuration. |
|
||||
| `*`| | :white_check_mark: | Any options specified in the `webrtc_card:` YAML dictionary are silently passed through to the AlexxIT's WebRTC Card. See [WebRTC Configuration](https://github.com/AlexxIT/WebRTC#configuration) for full details this external card provides. This implies that if `entity` or `url` are specified here they will override the matching named parameters under the per camera configuration. |
|
||||
|
||||
See [Using WebRTC](#webrtc) below for more details on how to use WebRTC with this card.
|
||||
See [Using WebRTC Card](#webrtc) below for more details on how to embed AlexxIT's WebRTC Card with the Frigate Card.
|
||||
|
||||
#### Live Controls: Thumbnails
|
||||
|
||||
@@ -424,8 +427,6 @@ The card aspect ratio can be changed with the `dimensions.aspect_ratio_mode` and
|
||||
If no aspect ratio is specified or available, but one is needed then `16:9` will
|
||||
be used by default.
|
||||
|
||||
<a name="webrtc"></a>
|
||||
|
||||
### Override Options
|
||||
|
||||
All configuration is a list under:
|
||||
@@ -436,7 +437,7 @@ overrides:
|
||||
|
||||
Various parts of this configuration may conditionally (see [Frigate Card
|
||||
Conditions](#frigate-card-conditions)) be overridden, for example to use custom
|
||||
WebRTC paramters for a particular camera or to hide the menu in fullscreen mode.
|
||||
WebRTC parameters for a particular camera or to hide the menu in fullscreen mode.
|
||||
|
||||
Not all configuration parameters are overriddable (only those with check marks
|
||||
in this documentation) -- some because it doesn't make sense for that parameter
|
||||
@@ -452,54 +453,56 @@ item, that has both of the following parameters set:
|
||||
| `conditions` | | :heavy_multiplication_x: | A set of conditions that must evaluate to `true` in order for the overrides to be applied. See [Frigate Card Conditions](#frigate-card-conditions). |
|
||||
| `overrides` | | :heavy_multiplication_x: |Configuration overrides to be applied. Any configuration parameter described in this documentation as 'Overridable' is supported. |
|
||||
|
||||
### Using WebRTC
|
||||
<a name="webrtc"></a>
|
||||
|
||||
WebRTC support blends the use of the ultra-realtime [WebRTC live
|
||||
### Using AlexxIT's WebRTC Card
|
||||
|
||||
WebRTC Card support blends the use of the ultra-realtime [WebRTC card live
|
||||
view](https://github.com/AlexxIT/WebRTC) with convenient access to Frigate
|
||||
events/snapshots/UI. A perfect combination!
|
||||
|
||||
<img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/webrtc.png" alt="Live viewing" width="400px">
|
||||
|
||||
**Note**: WebRTC must be installed and configured separately (see [details](https://github.com/AlexxIT/WebRTC)) before it can be used with this card.
|
||||
**Note**: AlexxIT's WebRTC Integration/Card must be installed and configured separately (see [details](https://github.com/AlexxIT/WebRTC)) before it can be used with this card.
|
||||
|
||||
#### Specifying The WebRTC Camera
|
||||
#### Specifying The WebRTC Card Camera
|
||||
|
||||
WebRTC does **not** support use of Frigate-provided camera entities, as it
|
||||
requires an RTSP stream which Frigate does not currently provide. There are two
|
||||
ways to specify the WebRTC source camera:
|
||||
The WebRTC Card live provider does **not** support use of Frigate-provided
|
||||
camera entities, as it requires an RTSP stream which Frigate does not currently
|
||||
provide. There are two ways to specify the WebRTC Card source camera:
|
||||
|
||||
* Manual setup of separate RTSP camera entities in Home Assistant ([see
|
||||
example](https://www.home-assistant.io/integrations/generic/#live-stream)).
|
||||
These entities will then be available for selection in the GUI card editor for
|
||||
the camera, or can be manually specified with a `webrtc.entity` option under
|
||||
the camera, or can be manually specified with a `webrtc_card.entity` option under
|
||||
that particular cameras configuration:
|
||||
|
||||
```yaml
|
||||
cameras:
|
||||
- webrtc:
|
||||
- webrtc_card:
|
||||
entity: 'camera.front_door_rstp`
|
||||
```
|
||||
|
||||
* OR manually entering the WebRTC camera URL parameter in the GUI card editor,
|
||||
or configuring the `url` parameter as part of a manual Frigate card
|
||||
* OR manually entering the WebRTC Card camera URL parameter in the GUI card
|
||||
editor, or configuring the `url` parameter as part of a manual Frigate card
|
||||
configuration, as illustrated in the following example:
|
||||
|
||||
```yaml
|
||||
cameras:
|
||||
- webrtc:
|
||||
- webrtc_card:
|
||||
url: 'rtsp://USERNAME:PASSWORD@CAMERA:554/RTSP_PATH'
|
||||
```
|
||||
|
||||
Other WebRTC options may be specified under the `live` section, like so:
|
||||
Other WebRTC Card options may be specified under the `live` section, like so:
|
||||
|
||||
```yaml
|
||||
live:
|
||||
webrtc:
|
||||
webrtc_card:
|
||||
ui: true
|
||||
```
|
||||
|
||||
See [the WebRTC live configuration](#webrtc-live-configuration) above, and the
|
||||
[external WebRTC configuration
|
||||
See [the WebRTC Card live configuration](#webrtc-live-configuration) above, and the
|
||||
[external WebRTC Card configuration
|
||||
documentation](https://github.com/AlexxIT/WebRTC#configuration) for full
|
||||
configuration options that can be used here.
|
||||
|
||||
@@ -616,7 +619,7 @@ This card supports several different views:
|
||||
|
||||
| Key | Description |
|
||||
| ------------- | --------------------------------------------- |
|
||||
|`live` (default)| Shows the live camera view, either the name Frigate view or [WebRTC](#webrtc) if configured.|
|
||||
|`live` (default)| Shows the live camera view with the configured live provider.|
|
||||
|`snapshots`|Shows an event gallery of snapshots for this camera/zone/label.|
|
||||
|`snapshot`|Shows an event viewer for the most recent snapshot for this camera/zone/label. Can also be accessed by holding down the `snapshots` menu icon.|
|
||||
|`clips`|Shows an event gallery of clips for this camera/zone/label.|
|
||||
@@ -739,7 +742,7 @@ cameras of different dimensions, and custom submenus per camera.
|
||||
|
||||
### Card Editing
|
||||
|
||||
This card supports full editing via the Lovelace card editor. Additional arbitrary configuration for WebRTC may be specified in YAML mode.
|
||||
This card supports full editing via the Lovelace card editor. Additional arbitrary configuration for WebRTC Card may be specified in YAML mode.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/dermotduffy/frigate-hass-card/main/images/editor.gif" alt="Live viewing" width="400px">
|
||||
|
||||
@@ -779,27 +782,32 @@ cameras:
|
||||
live_provider: frigate-jsmpeg
|
||||
title: Front Door (JSMPEG)
|
||||
- camera_entity: camera.front_door
|
||||
live_provider: webrtc
|
||||
live_provider: webrtc-card
|
||||
title: Front Door (WebRTC)
|
||||
webrtc:
|
||||
webrtc_card:
|
||||
entity: camera.front_door_rtsp
|
||||
id: front-door-webrtc
|
||||
```
|
||||
</details>
|
||||
|
||||
### WebRTC
|
||||
### WebRTC Card Provider
|
||||
|
||||
<details>
|
||||
<summary>Expand: Basic WebRTC configuration</summary>
|
||||
<summary>Expand: Basic WebRTC Card configuration with UI enabled</summary>
|
||||
|
||||
```yaml
|
||||
type: 'custom:frigate-card'
|
||||
camera_entity: camera.front_door
|
||||
live:
|
||||
provider: webrtc
|
||||
webrtc:
|
||||
type: custom:frigate-card
|
||||
cameras:
|
||||
- camera_entity: camera.front_door
|
||||
live_provider: webrtc-card
|
||||
title: Front Door
|
||||
webrtc_card:
|
||||
entity: camera.front_door_rtsp
|
||||
live:
|
||||
webrtc_card:
|
||||
ui: true
|
||||
```
|
||||
</details>
|
||||
|
||||
</details>
|
||||
|
||||
@@ -1026,7 +1034,6 @@ view:
|
||||
action: custom:frigate-card-action
|
||||
frigate_card_action: fullscreen
|
||||
live:
|
||||
provider: frigate-jsmpeg
|
||||
actions:
|
||||
entity: light.office_main_lights
|
||||
double_tap_action:
|
||||
@@ -1141,13 +1148,15 @@ overrides:
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Expand: Enable WebRTC UI for a particular camera</summary>
|
||||
<summary>Expand: Enable WebRTC Card UI only for a selected camera</summary>
|
||||
|
||||
This example enables WebRTC UI mode for a particular camera.
|
||||
This example enables WebRTC Card UI mode for a particular camera.
|
||||
|
||||
```yaml
|
||||
cameras:
|
||||
- camera_entity: camera.office
|
||||
live_provider: webrtc-card
|
||||
- camera_entity: camera.a-different-camera
|
||||
[...]
|
||||
overrides:
|
||||
- conditions:
|
||||
@@ -1155,8 +1164,7 @@ overrides:
|
||||
- camera.office
|
||||
overrides:
|
||||
live:
|
||||
provider: webrtc
|
||||
webrtc:
|
||||
webrtc_card:
|
||||
ui: true
|
||||
```
|
||||
|
||||
@@ -1331,7 +1339,7 @@ most welcome!
|
||||
|
||||
The Firefox video player swallows mouse interactions, so dragging is not
|
||||
possible in carousels that use the Firefox video player (e.g. `clips` carousel,
|
||||
or live views that use the `frigate` or `webrtc` provider). The next and
|
||||
or live views that use the `frigate` or `webrtc-card` provider). The next and
|
||||
previous buttons may be used to navigate in these instances.
|
||||
|
||||
Dragging works as expected for snapshots, or for the `frigate-jsmpeg` provider.
|
||||
|
||||
+1
-1
@@ -429,7 +429,7 @@ export class FrigateCard extends LitElement {
|
||||
}
|
||||
|
||||
const id =
|
||||
config.id || config.camera_entity || config.webrtc?.entity || config.camera_name;
|
||||
config.id || config.camera_entity || config.webrtc_card?.entity || config.camera_name;
|
||||
|
||||
if (!id) {
|
||||
this._setMessageAndUpdate({
|
||||
|
||||
+28
-23
@@ -13,7 +13,7 @@ import {
|
||||
JSMPEGConfig,
|
||||
LiveConfig,
|
||||
MediaShowInfo,
|
||||
WebRTCConfig,
|
||||
WebRTCCardConfig,
|
||||
FrigateCardError,
|
||||
FrigateCardMediaPlayer,
|
||||
LiveOverrides,
|
||||
@@ -635,10 +635,13 @@ export class FrigateCardLiveProvider extends LitElement {
|
||||
|
||||
protected _getResolvedProvider(): LiveProvider {
|
||||
if (this.cameraConfig?.live_provider === 'auto') {
|
||||
if (this.cameraConfig?.webrtc?.entity || this.cameraConfig?.webrtc?.url) {
|
||||
return 'webrtc';
|
||||
if (
|
||||
this.cameraConfig?.webrtc_card?.entity ||
|
||||
this.cameraConfig?.webrtc_card?.url
|
||||
) {
|
||||
return 'webrtc-card';
|
||||
} else if (this.cameraConfig?.camera_entity) {
|
||||
return 'frigate';
|
||||
return 'ha';
|
||||
} else if (this.cameraConfig?.camera_name) {
|
||||
return 'frigate-jsmpeg';
|
||||
}
|
||||
@@ -665,21 +668,21 @@ export class FrigateCardLiveProvider extends LitElement {
|
||||
const provider = this._getResolvedProvider();
|
||||
|
||||
return html`
|
||||
${provider == 'frigate'
|
||||
? html` <frigate-card-live-frigate
|
||||
${provider == 'ha'
|
||||
? html` <frigate-card-live-ha
|
||||
${ref(this._providerRef)}
|
||||
.hass=${this.hass}
|
||||
.cameraEntity=${this.cameraConfig.camera_entity}
|
||||
>
|
||||
</frigate-card-live-frigate>`
|
||||
: provider == 'webrtc'
|
||||
? html`<frigate-card-live-webrtc
|
||||
</frigate-card-live-ha>`
|
||||
: provider == 'webrtc-card'
|
||||
? html`<frigate-card-live-webrtc-card
|
||||
${ref(this._providerRef)}
|
||||
.hass=${this.hass}
|
||||
.cameraConfig=${this.cameraConfig}
|
||||
.webRTCConfig=${this.liveConfig.webrtc}
|
||||
.webRTCConfig=${this.liveConfig.webrtc_card}
|
||||
>
|
||||
</frigate-card-live-webrtc>`
|
||||
</frigate-card-live-webrtc-card>`
|
||||
: html` <frigate-card-live-jsmpeg
|
||||
${ref(this._providerRef)}
|
||||
.hass=${this.hass}
|
||||
@@ -691,7 +694,7 @@ export class FrigateCardLiveProvider extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('frigate-card-live-frigate')
|
||||
@customElement('frigate-card-live-ha')
|
||||
export class FrigateCardLiveFrigate extends LitElement {
|
||||
@property({ attribute: false })
|
||||
protected hass?: HomeAssistant & ExtendedHomeAssistant;
|
||||
@@ -763,12 +766,12 @@ export class FrigateCardLiveFrigate extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
// Create a wrapper for the WebRTC element
|
||||
// Create a wrapper for AlexxIT's WebRTC card
|
||||
// - https://github.com/AlexxIT/WebRTC
|
||||
@customElement('frigate-card-live-webrtc')
|
||||
export class FrigateCardLiveWebRTC extends LitElement {
|
||||
@customElement('frigate-card-live-webrtc-card')
|
||||
export class FrigateCardLiveWebRTCCard extends LitElement {
|
||||
@property({ attribute: false, hasChanged: contentsChanged })
|
||||
protected webRTCConfig?: WebRTCConfig;
|
||||
protected webRTCConfig?: WebRTCCardConfig;
|
||||
|
||||
@property({ attribute: false })
|
||||
protected cameraConfig?: CameraConfig;
|
||||
@@ -776,7 +779,7 @@ export class FrigateCardLiveWebRTC extends LitElement {
|
||||
protected hass?: HomeAssistant & ExtendedHomeAssistant;
|
||||
|
||||
// A task to await the load of the WebRTC component.
|
||||
protected _webrtcTask = new Task(this, this._getWebRTCElement, () => [1]);
|
||||
protected _webrtcTask = new Task(this, this._getWebRTCCardElement, () => [1]);
|
||||
|
||||
/**
|
||||
* Play the video.
|
||||
@@ -826,7 +829,9 @@ export class FrigateCardLiveWebRTC extends LitElement {
|
||||
return this.renderRoot?.querySelector('#video') as HTMLVideoElement | null;
|
||||
}
|
||||
|
||||
protected async _getWebRTCElement(): Promise<CustomElementConstructor | undefined> {
|
||||
protected async _getWebRTCCardElement(): Promise<
|
||||
CustomElementConstructor | undefined
|
||||
> {
|
||||
await customElements.whenDefined('webrtc-camera');
|
||||
return customElements.get('webrtc-camera');
|
||||
}
|
||||
@@ -848,10 +853,10 @@ export class FrigateCardLiveWebRTC extends LitElement {
|
||||
// then take values from the camera configuration instead (if there are
|
||||
// any).
|
||||
if (!config.url) {
|
||||
config.url = this.cameraConfig?.webrtc?.url;
|
||||
config.url = this.cameraConfig?.webrtc_card?.url;
|
||||
}
|
||||
if (!config.entity) {
|
||||
config.entity = this.cameraConfig?.webrtc?.entity;
|
||||
config.entity = this.cameraConfig?.webrtc_card?.entity;
|
||||
}
|
||||
webrtc.setConfig(config);
|
||||
webrtc.hass = this.hass;
|
||||
@@ -874,7 +879,7 @@ export class FrigateCardLiveWebRTC extends LitElement {
|
||||
this,
|
||||
e instanceof FrigateCardError
|
||||
? (e as FrigateCardError).message
|
||||
: localize('error.webrtc_reported_error') + ': ' + (e as Error).message,
|
||||
: localize('error.webrtc_card_reported_error') + ': ' + (e as Error).message,
|
||||
);
|
||||
}
|
||||
return html`${webrtcElement}`;
|
||||
@@ -884,8 +889,8 @@ export class FrigateCardLiveWebRTC extends LitElement {
|
||||
// load, but yet still have the card load be followed by the updated()
|
||||
// lifecycle callback (unlike just using `until`).
|
||||
return html`${this._webrtcTask.render({
|
||||
initial: () => renderProgressIndicator(localize('error.webrtc_waiting')),
|
||||
pending: () => renderProgressIndicator(localize('error.webrtc_waiting')),
|
||||
initial: () => renderProgressIndicator(localize('error.webrtc_card_waiting')),
|
||||
pending: () => renderProgressIndicator(localize('error.webrtc_card_waiting')),
|
||||
error: (e: unknown) => dispatchErrorMessageEvent(this, (e as Error).message),
|
||||
complete: () => render(),
|
||||
})}`;
|
||||
|
||||
+96
-7
@@ -7,14 +7,13 @@ import {
|
||||
CONF_CAMERAS_ARRAY_LABEL,
|
||||
CONF_CAMERAS_ARRAY_LIVE_PROVIDER,
|
||||
CONF_CAMERAS_ARRAY_URL,
|
||||
CONF_CAMERAS_ARRAY_WEBRTC_ENTITY,
|
||||
CONF_CAMERAS_ARRAY_WEBRTC_URL,
|
||||
CONF_CAMERAS_ARRAY_ZONE,
|
||||
CONF_EVENT_VIEWER_AUTO_PLAY,
|
||||
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE,
|
||||
CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE,
|
||||
CONF_IMAGE_SRC,
|
||||
CONF_LIVE_PRELOAD,
|
||||
CONF_LIVE_WEBRTC_CARD,
|
||||
CONF_MENU,
|
||||
CONF_MENU_BUTTON_SIZE,
|
||||
CONF_MENU_MODE,
|
||||
@@ -142,7 +141,7 @@ const isNotObject = function (value: unknown) {
|
||||
* @returns A number or undefined.
|
||||
*/
|
||||
const toNumberOrIgnore = function (value: unknown) {
|
||||
return isNaN(value as number) ? undefined : Number(value)
|
||||
return isNaN(value as number) ? undefined : Number(value);
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -198,6 +197,86 @@ const upgradeMoveTo = function (
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Upgrade a property by changing it if it is present.
|
||||
* @param path The property path.
|
||||
* @param transform A callback that transforms the old value to the new value,
|
||||
* if undefined is returned the property is removed.
|
||||
* @returns `true` if the configuration was modified.
|
||||
*/
|
||||
const upgradeChangeIfPresent = function (
|
||||
path: string,
|
||||
transform: (valueIn: unknown) => unknown,
|
||||
): (obj: RawFrigateCardConfig) => boolean {
|
||||
return function (obj: RawFrigateCardConfig): boolean {
|
||||
const oldValue = getConfigValue(obj, path);
|
||||
if (oldValue !== undefined) {
|
||||
const newValue = transform(oldValue);
|
||||
if (newValue === undefined) {
|
||||
deleteConfigValue(obj, path);
|
||||
return true;
|
||||
} else if (newValue !== oldValue) {
|
||||
setConfigValue(obj, path, newValue);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Upgrade by moving a property from one location to another, and moving a
|
||||
* property specified in a top-level overrides object.
|
||||
* @param oldPath The old property path.
|
||||
* @param newPath The new property path.
|
||||
* @param transform An optional transform for the value.
|
||||
* @returns A function that returns `true` if the configuration was modified.
|
||||
*/
|
||||
const upgradeMoveToWithOverrides = function (
|
||||
oldPath: string,
|
||||
newPath: string,
|
||||
transform?: (valueIn: unknown) => unknown,
|
||||
): (obj: RawFrigateCardConfig) => boolean {
|
||||
return function (obj: RawFrigateCardConfig): boolean {
|
||||
let modified = upgradeMoveTo(oldPath, newPath, transform)(obj);
|
||||
modified =
|
||||
upgradeArrayValue(
|
||||
CONF_OVERRIDES,
|
||||
upgradeMoveTo(oldPath, newPath, transform),
|
||||
(obj) => obj.overrides as RawFrigateCardConfig | undefined,
|
||||
)(obj) || modified;
|
||||
return modified;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Given a path to an array, apply an upgrade to each object in the array.
|
||||
* @param arrayPath The path to the array to upgrade.
|
||||
* @param upgrade A function that applies an upgrade to an object.
|
||||
* @param getObject A optional function that takes an item in the array and
|
||||
* returns the object to modify within it.
|
||||
* @returns A function that returns `true` if the configuration was modified.
|
||||
*/
|
||||
const upgradeArrayValue = function (
|
||||
arrayPath: string,
|
||||
upgrade: (obj: RawFrigateCardConfig) => boolean,
|
||||
getObject?: (obj: RawFrigateCardConfig) => RawFrigateCardConfig | undefined,
|
||||
): (obj: RawFrigateCardConfig) => boolean {
|
||||
return function (obj: RawFrigateCardConfig): boolean {
|
||||
let modified = false;
|
||||
const array = getConfigValue(obj, arrayPath);
|
||||
if (Array.isArray(array)) {
|
||||
array.forEach((item) => {
|
||||
const object = getObject ? getObject(item) : item;
|
||||
if (object && typeof object === 'object') {
|
||||
modified = upgrade(object) || modified;
|
||||
}
|
||||
});
|
||||
}
|
||||
return modified;
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Upgrade from a singular camera model to multiple.
|
||||
* @param key A string key.
|
||||
@@ -220,8 +299,8 @@ const upgradeToMultipleCameras = (): ((obj: RawFrigateCardConfig) => boolean) =>
|
||||
'frigate.label': CONF_CAMERAS_ARRAY_LABEL,
|
||||
'frigate.url': CONF_CAMERAS_ARRAY_URL,
|
||||
'frigate.zone': CONF_CAMERAS_ARRAY_ZONE,
|
||||
'live.webrtc.entity': CONF_CAMERAS_ARRAY_WEBRTC_ENTITY,
|
||||
'live.webrtc.url': CONF_CAMERAS_ARRAY_WEBRTC_URL,
|
||||
'live.webrtc.entity': `cameras.#.webrtc.entity`,
|
||||
'live.webrtc.url': `cameras.#.webrtc.url`,
|
||||
'live.provider': CONF_CAMERAS_ARRAY_LIVE_PROVIDER,
|
||||
};
|
||||
Object.keys(imports).forEach((key) => {
|
||||
@@ -278,7 +357,7 @@ const UPGRADES = [
|
||||
upgradeMoveTo('live_provider', 'live.provider'),
|
||||
upgradeMoveTo('live_preload', CONF_LIVE_PRELOAD),
|
||||
upgradeMoveTo('webrtc', 'live.webrtc'),
|
||||
upgradeMoveTo('autoplay_clip', "event_viewer.autoplay_clip"),
|
||||
upgradeMoveTo('autoplay_clip', 'event_viewer.autoplay_clip'),
|
||||
upgradeMoveTo('controls.nextprev', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_STYLE),
|
||||
upgradeMoveTo('controls.nextprev_size', CONF_EVENT_VIEWER_CONTROLS_NEXT_PREVIOUS_SIZE),
|
||||
upgradeMoveTo('menu_mode', CONF_MENU_MODE),
|
||||
@@ -289,9 +368,19 @@ const UPGRADES = [
|
||||
// v2.0.0 -> v2.1.0
|
||||
upgradeMoveTo('update_entities', CONF_VIEW_UPDATE_ENTITIES),
|
||||
|
||||
// v2.1.0 -> v3.0.0
|
||||
// v2.1.0 -> v3.0.0-rc.1
|
||||
upgradeToMultipleCameras(),
|
||||
updateMenuConditionToMenuOverride(),
|
||||
upgradeMoveTo('view.timeout', CONF_VIEW_TIMEOUT_SECONDS, toNumberOrIgnore),
|
||||
upgradeMoveTo('event_viewer.autoplay_clip', CONF_EVENT_VIEWER_AUTO_PLAY),
|
||||
|
||||
// v3.0.0-rc.1 -> v3.0.0-rc.2
|
||||
upgradeArrayValue(
|
||||
CONF_CAMERAS,
|
||||
upgradeChangeIfPresent('live_provider', (val) =>
|
||||
val === 'frigate' ? 'ha' : val === 'webrtc' ? 'webrtc-card' : val,
|
||||
),
|
||||
),
|
||||
upgradeArrayValue(CONF_CAMERAS, upgradeMoveTo('webrtc', 'webrtc_card')),
|
||||
upgradeMoveToWithOverrides('live.webrtc', CONF_LIVE_WEBRTC_CARD),
|
||||
];
|
||||
|
||||
+4
-6
@@ -13,9 +13,9 @@ export const CONF_CAMERAS_ARRAY_ZONE = `${CONF_CAMERAS}.#.zone` as const;
|
||||
export const CONF_CAMERAS_ARRAY_ID = `${CONF_CAMERAS}.#.id` as const;
|
||||
export const CONF_CAMERAS_ARRAY_TITLE = `${CONF_CAMERAS}.#.title` as const;
|
||||
export const CONF_CAMERAS_ARRAY_ICON = `${CONF_CAMERAS}.#.icon` as const;
|
||||
export const CONF_CAMERAS_ARRAY_WEBRTC_ENTITY =
|
||||
`${CONF_CAMERAS}.#.webrtc.entity` as const;
|
||||
export const CONF_CAMERAS_ARRAY_WEBRTC_URL = `${CONF_CAMERAS}.#.webrtc.url` as const;
|
||||
export const CONF_CAMERAS_ARRAY_WEBRTC_CARD_ENTITY =
|
||||
`${CONF_CAMERAS}.#.webrtc_card.entity` as const;
|
||||
export const CONF_CAMERAS_ARRAY_WEBRTC_CARD_URL = `${CONF_CAMERAS}.#.webrtc_card.url` as const;
|
||||
export const CONF_CAMERAS_ARRAY_LIVE_PROVIDER =
|
||||
`${CONF_CAMERAS}.#.live_provider` as const;
|
||||
|
||||
@@ -73,9 +73,7 @@ export const CONF_LIVE_LAZY_LOAD = `${CONF_LIVE}.lazy_load` as const;
|
||||
export const CONF_LIVE_LAZY_UNLOAD = `${CONF_LIVE}.lazy_unload` as const;
|
||||
export const CONF_LIVE_PRELOAD = `${CONF_LIVE}.preload` as const;
|
||||
export const CONF_LIVE_TRANSITION_EFFECT = `${CONF_LIVE}.transition_effect` as const;
|
||||
export const CONF_LIVE_WEBRTC = `${CONF_LIVE}.webrtc` as const;
|
||||
export const CONF_LIVE_WEBRTC_ENTITY = `${CONF_LIVE_WEBRTC}.entity` as const;
|
||||
export const CONF_LIVE_WEBRTC_URL = `${CONF_LIVE_WEBRTC}.url` as const;
|
||||
export const CONF_LIVE_WEBRTC_CARD = `${CONF_LIVE}.webrtc_card` as const;
|
||||
|
||||
export const CONF_IMAGE = 'image' as const;
|
||||
export const CONF_IMAGE_REFRESH_SECONDS = `${CONF_IMAGE}.refresh_seconds` as const;
|
||||
|
||||
+6
-6
@@ -22,8 +22,8 @@ import {
|
||||
CONF_CAMERAS_ARRAY_LIVE_PROVIDER,
|
||||
CONF_CAMERAS_ARRAY_TITLE,
|
||||
CONF_CAMERAS_ARRAY_URL,
|
||||
CONF_CAMERAS_ARRAY_WEBRTC_ENTITY,
|
||||
CONF_CAMERAS_ARRAY_WEBRTC_URL,
|
||||
CONF_CAMERAS_ARRAY_WEBRTC_CARD_ENTITY,
|
||||
CONF_CAMERAS_ARRAY_WEBRTC_CARD_URL,
|
||||
CONF_CAMERAS_ARRAY_ZONE,
|
||||
CONF_DIMENSIONS_ASPECT_RATIO,
|
||||
CONF_DIMENSIONS_ASPECT_RATIO_MODE,
|
||||
@@ -491,9 +491,9 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
|
||||
const liveProviders = new Map([
|
||||
['', ''],
|
||||
['auto', localize('config.cameras.live_providers.auto')],
|
||||
['frigate', localize('config.cameras.live_providers.frigate')],
|
||||
['ha', localize('config.cameras.live_providers.ha')],
|
||||
['frigate-jsmpeg', localize('config.cameras.live_providers.frigate-jsmpeg')],
|
||||
['webrtc', localize('config.cameras.live_providers.webrtc')],
|
||||
['webrtc-card', localize('config.cameras.live_providers.webrtc-card')],
|
||||
]);
|
||||
|
||||
// Make a new config and update the editor with changes on it,
|
||||
@@ -605,11 +605,11 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
|
||||
getArrayConfigPath(CONF_CAMERAS_ARRAY_ID, cameraIndex),
|
||||
)}
|
||||
${this._renderDropdown(
|
||||
getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_ENTITY, cameraIndex),
|
||||
getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_CARD_ENTITY, cameraIndex),
|
||||
cameraEntities,
|
||||
)}
|
||||
${this._renderStringInput(
|
||||
getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_URL, cameraIndex),
|
||||
getArrayConfigPath(CONF_CAMERAS_ARRAY_WEBRTC_CARD_URL, cameraIndex),
|
||||
)}
|
||||
</div>`
|
||||
: ``}
|
||||
|
||||
@@ -22,13 +22,13 @@
|
||||
"live_provider": "Live view provider for this camera",
|
||||
"live_providers": {
|
||||
"auto": "Automatic",
|
||||
"frigate": "Frigate",
|
||||
"ha": "Home Assistant (i.e. HLS, LL-HLS, WebRTC native)",
|
||||
"frigate-jsmpeg": "Frigate JSMpeg",
|
||||
"webrtc": "WebRTC"
|
||||
"webrtc-card": "WebRTC Card (i.e. AlexxIT's WebRTC Card)"
|
||||
},
|
||||
"webrtc": {
|
||||
"entity": "WebRTC Camera Entity (Not a Frigate camera)",
|
||||
"url": "WebRTC Camera URL"
|
||||
"webrtc_card": {
|
||||
"entity": "WebRTC Card Camera Entity (Not a Frigate camera)",
|
||||
"url": "WebRTC Card Camera URL"
|
||||
},
|
||||
"zone": "Frigate zone"
|
||||
},
|
||||
@@ -210,8 +210,8 @@
|
||||
"invalid_configuration": "Invalid configuration",
|
||||
"invalid_configuration_no_hint": "No location hint available (bad or missing type?)",
|
||||
"upgrade_available": "An automated card configuration upgrade is available, please visit the visual card editor",
|
||||
"webrtc_reported_error": "WebRTC component reported an error",
|
||||
"webrtc_waiting": "Waiting for WebRTC Card to load ...",
|
||||
"webrtc_card_reported_error": "WebRTC Card reported an error",
|
||||
"webrtc_card_waiting": "Waiting for WebRTC Card to load ...",
|
||||
"no_cameras": "No valid cameras found, you must configure at least one camera entry",
|
||||
"no_camera_id": "Could not determine camera id for the following camera, may need to set 'id' parameter manually",
|
||||
"duplicate_camera_id": "Duplicate Frigate camera id for the following camera, use the 'id' parameter to uniquely identify cameras",
|
||||
|
||||
+6
-6
@@ -53,7 +53,7 @@ const FRIGATE_MENU_MODES = [
|
||||
'above',
|
||||
'below',
|
||||
] as const;
|
||||
const LIVE_PROVIDERS = ['auto', 'frigate', 'frigate-jsmpeg', 'webrtc'] as const;
|
||||
const LIVE_PROVIDERS = ['auto', 'ha', 'frigate-jsmpeg', 'webrtc-card'] as const;
|
||||
export type LiveProvider = typeof LIVE_PROVIDERS[number];
|
||||
|
||||
export class FrigateCardError extends Error {}
|
||||
@@ -281,7 +281,7 @@ export const cameraConfigDefault = {
|
||||
client_id: 'frigate' as const,
|
||||
live_provider: 'auto' as const,
|
||||
};
|
||||
const webrtcCameraConfigSchema = z.object({
|
||||
const webrtcCardCameraConfigSchema = z.object({
|
||||
entity: z.string().optional(),
|
||||
url: z.string().optional(),
|
||||
});
|
||||
@@ -306,7 +306,7 @@ const cameraConfigSchema = z
|
||||
id: z.string().optional(),
|
||||
|
||||
// Camera identifiers for WebRTC.
|
||||
webrtc: webrtcCameraConfigSchema.optional(),
|
||||
webrtc_card: webrtcCardCameraConfigSchema.optional(),
|
||||
})
|
||||
.default(cameraConfigDefault);
|
||||
export type CameraConfig = z.infer<typeof cameraConfigSchema>;
|
||||
@@ -484,8 +484,8 @@ const liveConfigDefault = {
|
||||
},
|
||||
};
|
||||
|
||||
const webrtcConfigSchema = webrtcCameraConfigSchema.passthrough().optional();
|
||||
export type WebRTCConfig = z.infer<typeof webrtcConfigSchema>;
|
||||
const webrtcCardConfigSchema = webrtcCardCameraConfigSchema.passthrough().optional();
|
||||
export type WebRTCCardConfig = z.infer<typeof webrtcCardConfigSchema>;
|
||||
|
||||
const jsmpegConfigSchema = z
|
||||
.object({
|
||||
@@ -512,7 +512,7 @@ export type JSMPEGConfig = z.infer<typeof jsmpegConfigSchema>;
|
||||
|
||||
const liveOverridableConfigSchema = z
|
||||
.object({
|
||||
webrtc: webrtcConfigSchema,
|
||||
webrtc_card: webrtcCardConfigSchema,
|
||||
jsmpeg: jsmpegConfigSchema,
|
||||
controls: z
|
||||
.object({
|
||||
|
||||
Reference in New Issue
Block a user