From 06341edc491478f7c69c0969ad67db9f335c766a Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 3 May 2018 16:04:25 -0400
Subject: [PATCH] Fetch camera image via websocket connection (#1136)

* Fetch camera image via websocket connection

Lint

Cleanup

* setProperties
---
 src/cards/ha-camera-card.html | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/cards/ha-camera-card.html b/src/cards/ha-camera-card.html
index 59c8bbc01d..b642cb3a92 100644
--- a/src/cards/ha-camera-card.html
+++ b/src/cards/ha-camera-card.html
@@ -39,8 +39,11 @@
       }
     </style>
 
-    <img src='[[cameraFeedSrc]]' class='camera-feed' hidden$='[[!imageLoaded]]'
-      on-load='imageLoadSuccess' on-error='imageLoadFail' alt='[[computeStateName(stateObj)]]'>
+    <img
+      src='[[cameraFeedSrc]]'
+      class='camera-feed'
+      hidden$='[[!imageLoaded]]'
+      alt='[[computeStateName(stateObj)]]'>
     <div class='caption'>
       [[computeStateName(stateObj)]]
       <template is='dom-if' if='[[!imageLoaded]]'>
@@ -103,17 +106,19 @@
     }
 
     updateCameraFeedSrc() {
-      var attr = this.stateObj.attributes;
-      var time = (new Date()).getTime();
-      this.cameraFeedSrc = attr.entity_picture + '&time=' + time;
-    }
-
-    imageLoadSuccess() {
-      this.imageLoaded = true;
-    }
-
-    imageLoadFail() {
-      this.imageLoaded = false;
+      this.hass.connection.sendMessagePromise({
+        type: 'camera_thumbnail',
+        entity_id: this.stateObj.entity_id,
+      }).then((resp) => {
+        if (resp.success) {
+          this.setProperties({
+            imageLoaded: true,
+            cameraFeedSrc: `data:${resp.result.content_type};base64, ${resp.result.content}`,
+          });
+        } else {
+          this.imageLoaded = false;
+        }
+      });
     }
 
     computeStateName(stateObj) {