Improve quality and add flipped and rotated configs

script/rtspServer.js

@@ -9,7 +9,7 @@ new Stream({
   wsPort: parseInt(args[1]),
   ffmpegOptions: {
     // options ffmpeg flags
-    '-stats': '', // an option with no neccessary value uses a blank string
     '-r': 30, // options with required values specify the value after the key
+    '-q': 0, // quality video in scale [0, 32]
   },
 });

src/main/preload/api.ts

@@ -33,6 +33,6 @@ export const preload = {
   },
   rtsp: {
     start: (url: string) => ipcRenderer.invoke(RTSP_START, url),
-    stop: (url: string) => ipcRenderer.send(RTSP_STOP, url),
+    stop: (port: number) => ipcRenderer.send(RTSP_STOP, port),
   },
 };

src/main/rtspServer.ts

@@ -9,7 +9,7 @@ interface RtspProcess {
   wsPort: number;
 }
 
-const rtspServers: Map<string, RtspProcess> = new Map();
+const rtspServers: Map<number, RtspProcess> = new Map();
 
 // Stack array of ports from (9000 to 9060) to use for rtsp servers
 const ports = Array.from({ length: 61 }, (_, i) => i + 9000);
@@ -24,22 +24,22 @@ ipcMain.handle('rtsp_start', (event, url: string) => {
     nextPort.toString(),
   ]);
 
-  rtspServers.set(url, {
+  rtspServers.set(nextPort, {
     process,
     wsPort: nextPort,
   });
 
   return nextPort;
 });
 
-ipcMain.on('rtsp_stop', (event, url: string) => {
-  const rtspProcess = rtspServers.get(url);
+ipcMain.on('rtsp_stop', (event, port: number) => {
+  const rtspProcess = rtspServers.get(port);
 
   if (!rtspProcess) {
     return;
   }
   log.info('stopping rtsp process');
   ports.push(rtspProcess.wsPort);
   rtspProcess.process.kill();
-  rtspServers.delete(url);
+  rtspServers.delete(port);
 });

src/renderer/components/Feed/Feeds/CameraFeed.tsx

@@ -147,7 +147,13 @@ const View: FC<Props> = ({ feed }) => {
         </QRFeed>
       );
     case CameraType.RTSP:
-      return <RTSPFeed url={feed.camera.topic} />;
+      return (
+        <RTSPFeed
+          url={feed.camera.topic}
+          flipped={feed.camera.flipped}
+          rotated={feed.camera.rotated}
+        />
+      );
     default:
       return <TextFeed text="stream type not supported" />;
   }

src/renderer/components/Feed/Feeds/RTSPFeed.tsx

@@ -1,51 +1,78 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import JSMpeg from '@cycjimmy/jsmpeg-player';
 import { log } from '@/renderer/logger';
 
 interface Props {
   url: string;
+  flipped: boolean;
+  rotated: boolean;
 }
 
-export const RTSPFeed = ({ url }: Props) => {
+export const RTSPFeed = ({ url, flipped, rotated }: Props) => {
   const videoRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [port, setPort] = useState<number | null>(null);
+  const [videoElement, setVideoElement] =
+    useState<JSMpeg.VideoElement | null>();
 
   useEffect(() => {
-    log.info(`Starting RTSP server for ${url}`);
     const videoWrapper = videoRef.current;
     const canvas = canvasRef.current;
-    let videoElement: JSMpeg.VideoElement | null = null;
     const startServer = async () => {
       const port = (await window.preloadApi.rtsp.start(url)) as number;
       log.info(`RTSP server started on port ${port}`);
       if (videoWrapper && canvas) {
-        videoElement = new JSMpeg.VideoElement(
-          videoWrapper,
-          `ws://localhost:${port}`,
-          {
-            canvas,
-            autoplay: true,
-            audio: false,
-          }
+        setVideoElement(
+          new JSMpeg.VideoElement(
+            videoWrapper,
+            `ws://localhost:${port}`,
+            {
+              canvas,
+              autoplay: true,
+              audio: false,
+            },
+            { videoBufferSize: 2048 * 2048 }
+          )
         );
+        setPort(port);
       }
     };
-    startServer().catch((e) => log.error(e));
+    if (!port && !videoElement) {
+      startServer().catch((e) => log.error(e));
+    }
 
     return () => {
-      log.info('Stopping RTSP server');
-      window.preloadApi.rtsp.stop(url);
-      if (videoElement) {
-        videoElement.destroy();
+      if (port) {
+        log.info(`Stopping RTSP server for ${url}`);
+        window.preloadApi.rtsp.stop(port);
+        setPort(null);
+        if (videoElement) {
+          videoElement.destroy();
+        }
       }
     };
-  }, [url]);
+  }, [port, url, videoElement]);
 
   return (
-    <>
-      <div ref={videoRef}>
-        <canvas ref={canvasRef} />
-      </div>
-    </>
+    <div
+      ref={videoRef}
+      style={{
+        height: '100%',
+        objectFit: 'contain',
+        overflow: 'hidden',
+        transform: `${flipped ? 'scaleX(-1)' : ''} ${
+          rotated ? 'rotate(180deg)' : ''
+        }`,
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        style={{
+          height: '100%',
+          objectFit: 'contain',
+          overflow: 'hidden',
+        }}
+      />
+    </div>
   );
 };

src/renderer/types/jsmpeg.d.ts

@@ -7,9 +7,13 @@ declare module '@cycjimmy/jsmpeg-player' {
         canvas?: HTMLCanvasElement;
         autoplay?: boolean;
         audio?: boolean;
+        autoSetWrapperSize?: boolean;
+      },
+      overlayOptions?: {
+        videoBufferSize?: number;
       }
     );
-
+    paused: boolean;
     destroy(): void;
   }
 }