From 585b4c6d8bc4150d308e1aa1db63ca90a5deb342 Mon Sep 17 00:00:00 2001
From: Koushik Dutta <koushd@gmail.com>
Date: Fri, 7 Jan 2022 22:56:02 -0800
Subject: [PATCH] core: use blob url for image fetch

---
 plugins/core/package-lock.json                        |  4 ++--
 plugins/core/package.json                             |  2 +-
 plugins/core/ui/src/common/camera.ts                  | 10 ++++++++--
 .../ui/src/components/dashboard/DashboardCamera.vue   | 11 ++---------
 plugins/core/ui/src/interfaces/Camera.vue             | 10 ++--------
 plugins/core/ui/src/interfaces/VideoCamera.vue        |  9 ++-------
 6 files changed, 17 insertions(+), 29 deletions(-)

diff --git a/plugins/core/package-lock.json b/plugins/core/package-lock.json
index 7ce0d51f8..d6d933af9 100644
--- a/plugins/core/package-lock.json
+++ b/plugins/core/package-lock.json
@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.168",
+   "version": "0.0.169",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.0.168",
+         "version": "0.0.169",
          "license": "Apache-2.0",
          "dependencies": {
             "@koush/wrtc": "^0.5.0",
diff --git a/plugins/core/package.json b/plugins/core/package.json
index a743ec351..eb424e126 100644
--- a/plugins/core/package.json
+++ b/plugins/core/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.0.168",
+   "version": "0.0.169",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",
diff --git a/plugins/core/ui/src/common/camera.ts b/plugins/core/ui/src/common/camera.ts
index f1ff91582..6ae3f2dbb 100644
--- a/plugins/core/ui/src/common/camera.ts
+++ b/plugins/core/ui/src/common/camera.ts
@@ -1,4 +1,4 @@
-import { ScryptedDevice, Camera, ScryptedMimeTypes, RTCAVMessage, MediaManager, VideoCamera, MediaStreamOptions } from '@scrypted/sdk/types';
+import { ScryptedDevice, ScryptedMimeTypes, RTCAVMessage, MediaManager, VideoCamera, MediaStreamOptions, MediaObject } from '@scrypted/sdk/types';
 
 export async function streamCamera(mediaManager: MediaManager, device: ScryptedDevice & VideoCamera, getVideo: () => any, createPeerConnection: (configuration: any) => RTCPeerConnection) {
   let selectedStream: MediaStreamOptions;
@@ -106,4 +106,10 @@ export async function streamCamera(mediaManager: MediaManager, device: ScryptedD
     pc.close();
     throw e;
   }
-}
\ No newline at end of file
+}
+
+export async function createBlobUrl(mediaManager: MediaManager, mediaObject: MediaObject): Promise<string> {
+  const buffer = await mediaManager.convertMediaObjectToBuffer(mediaObject, 'image/*');
+  const blob = new Blob([buffer]);
+  return URL.createObjectURL(blob);
+}
diff --git a/plugins/core/ui/src/components/dashboard/DashboardCamera.vue b/plugins/core/ui/src/components/dashboard/DashboardCamera.vue
index 20a2d5f1a..575afb429 100644
--- a/plugins/core/ui/src/components/dashboard/DashboardCamera.vue
+++ b/plugins/core/ui/src/components/dashboard/DashboardCamera.vue
@@ -25,9 +25,7 @@
 <script>
 import { ScryptedInterface } from "@scrypted/sdk/types";
 import DashboardBase from "./DashboardBase";
-import { streamCamera } from "../../common/camera";
-
-var currentStream;
+import { createBlobUrl, streamCamera } from "../../common/camera";
 
 const scryptedServerVariables = {};
 scryptedServerVariables.registrationId = "web:/web/message";
@@ -75,12 +73,7 @@ export default {
       } else {
         picture = await this.device.getVideoStream();
       }
-      const result = await this.$scrypted.mediaManager.convertMediaObjectToLocalUrl(
-        picture,
-        "image/jpeg"
-      );
-      const url = new URL(result);
-      this.src = url.pathname;
+      this.src = await createBlobUrl(this.$scrypted.mediaManager, picture);
     },
   },
   mounted() {
diff --git a/plugins/core/ui/src/interfaces/Camera.vue b/plugins/core/ui/src/interfaces/Camera.vue
index d899fe033..a5a9d8cb9 100644
--- a/plugins/core/ui/src/interfaces/Camera.vue
+++ b/plugins/core/ui/src/interfaces/Camera.vue
@@ -50,7 +50,7 @@
 
 <script>
 import RPCInterface from "./RPCInterface.vue";
-import { streamCamera } from "../common/camera";
+import { createBlobUrl, streamCamera } from "../common/camera";
 import { ScryptedInterface } from "@scrypted/sdk/types";
 import ClipPathEditor from "../components/clippath/ClipPathEditor.vue";
 import cloneDeep from "lodash/cloneDeep";
@@ -123,13 +123,7 @@ export default {
     },
     async refresh() {
       const picture = await this.device.takePicture();
-      this.$scrypted.mediaManager
-        .convertMediaObjectToLocalUrl(picture, "image/*")
-        .then((result) => {
-          this.picture = true;
-          const url = new URL(result);
-          this.src = url.pathname;
-        });
+      this.src = await createBlobUrl(this.$scrypted.mediaManager, picture);
     },
   },
   watch: {
diff --git a/plugins/core/ui/src/interfaces/VideoCamera.vue b/plugins/core/ui/src/interfaces/VideoCamera.vue
index 197ffb6f0..64a7c5286 100644
--- a/plugins/core/ui/src/interfaces/VideoCamera.vue
+++ b/plugins/core/ui/src/interfaces/VideoCamera.vue
@@ -1,4 +1,5 @@
 <script>
+import { createBlobUrl } from '../common/camera';
 import Camera from "./Camera.vue";
 
 export default {
@@ -6,13 +7,7 @@ export default {
   methods: {
     async refresh() {
       const videoStream = await this.device.getVideoStream();
-      this.$scrypted.mediaManager
-        .convertMediaObjectToLocalUrl(videoStream, "image/jpeg")
-        .then((result) => {
-          this.picture = true;
-          const url = new URL(result);
-          this.src = url.pathname;
-        });
+      this.src = await createBlobUrl(this.$scrypted.mediaManager, videoStream);
     },
   },
 };