Merge pull request #7 from baltermia/fix-getcurrentframe-only-with-ca…

…llback Manually get current frame if callback should not be invoked
baltermia · Apr 28, 2023 · c28de55 · c28de55
2 parents bb38a7d + f618968
commit c28de55
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/blazor-camera-streamer/Scripts/CameraStreamer.ts b/blazor-camera-streamer/Scripts/CameraStreamer.ts
@@ -53,7 +53,7 @@ namespace BlazorCameraStreamer.Scripts {
         /**
          * The last streamed frame-data
          */
-        private lastFrame: string;
+        private _lastFrame: string;
 
         /**
          * Returns a new instance of the CameraStreamerInterop class
@@ -167,7 +167,9 @@ namespace BlazorCameraStreamer.Scripts {
         }
 
         public getCurrentFrame(): Promise<string> {
-            return Promise.resolve(this.lastFrame);
+            return (this._callInvoke && this._streamActive) ?
+                Promise.resolve(this._lastFrame) :
+                Promise.resolve(this.getCurrentCanvasFrame());
         }
 
         /**
@@ -181,22 +183,19 @@ namespace BlazorCameraStreamer.Scripts {
             this._dotnetObject = null;
             this._stream = null;
             this._constraints = null;
+            this._lastFrame = null;
         }
 
         /**
          * Invokes the dotnet object on the provided method with the given data
          * @param data The string the dotnet method recieves
          */
         private invokeDotnetObject(data: string): void {
-            if (this._callInvoke) this._dotnetObject.invokeMethodAsync(this._invokeIdentifier, data);
+            if (this._callInvoke)
+                this._dotnetObject.invokeMethodAsync(this._invokeIdentifier, data);
         }
 
-        /**
-         * Handles the videos ontimeupdate event and invokes the dotnet object with the img 
-         */
-        private onFrame(ev: Event): void { // Only working solution to get the images as other ways are not supported yet
-            if (!this._callInvoke || !this._streamActive) return;
-
+        private getCurrentCanvasFrame(): string {
             let canvas: HTMLCanvasElement = document.createElement("canvas");
 
             canvas.width = this._constraints.video["width"];
@@ -206,9 +205,15 @@ namespace BlazorCameraStreamer.Scripts {
             canvas.getContext("2d").drawImage(this._video, 0, 0);
 
             // Get the iamge as 64base string
-            this.lastFrame = canvas.toDataURL("image/png");
+            return canvas.toDataURL("image/png");
+        }
 
-            this.invokeDotnetObject(this.lastFrame);
+        /**
+         * Handles the videos ontimeupdate event and invokes the dotnet object with the img 
+         */
+        private onFrame(ev: Event): void { // Only working solution to get the images as other ways are not supported yet
+            if (this._callInvoke && this._streamActive)
+                this.invokeDotnetObject(this._lastFrame = this.getCurrentCanvasFrame());
         }
     }
 }
diff --git a/blazor-camera-streamer/blazor-camera-streamer.csproj b/blazor-camera-streamer/blazor-camera-streamer.csproj
@@ -4,13 +4,13 @@
 		<TargetFramework>net5.0</TargetFramework>
 		<RootNamespace>BlazorCameraStreamer</RootNamespace>
 		<PackageId>BlazorCameraStreamer</PackageId>
-		<Version>2.1.0</Version>
+		<Version>2.1.1</Version>
 		<Authors>Baltermia Clopath</Authors>
 		<PackageLicenseFile>LICENSE.md</PackageLicenseFile>
 		<RepositoryUrl>https://github.com/baltermia/blazor-camera-streamer/</RepositoryUrl>
 		<RepositoryType>git</RepositoryType>
 		<Description>A Blazor Component library that adds a easy-to-use camera-streaming functionality, which allows you to receive the streamed data.</Description>
-		<PackageReleaseNotes>Added GetCurrentFrame-Method</PackageReleaseNotes>
+		<PackageReleaseNotes>Fixed GetCurrentFrame-Method only working when OnFrame-Callback is subscribed to.</PackageReleaseNotes>
 		<Copyright>Copyright (c) 2023 Baltermia Clopath</Copyright>
 		<PackageRequireLicenseAcceptance>true</PackageRequireLicenseAcceptance>
 		<AssemblyName>BlazorCameraStreamer</AssemblyName>

diff --git a/blazor-camera-streamer/wwwroot/js/CameraStreamer.js b/blazor-camera-streamer/wwwroot/js/CameraStreamer.js
@@ -121,7 +121,9 @@ var BlazorCameraStreamer;
                     .filter(d => d.kind === "videoinput"));
             }
             getCurrentFrame() {
-                return Promise.resolve(this.lastFrame);
+                return (this._callInvoke && this._streamActive) ?
+                    Promise.resolve(this._lastFrame) :
+                    Promise.resolve(this.getCurrentCanvasFrame());
             }
             /**
              * Releases all resources and stops the stream. The object must be reinitialized before it can be used again
@@ -133,6 +135,7 @@ var BlazorCameraStreamer;
                 this._dotnetObject = null;
                 this._stream = null;
                 this._constraints = null;
+                this._lastFrame = null;
             }
             /**
              * Invokes the dotnet object on the provided method with the given data
@@ -142,20 +145,21 @@ var BlazorCameraStreamer;
                 if (this._callInvoke)
                     this._dotnetObject.invokeMethodAsync(this._invokeIdentifier, data);
             }
-            /**
-             * Handles the videos ontimeupdate event and invokes the dotnet object with the img
-             */
-            onFrame(ev) {
-                if (!this._callInvoke || !this._streamActive)
-                    return;
+            getCurrentCanvasFrame() {
                 let canvas = document.createElement("canvas");
                 canvas.width = this._constraints.video["width"];
                 canvas.height = this._constraints.video["height"];
                 // Draw the current image of the stream on the canvas
                 canvas.getContext("2d").drawImage(this._video, 0, 0);
                 // Get the iamge as 64base string
-                this.lastFrame = canvas.toDataURL("image/png");
-                this.invokeDotnetObject(this.lastFrame);
+                return canvas.toDataURL("image/png");
+            }
+            /**
+             * Handles the videos ontimeupdate event and invokes the dotnet object with the img
+             */
+            onFrame(ev) {
+                if (this._callInvoke && this._streamActive)
+                    this.invokeDotnetObject(this._lastFrame = this.getCurrentCanvasFrame());
             }
         }
         Scripts.CameraStreamerInterop = CameraStreamerInterop;