feat: handle camera preview

packages/api/src/enums/webSocketEvent.enum.ts

@@ -1,4 +1,5 @@
 export enum WebSocketEvent {
   CHECK_DEVICE_CONNECTION = 'checkDeviceConnection',
   TOGGLE_GATE = 'toggleGate',
+  SET_NGROK_DATA = 'setNgrokData',
 }

packages/api/src/modules/app.module.ts

@@ -2,6 +2,7 @@ import { Module } from '@nestjs/common';
 import { ThrottlerModule } from '@nestjs/throttler';
 
 import { AuthModule } from './auth/auth.module';
+import { CameraModule } from './camera/camera.module';
 import { Config } from './config/config';
 import { ConfigModule } from './config/config.module';
 import { ConfigurationModule } from './configuration/configuration.module';
@@ -41,6 +42,7 @@ import { WebsocketModule } from './websocket/websocket.module';
     PushNotificationsModule,
     ExternalIntegrationsModule,
     ConfigurationModule,
+    CameraModule,
   ],
 })
 export class AppModule {}

packages/api/src/modules/camera/camera.controller.ts

@@ -0,0 +1,83 @@
+import {
+  BadGatewayException,
+  CACHE_MANAGER,
+  Controller,
+  Get,
+  Inject,
+  Logger,
+  Res,
+} from '@nestjs/common';
+import { Cache } from 'cache-manager';
+import { Response } from 'express';
+import https from 'https';
+
+import { Auth } from '../auth/decorators/auth.decorator';
+
+export interface NgrokData {
+  url: string;
+  auth: string;
+}
+
+@Auth()
+@Controller('camera')
+export class CameraController {
+  private readonly logger: Logger = new Logger(CameraController.name);
+
+  constructor(@Inject(CACHE_MANAGER) private readonly cacheManager: Cache) {}
+
+  @Get()
+  async proxyCameraRequest(@Res() res: Response) {
+    const ngrokData = (await this.cacheManager.get('ngrokData')) as NgrokData;
+    if (!ngrokData?.url || !ngrokData?.auth) {
+      throw new BadGatewayException();
+    }
+
+    res.set({
+      'Content-Type': 'multipart/x-mixed-replace; boundary=BoundaryString',
+      'Cache-Control': 'no-cache, private',
+      'Max-Age': 0,
+      Expires: 0,
+      Connection: 'close',
+      Pragma: 'no-cache',
+    });
+
+    const ngrokRequest = https
+      .request(ngrokData.url, { auth: ngrokData.auth }, (httpRes) => {
+        res.on('close', () => {
+          ngrokRequest.destroy(new Error('Client disconnected'));
+        });
+
+        httpRes.on('data', (dataBuffer) => {
+          if (httpRes.statusCode !== 200) {
+            return;
+          }
+          res.write(dataBuffer);
+        });
+
+        httpRes.on('close', () => {
+          if (httpRes.statusCode !== 200) {
+            this.logger.error(
+              `Ngrok connection closed with status code: ${
+                httpRes.statusCode?.toString() as string
+              }`,
+            );
+            res.status(httpRes.statusCode ?? 500).end();
+            return;
+          }
+
+          this.logger.log(
+            `Ngrok connection closed with status code: ${httpRes.statusCode?.toString()}`,
+          );
+          res.status(httpRes.statusCode ?? 200).end();
+        });
+      })
+      .on('error', (e) => {
+        if (e.message === 'Client disconnected') {
+          // Info about disconnect handled above in ngrok request
+          return;
+        }
+        this.logger.error(e.message);
+      });
+    ngrokRequest.end();
+  }
+}

packages/api/src/modules/camera/camera.module.ts

@@ -0,0 +1,13 @@
+import { CacheModule, Module } from '@nestjs/common';
+
+import { AuthModule } from '../auth/auth.module';
+import { TokenModule } from '../auth/token/token.module';
+import { RepositoryModule } from '../repository/repository.module';
+import { UsersModule } from '../users/users.module';
+import { CameraController } from './camera.controller';
+
+@Module({
+  imports: [UsersModule, AuthModule, RepositoryModule, TokenModule, CacheModule.register()],
+  controllers: [CameraController],
+})
+export class CameraModule {}

packages/api/src/modules/websocket/websocket.gateway.ts

