Stream integration

Backend/package.json

@@ -33,7 +33,9 @@
     "bcrypt": "^5.1.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
+    "compression": "^1.7.4",
     "dotenv": "^16.3.1",
+    "jssip": "^3.10.1",
     "mongodb": "^6.3.0",
     "node-telegram-bot-api": "^0.64.0",
     "reflect-metadata": "^0.1.13",
@@ -46,6 +48,7 @@
     "@nestjs/schematics": "^10.0.0",
     "@nestjs/testing": "^10.0.0",
     "@types/bcrypt": "^10.0.28-alpha",
+    "@types/compression": "^1.7.5",
     "@types/eslint": "^8.44.7",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/express": "^4.17.17",

Backend/src/app/frontend/frontend.controller.ts

@@ -1,8 +1,12 @@
+/*
+ * Copyright (c) 2023. Leonardo Migliorelli <Glydric>
+ */
 import {
   Controller,
   Get,
   Header,
   Param,
+  Sse,
   StreamableFile,
   UseGuards,
 } from '@nestjs/common';
@@ -24,6 +28,8 @@ import {
   CameraIds,
   CameraValidator,
 } from '../../validators/camera-id/camera.pipe';
+import { Observable } from 'rxjs';
+import { subscribers, Message } from '../../cameraStream/cameraStream.gateway';
 import { AuthGuard } from '../../auth/auth.guard';
 
 const filterParams = {
@@ -97,4 +103,18 @@ export class FrontendController {
 
     return new StreamableFile(array[0].intrusionDetection.buffer);
   }
+
+  @ApiParam({
+    name: 'id',
+    type: 'number',
+    description: 'Camera id',
+    example: 1,
+  })
+  @ApiOkResponse({
+    description: 'Get the video stream in buffer format',
+  })
+  @Sse('/stream')
+  async getVideoStream(): Promise<Observable<Message>> {
+    return subscribers;
+  }
 }

Backend/src/cameraStream/cameraStream.gateway.ts

@@ -1,13 +1,16 @@
-// websocket.gateway.ts
+/*
+ * Copyright (c) 2023. Leonardo Migliorelli <Glydric>
+ */
 import {
   WebSocketGateway,
   SubscribeMessage,
   ConnectedSocket,
   MessageBody,
   OnGatewayConnection,
   WsException,
+  WebSocketServer,
 } from '@nestjs/websockets';
-import { Socket } from 'socket.io';
+import { Socket, Server } from 'socket.io';
 import { AuthGuard } from '../auth/auth.guard';
 import {
   Catch,
@@ -17,6 +20,11 @@ import {
   UseGuards,
 } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
+import { Subject } from 'rxjs';
+
+export const subscribers: Subject<Message> = new Subject<Message>();
+
+export type Message = { id: number; data: Buffer };
 
 @Catch(WsException, HttpException)
 export class WsExceptionFilter implements WsExceptionFilter {
@@ -25,18 +33,21 @@ export class WsExceptionFilter implements WsExceptionFilter {
   }
 }
 
-type Message = { id: number; data: Buffer };
-
 @WebSocketGateway({
-  transports: ['websocket'],
+  transports: ['websocket', 'polling'],
   cors: {
     origin: '*',
+    methods: ['GET', 'POST'],
+    transports: ['websocket', 'polling'],
+    credentials: true,
   },
-  namespace: '/',
+  allowEIO3: true,
 })
 @UseGuards(AuthGuard)
 @UseFilters(WsExceptionFilter)
 export class CameraStreamGateway implements OnGatewayConnection {
+  @WebSocketServer() io: Server;
+
   constructor(private readonly jwtService: JwtService) {}
 
   handleConnection(@ConnectedSocket() client: Socket) {
@@ -46,18 +57,14 @@ export class CameraStreamGateway implements OnGatewayConnection {
       client.disconnect();
       return;
     }
+
     client.join('clients');
   }
 
   @SubscribeMessage('message')
-  private broadcastMessage(
-    @ConnectedSocket() client: Socket,
-    @MessageBody() data: string,
-  ) {
+  private videoStream(@MessageBody() data: string) {
     try {
-      const message = JSON.parse(data) as Message;
-
-      client.to('clients').emit(message.id.toString(), message.data);
+      subscribers.next(JSON.parse(data));
     } catch (e) {
       return e.message;
     }

Backend/src/cameraStream/coolObserver.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023. Leonardo Migliorelli <Glydric>
+ */
+
+import { Subject } from 'rxjs';
+
+// Actually not used but it may be useful in the future or in another project
+export default class CoolObserver<T> {
+  subject: Subject<T[]> = new Subject<T[]>();
+
+  get(id: number): Subject<T> {
+    if (this.subject[id] === undefined) {
+      this.subject[id] = new Subject<T>();
+    }
+    return this.subject[id];
+  }
+
+  add(id: number, data: T) {
+    this.get(id).next(data);
+  }
+}

Frontend/next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    reactStrictMode: false
+}
 
 module.exports = nextConfig