added REALTIME option for viewing snapshots thru web

Now you can watch any camera for new valid snapshots in realtime. It uses SignalR for keeping each web client updated on any new snapshot.

It is faster than any external notification (like -say- Telegram) so it is an interesting addition i.e. "to see who's at your door" or similar.

I also renamed some webpages so they make more sense.

Author: euquiq

SynoAI/Controllers/CameraController.cs

@@ -11,6 +11,8 @@
 using SynoAI.Extensions;
 using System.Linq;
 using System.Threading.Tasks;
+using Microsoft.AspNetCore.SignalR;
+using SynoAI.Hubs;
 
 namespace SynoAI.Controllers
 {
@@ -21,14 +23,18 @@ namespace SynoAI.Controllers
     [Route("[controller]")]
     public class CameraController : ControllerBase
     {
+        // euquiq: Needed for connecting into the SignalR hub and send valid Snapshot for rt web monitoring
+        private readonly IHubContext<SynoAIHub> _hubContext;
+
         private readonly IAIService _aiService;
         private readonly ISynologyService _synologyService;
         private readonly ILogger<CameraController> _logger;
 
         private static ConcurrentDictionary<string, DateTime> _lastCameraChecks = new ConcurrentDictionary<string, DateTime>(StringComparer.OrdinalIgnoreCase);
 
-        public CameraController(IAIService aiService, ISynologyService synologyService, ILogger<CameraController> logger)
+        public CameraController(IAIService aiService, ISynologyService synologyService, ILogger<CameraController> logger, IHubContext<SynoAIHub> hubContext)
         {
+            _hubContext = hubContext;
             _aiService = aiService;
             _synologyService = synologyService;
             _logger = logger;
@@ -125,6 +131,9 @@ public async void Get(string id)
                             // Process and save the snapshot
                             ProcessedImage processedImage = SnapshotManager.DressImage(camera, snapshot, predictions, validPredictions, _logger);
 
+                            // Inform eventual web users about this new Snapshot, for the "realtime" option thru Web
+                            await _hubContext.Clients.All.SendAsync("ReceiveSnapshot", camera.Name, processedImage.FileName);
+
                             // Send Notifications                  
                             await SendNotifications(camera, processedImage, labels);
                             _logger.LogInformation($"{id}: Valid object found in snapshot {snapshotCount} of {Config.MaxSnapshots} at EVENT TIME {overallStopwatch.ElapsedMilliseconds}ms.");

SynoAI/Controllers/HomeController.cs

@@ -17,20 +17,30 @@ public class HomeController : Controller
         static readonly string[] byteSizes = { "bytes", "Kb", "Mb", "Gb", "Tb" };
 
         /// <summary>
-        /// Called by the user from web browser - General view (up to 24 hours)
+        /// Called by the user from web browser - General view (up to 24 latest hours)
         /// </summary>
         [Route("")]
         public IActionResult Index()
         {
             return View();
         }
 
+        /// <summary>
+        /// Called by the user from web browser - View snapshots in realtime for a camera
+        /// </summary>
+        [Route("{cameraname}/RT")]
+        public IActionResult Realtime(string cameraname)
+        {
+            ViewData["camera"] = cameraname;
+            return View();
+        }
+
 
         /// <summary>
         /// Called by the user from web browser - Zoom into one hour of snapshots
         /// </summary>
         [Route("{cameraname}/{year}/{month}/{day}/{hour}")]
-        public IActionResult Camera(string cameraname, string year, string month, string day, string hour)
+        public IActionResult Hour(string cameraname, string year, string month, string day, string hour)
         {
             ViewData["camera"] = cameraname;
             ViewData["year"] = year;
@@ -42,10 +52,10 @@ public IActionResult Camera(string cameraname, string year, string month, string
 
 
         /// <summary>
-        /// Called by the user from web browser - Zoom into a minute of snapshots: Image gallery
+        /// Called by the user from web browser - Zoom into a minute of snapshots and show it's snapshots
         /// </summary>
         [Route("{cameraname}/{year}/{month}/{day}/{hour}/{minute}")]
-        public IActionResult Gallery(string cameraname, string year, string month, string day, string hour,string minute)
+        public IActionResult Minute(string cameraname, string year, string month, string day, string hour,string minute)
         {
             ViewData["camera"] = cameraname;
 

SynoAI/Dockerfile

@@ -9,6 +9,7 @@ WORKDIR /src
 COPY ["SynoAI.csproj", "./"]
 RUN dotnet restore "SynoAI.csproj"
 COPY . .
+
 WORKDIR "/src/."
 RUN dotnet build "SynoAI.csproj" -c Release -o /app/build
 

SynoAI/Hubs/SynoAIHub.cs

@@ -0,0 +1,10 @@
+using Microsoft.AspNetCore.SignalR;
+using System.Threading.Tasks;
+
+namespace SynoAI.Hubs
+{
+    public class SynoAIHub : Hub
+    {
+        // euquiq: This class just needs to be present for SignalR
+    }
+}

SynoAI/Models/Graph.cs

@@ -8,7 +8,7 @@ namespace SynoAI.Models
     /// </summary>
 
     /// <summary>
-    /// Class holding definition for one data point (extracted from filenames inside a captures/camera folder) 
+    /// Class holding definition for one data point (extracted from filenames inside a Captures/camera folder) 
     /// </summary>
     public class GraphPoint
     {

SynoAI/Startup.cs

@@ -7,6 +7,7 @@
 using Microsoft.OpenApi.Models;
 using SynoAI.Services;
 using System.Threading.Tasks;
+using SynoAI.Hubs;
 
 namespace SynoAI
 {
@@ -25,6 +26,9 @@ public void ConfigureServices(IServiceCollection services)
             });
 
             services.AddRazorPages();
+
+            // euquiq: Needed for realtime update from each camera valid snapshot into client's web browser
+            services.AddSignalR();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
@@ -38,14 +42,21 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IConfigu
                 app.UseSwagger();
                 app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "SynoAI v1"));
             }
+            
+            // euquiq: Allows /wwwroot's static files (mainly our Javascript code for RT monitoring the cameras)
+            app.UseStaticFiles();
 
             app.UseRouting();
 
             app.UseAuthorization();
 
             app.UseEndpoints(endpoints =>
             {
-                endpoints.MapControllers();
+                // euquiq: Used by SignalR to contact each online client with snapshot updates
+                endpoints.MapHub<SynoAIHub>("/synoaiHub");
+
+                // euquiq: Web interface mapped inside HomeController.cs
+                endpoints.MapControllers();   
             });
 
             Task task = synologyService.InitialiseAsync();

SynoAI/Views/Home/Camera.cshtml SynoAI/Views/Home/Hour.cshtml

@@ -7,6 +7,7 @@
     graphDraw.GraphXAxisHeight = 24;
     graphDraw.GraphYAxisWidth = 24;
     graphDraw.GraphYSteps = 5;
+    string camera = ViewData["camera"].ToString();
 }
 <!DOCTYPE html>
 <html lang="en">
@@ -25,7 +26,7 @@
     </head>
     <body>
         <h2>SynoAI Report</h2>
-        <h4>Data for camera @ViewData["camera"] on date @ViewData["year"]-@ViewData["month"]-@ViewData["day"] @@ @ViewData["hour"] Hs. presented on @DateTime.Now</h4>
+        <h4>Data for camera @camera <a href="/@camera/RT">(View in realtime)</a> on date @ViewData["year"]-@ViewData["month"]-@ViewData["day"] @@ @ViewData["hour"] Hs. presented on @DateTime.Now</h4>
         <hr>
         @{ 
             DateTime fecha = new DateTime(Int16.Parse(ViewData["year"].ToString()),Int16.Parse(ViewData["month"].ToString()),Int16.Parse(ViewData["day"].ToString()),Int16.Parse(ViewData["hour"].ToString()),59,59);
@@ -43,7 +44,7 @@
                 </div>
                 @foreach (SynoAI.Models.GraphPoint graphPoint in data.GraphPoints)
                 {
-                    <a href="/@ViewData["camera"]/@graphPoint.Date.Year/@graphPoint.Date.Month/@graphPoint.Date.Day/@graphPoint.Date.Hour/@graphPoint.Date.Minute">
+                    <a href="/@camera/@graphPoint.Date.Year/@graphPoint.Date.Month/@graphPoint.Date.Day/@graphPoint.Date.Hour/@graphPoint.Date.Minute">
                         <div class="p" title="@graphPoint.Predictions Snapshots @@ @graphPoint.Date.ToString(@"HH\:mm") Hs." style="height:@graphDraw.GraphBarHeight(data.yMax, graphPoint.Predictions)px; width:@graphDraw.GraphColsWidth(data.GraphPoints.Count())px"></div>
                         <div class="o" title="@graphPoint.Objects Objects @@ @graphPoint.Date.ToString(@"HH\:mm") Hs." style="height:@graphDraw.GraphBarHeight(data.yMax, graphPoint.Objects)px;width:@graphDraw.GraphColsWidth(data.GraphPoints.Count())px"></div>
                     </a>

SynoAI/Views/Home/Index.cshtml

@@ -31,7 +31,7 @@
         {
             GraphData data = SynoAI.Controllers.HomeController.GetData(camera.Name, DateTime.Now, false);
             <p>
-                Camera: <b>@camera.Name</b><br />
+                Camera: <b>@camera.Name <a href="/@camera.Name/RT">(View in realtime)</a></b><br />
                 Threshold: <b>@camera.Threshold.ToString()</b>% certainity<br />
                 Objects: <b> @SynoAI.Controllers.HomeController.GetTypes(camera)</b><br />
                 Snapshots: <b> @data.Snapshots</b> images, distributed inside <b>@data.HoursCounter</b> Hours.<br />

SynoAI/Views/Home/Gallery.cshtml SynoAI/Views/Home/Minute.cshtml

@@ -2,6 +2,7 @@
 @using System
 @{
     DateTime date = (DateTime)ViewData["date"];
+    string camera = ViewData["camera"].ToString();
 }
 
 <!DOCTYPE html>
@@ -14,7 +15,7 @@
     </head>
     <body>
         <h2>SynoAI Report</h2>
-        <h4>Snapshots for camera @ViewData["camera"] on date @date.ToString(@"yyyy-MM-dd") @@ @date.ToString(@"HH\:mm") Hs. presented on @DateTime.Now</h4>
+        <h4>Snapshots for camera <a href="/@camera/RT">(View in realtime)</a> on date @date.ToString(@"yyyy-MM-dd") @@ @date.ToString(@"HH\:mm") Hs. presented on @DateTime.Now</h4>
         <hr>
         @{
             List<String> snapshots = SynoAI.Controllers.HomeController.GetSnapshots(ViewData["camera"].ToString(), date);
@@ -29,7 +30,7 @@
             {
                 snapWidth = 210;
             }
-            string camera = ViewData["camera"].ToString();
+            
             foreach (string filename in snapshots)
             {
                 <a href="/@camera/@filename">

SynoAI/Views/Home/Realtime.cshtml

@@ -0,0 +1,20 @@
+@using SynoAI.Models
+@using System
+@{
+    string camera = ViewData["camera"].ToString();
+}
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>SynoAI</title>
+        <script src="~/js/signalr/dist/browser/signalr.js"></script>
+        <script src="~/js/rtimage.js"></script>  
+    </head>
+    <body>
+        <h2>SynoAI Report</h2>
+        <h4>Realtime image prediction for camera @camera</h4>
+        <hr>
+        <img id="camera-@camera" style="width:100%; height:100%;" />
+    </body>
+</html>

SynoAI/wwwroot/js/rtimage.js

@@ -0,0 +1,32 @@
+// euquiq: In charge of receiving the snapshot from SynoAI SignalR's Hub and populating the <img>
+
+"use strict";
+
+const connection = new signalR.HubConnectionBuilder()
+    .withUrl("/synoaiHub")
+    .build();
+
+connection.on("ReceiveSnapshot", (cameraName, fileName) => {
+    var image = document.getElementById("camera-" + cameraName);
+    if (image != null) {
+        image.alt = fileName;
+        image.src = "/" + cameraName + "/" + fileName;
+    }
+});
+
+connection.onclose(async () => {
+    await start();
+});
+
+async function start() {
+    try {
+        await connection.start();
+        console.log("SignalR Connected.");
+    } catch (err) {
+        console.log(err);
+        setTimeout(start, 5000);
+    }
+};
+
+// Start the connection.
+start();