@@ -1,4 +1,11 @@
-import { Injectable, Logger, ServiceUnavailableException } from '@nestjs/common';
+import {
+  CACHE_MANAGER,
+  Inject,
+  Injectable,
+  Logger,
+  MethodNotAllowedException,
+  ServiceUnavailableException,
+} from '@nestjs/common';
 import {
   OnGatewayConnection,
   OnGatewayDisconnect,
@@ -7,9 +14,11 @@ import {
   WebSocketGateway,
   WebSocketServer,
 } from '@nestjs/websockets';
+import { Cache } from 'cache-manager';
 import { Server, Socket } from 'socket.io';
 
 import { WebSocketEvent } from '../../enums/webSocketEvent.enum';
+import { NgrokData } from '../camera/camera.controller';
 import { TicketService } from '../ticket/ticket.service';
 import { WebsocketConfigService } from './config/websocket-config.service';
 
@@ -21,6 +30,7 @@ import { WebsocketConfigService } from './config/websocket-config.service';
 })
 export class Websocket implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
   constructor(
+    @Inject(CACHE_MANAGER) private readonly cacheManager: Cache,
     private readonly ticketService: TicketService,
     private readonly websocketConfigService: WebsocketConfigService,
   ) {}
@@ -68,6 +78,15 @@ export class Websocket implements OnGatewayInit, OnGatewayConnection, OnGatewayD
     this.deviceClient.send(WebSocketEvent.TOGGLE_GATE);
   }
 
