Add supports custom shortcuts

README.md

@@ -136,6 +136,13 @@ poster: https://home-assistant.io/images/cast/splash.png  # still image when str
 intersection: 0.75  # auto pause stream when less than 75% of video element is in the screen, 50% by default
 muted: false  # disable sound, default true
 ui: true  # custom video controls, default false
+shortcuts: # custom shortcuts, default none
+  - name: Record
+    icon: mdi:record-circle-outline
+    service: switch.toggle
+    service_data:
+      entity_id: switch.camera_record
+
 background: true  # run stream when not displayed (ex. for quick video loading), default false
 
 ptz:  # check full examples in wiki

custom_components/webrtc/www/webrtc-camera.js

@@ -358,6 +358,31 @@ class WebRTCCamera extends HTMLElement {
             spinner.style.display = 'none';
             this.setPTZVisibility(true);
         };
+
+        if (this.config.shortcuts && this.config.shortcuts.length > 0) {
+            this.renderShortcuts(card, this.config.shortcuts);
+        }
+    }
+
+    renderShortcuts(card, elements) {
+        const shortcuts = document.createElement('div');
+        shortcuts.className = 'shortcuts';
+
+        for (var i = 0; i < elements.length; i++) {
+            const element = elements[i];
+
+            const shortcut = document.createElement('ha-icon');
+            shortcut.className = 'shortcut shortcut-' + i;
+            shortcut.setAttribute('title', element.name);
+            shortcut.icon = element.icon;
+            shortcut.onclick = () => {
+                const [domain, name] = element.service.split('.');
+                this.hass.callService(domain, name, element.service_data || {});
+            };
+            shortcuts.appendChild(shortcut);
+        }
+
+        card.appendChild(shortcuts);
     }
 
     renderPTZ(card, hass) {
@@ -526,6 +551,17 @@ class WebRTCCamera extends HTMLElement {
                 cursor: default;
                 opacity: 0.4;
             }
+            .shortcuts {
+                position: absolute;
+                top: 12px;
+                left: 0px;
+            }
+            .shortcuts > .shortcut {
+                margin-left: 12px;
+                position: relative;
+                display: inline-block;
+                opacity: .9;
+            }
         `;
         this.appendChild(style);