Improve documentation & editing for WebRTC.

README.md

@@ -25,7 +25,7 @@ A full-featured Frigate Lovelace card:
 * Arbitrary entity access via menu (e.g. motion sensor access).
 * Full Lovelace editing support.
 * Theme friendly.
-* **Advanced**: Support for [WebRTC](https://github.com/AlexxIT/WebRTC) live viewing.
+* **Advanced**: Support for [WebRTC](https://github.com/AlexxIT/WebRTC) live viewing by embedding the WebRTC card.
 
 ## Installation
 
@@ -94,12 +94,42 @@ events/snapshots/UI. A perfect combination!
 
 | Option           | Default | Description                                         |
 | ------------- | - | -------------------------------------------- |
-| `webrtc.entity` | | The RTSP entity to use with WebRTC.|
+****| `webrtc.url` | | The RTSP url to pass to WebRTC. Specify this OR `webrtc.entity` (below).|
+| `webrtc.entity` | | The RTSP entity to pass WebRTC. Specify this OR `webrtc.url` (above). |
 | `webrtc.*`| | Any other options in a `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.|
 
-
 **Note**: WebRTC 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
+
+WebRTC does **not** support use of Frigate-provided camera entities, as it
+requires an RTSP stream which Frigate does not provide. There are two ways to
+specify the WebRTC 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 Frigate card under the WebRTC options, or can be manually specified with a
+  `webrtc.entity` option in the YAML configuration for this card:
+
+```yaml
+[rest of Frigate card configuration]
+webrtc:
+  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
+  configuration, like the following example:
+
+```yaml
+[rest of Frigate card configuration]
+webrtc:
+  url: 'rtsp://USERNAME:PASSWORD@CAMERA:554/RTSP_PATH'
+```
+
+See [WebRTC configuration](https://github.com/AlexxIT/WebRTC#configuration) for full configuration options.
+
 <a name="entities"></a>
 
 ### Entities
@@ -129,28 +159,6 @@ entities:
     show: false
 ```
 
-#### Specifying the WebRTC Camera
-
-There are two ways to specify the WebRTC source camera:
-
-* Manual setup of separate RTSP camera entities in Home Assistant. These entities will then be available for selection in the GUI card editor for the Frigate card under the WebRTC options, or can be manually specified with a `webrtc.entity` option in YAML:
-
-```yaml
-[rest of Frigate card configuration]
-webrtc:
-  entity: 'camera.front_door_rstp`
-```
-* OR manually configuring the `url` parameter as part of a manual Frigate card configuration, like the following example:
-
-```yaml
-[rest of Frigate card configuration]
-webrtc:
-  url: 'rtsp://USERNAME:PASSWORD@CAMERA:554/RTSP_PATH'
-```
-
- See [WebRTC configuration](https://github.com/AlexxIT/WebRTC#configuration) for full configuration options.
-
-
 <a name="views"></a>
 
 ## Views

src/editor.ts

@@ -401,6 +401,12 @@ export class FrigateCardEditor extends LitElement implements LovelaceCardEditor
                   })}
                 </paper-listbox>
               </paper-dropdown-menu>
+              <paper-input
+                  label=${localize('webrtc.url')}
+                  .value=${this._config?.webrtc?.url || ''}
+                  .configValue=${'webrtc.url'}
+                  @value-changed=${this._valueChanged}
+              ></paper-input>
             </div>`
           : ''}
       </div>

src/localize/languages/en.json

@@ -72,7 +72,8 @@
     "webrtc": "WebRTC"
   },
   "webrtc": {
-    "entity": "WebRTC Camera Entity (To use with WebRTC Live Provider)"
+    "entity": "Optional WebRTC Camera Entity (Not a Frigate camera)",
+    "url": "Optional WebRTC Camera URL"
   },
   "error": {
     "empty_response": "Received empty response from Home Assistant for request",

src/types.ts

@@ -61,7 +61,10 @@ export const frigateCardConfigSchema = z.object({
     )
     .optional().default(180),
   live_provider: z.enum(['frigate', 'frigate-jsmpeg', 'webrtc']).default('frigate'),
-  webrtc: z.object({}).passthrough().optional(),
+  webrtc: z.object({
+    entity: z.string().optional(),
+    url: z.string().optional(),
+  }).passthrough().optional(),
   label: z.string().optional(),
   zone: z.string().optional(),
   autoplay_clip: z.boolean().default(false),