+  @SubscribeMessage(WebSocketEvent.SET_NGROK_DATA)
+  async setNgrokData(client: Socket, ngrokData: NgrokData): Promise<void> {
+    if (this.deviceClient && client.id === this.deviceClient.id) {
+      await this.cacheManager.set('ngrokData', ngrokData, { ttl: 60 * 60 * 24 }); // Expires every 1 day
+    } else {
+      throw new MethodNotAllowedException();
+    }
+  }
+
   @SubscribeMessage(WebSocketEvent.CHECK_DEVICE_CONNECTION)
   checkDeviceConnection(client: Socket): void {
     this.logger.log(`client:${this.clients.get(client.id) ?? ''}`);

packages/api/src/modules/websocket/websocket.module.ts

@@ -1,11 +1,11 @@
-import { Module } from '@nestjs/common';
+import { CacheModule, Module } from '@nestjs/common';
 
 import { TicketModule } from '../ticket/ticket.module';
 import { WebsocketConfigModule } from './config/websocket-config.module';
 import { Websocket } from './websocket.gateway';
 
 @Module({
-  imports: [TicketModule, WebsocketConfigModule],
+  imports: [CacheModule.register(), TicketModule, WebsocketConfigModule],
   providers: [Websocket],
   exports: [Websocket],
 })

packages/client/src/i18n/resources/en.ts

@@ -76,6 +76,10 @@ const en = {
       dashboard: {
         title: 'Dashboard',
         sections: {
+          camera: {
+            title: 'Camera preview',
+            loadingPreview: 'Loading camera preview...',
+          },
           toggling: {
             swipeUpToToggle: 'Swipe up to toggle gate',
             toggleSuccess: 'Successfully toggled',

packages/client/src/i18n/resources/pl.ts

@@ -78,6 +78,10 @@ const pl: TranslationStructure = {
       dashboard: {
         title: 'Pulpit',
         sections: {
+          camera: {
+            title: 'Podgląd kamery',
+            loadingPreview: 'Ładowanie podglądu...',
+          },
           toggling: {
             swipeUpToToggle: 'Przesuń w górę aby aktywować bramę',
             toggleSuccess: 'Aktywowano bramę',

packages/client/src/pages/authorized/Dashboard/Dashboard.styled.ts

@@ -0,0 +1,19 @@
+import styled, { css } from 'styled-components';
+
+export const RowSection = styled.div(
+  ({ theme: { breakpoints, down } }) => css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 100px;
+    margin: 80px 0 20px;
+
+    ${down(breakpoints.md)} {
+      gap: 0;
+      align-items: center;
+      flex-direction: column-reverse;
+      & > :not(:first-child) {
+        margin-bottom: 50px;
+      }
+    }
+  `,
+);

packages/client/src/pages/authorized/Dashboard/index.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useAxios } from '../../../hooks';
 import registerWebPush from '../../../utils/registerWebPush';
 import { Title } from '../AuthorizedPages.styled';
+import { RowSection } from './Dashboard.styled';
+import CameraPreviewSection from './sections/CameraPreviewSection';
 import TogglingSection from './sections/TogglingSection';
 
 const Dashboard = () => {
@@ -17,7 +19,10 @@ const Dashboard = () => {
   return (
     <>
       <Title data-testid="dashboard-title">{t('routes.dashboard.title')}</Title>
-      <TogglingSection />
+      <RowSection>
+        <TogglingSection />
+        <CameraPreviewSection />
+      </RowSection>
     </>
   );
 };

packages/client/src/pages/authorized/Dashboard/sections/CameraPreviewSection/CameraPreviewSection.styled.ts

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components';
+
+export const LoadingContainer = styled.div(
+  ({ theme: { palette, sizes, down, breakpoints } }) => css`
+    position: relative;
+    width: 520px;
+    height: 345px;
+    border-radius: ${sizes.borderRadius};
+    background: ${palette.background.paper};
+
+    ${down(breakpoints.sm)} {
+      width: 100%;
+      padding-bottom: 66.66%;
+    }
+  `,
+);
+
+export const LoadingContent = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`;
+
+export const CameraPreview = styled.img<CameraPreviewProps>(
+  ({ isLoaded, theme: { sizes, down, breakpoints } }) => css`
+    border-radius: ${sizes.borderRadius};
+    width: 520px;
+    height: 345px;
+
+    ${!isLoaded &&
+    css`
+      visibility: hidden;
+    `};
+
+    ${down(breakpoints.sm)} {
+      width: 100%;
+      height: unset;
+    }
+  `,
+);

packages/client/src/pages/authorized/Dashboard/sections/CameraPreviewSection/CameraPreviewSection.types.d.ts

@@ -0,0 +1,3 @@
+interface CameraPreviewProps {
+  isLoaded: boolean;
+}

packages/client/src/pages/authorized/Dashboard/sections/CameraPreviewSection/index.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { CameraPreview, LoadingContainer, LoadingContent } from './CameraPreviewSection.styled';
+
+const CameraPreviewSection = () => {
+  const cameraURL = process.env.REACT_APP_API_URL && `${process.env.REACT_APP_API_URL}/camera`;
+  const previewRef = useRef<HTMLImageElement>(null);
+  const [isPreviewLoaded, setIsPreviewLoaded] = useState(false);
+  const { t } = useTranslation();
+
+  const reloadCameraPreview = useCallback(() => {
+    if (previewRef.current && cameraURL) {
+      const requestPreviewTime = new Date().getTime();
+      previewRef.current.src = `${cameraURL}/?t=${requestPreviewTime}`;
+    }
+  }, [cameraURL]);
+
+  useLayoutEffect(() => {
+    reloadCameraPreview();
+    window.addEventListener('focus', reloadCameraPreview);
+    return () => {
+      window.removeEventListener('focus', reloadCameraPreview);
+    };
+  }, [cameraURL, reloadCameraPreview]);
+
+  return (
+    <div>
+      {!isPreviewLoaded && (
+        <LoadingContainer>
+          <LoadingContent>
+            <h3>{t('routes.dashboard.sections.camera.loadingPreview')}</h3>
+          </LoadingContent>
+        </LoadingContainer>
+      )}
+      <CameraPreview
+        ref={previewRef}
+        isLoaded={isPreviewLoaded}
+        alt={t('routes.dashboard.sections.camera.title')}
+        onLoad={() => {
+          setIsPreviewLoaded(true);
+        }}
+      />
+    </div>
+  );
+};
+
+export default CameraPreviewSection;

packages/client/src/pages/authorized/Dashboard/sections/TogglingSection/TogglingSection.styled.ts

@@ -4,7 +4,6 @@ import { ITheme } from '../../../../../theme/Theme';
 
 export const ToggleSliderWrapper = styled.div(
   ({ theme: { down, breakpoints } }) => css`
-    margin: 80px 0 20px;
     display: inline-block;
     ${down(breakpoints.sm)} {
       display: flex;

packages/device/.env.example

@@ -1,3 +1,9 @@
-#API
+# API
 API_URL=http://localhost:3030
 AUTH_TICKET=ticket
+
+# Camera
+CAMERA_ENABLED=false
+CAMERA_USE_WIRED=true
+NGROK_LOCAL_CAMERA_ADDRESS=http://localhost:8081
+NGROK_REGION=eu

packages/device/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "chalk": "^4.1.2",
     "dotenv": "^10.0.0",
+    "ngrok": "^4.2.2",
     "rpio": "^2.4.2",
     "socket.io-client": "^4.1.3"
   },