add link camera

package.json

@@ -27,7 +27,8 @@
     "express": "^4.19.2",
     "express-ws": "^5.0.2",
     "leaflet": "^1.9.4",
-    "rtsp-relay": "^1.9.0",
+    "ngx-toastr": "^17.0.2",
+    "rtsp-relay": "^1.8.0",
     "rxjs": "~7.8.0",
     "rxjs-websockets": "^9.0.0",
     "tslib": "^2.3.0",

src/app/modules/overview/camera-stream/camera-stream.component.html

@@ -1,6 +1,2 @@
-<h3>Camera Stream</h3>
-<canvas #videoPlayer></canvas>
-
-<!--<video width="700" controls style="display: block; margin-left: auto; margin-right: auto">-->
-<!--  <source src="assets/video/video.mp4" type="video/mp4">-->
-<!--</video>-->
+<h3 style="text-align: center">Camera Stream</h3>
+<canvas class="video" #videoPlayer></canvas>

src/app/modules/overview/camera-stream/camera-stream.component.scss

@@ -1,22 +1,5 @@
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip .tooltiptext {
-  visibility: hidden;
-  width: 300px;
-  padding: 10px;
-  background-color: #fff;
-  color: black;
-  border-radius: 6px;
-  position: absolute;
-  z-index: 1;
-  bottom: 100%;
-  left: 50%;
-  margin-left: -60px;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
+.video {
+  width: 78% !important;
+  display: block;
+  margin: 0 auto
 }

src/app/modules/overview/camera-stream/camera-stream.component.ts

@@ -12,18 +12,22 @@ export class CameraStreamComponent implements OnInit, AfterViewInit{
   @ViewChild('videoPlayer')
   videoPlayer?: ElementRef<HTMLCanvasElement>;
 
-  ngOnInit() {
-  }
   constructor(private el: ElementRef, private renderer: Renderer2) {}
-  async ngAfterViewInit() {
-    this.player = await loadPlayer({
-      url: 'ws://localhost:8080/stream',
-      canvas: this.videoPlayer!.nativeElement,
 
-      onDisconnect: () => console.log('Connection lost!'),
-    });
+  ngOnInit() {
+  }
 
-    console.log('Connected!', this.player);
+  async ngAfterViewInit() {
+    const connect = async () => {
+      this.player = await loadPlayer({
+        url: 'ws://localhost:8080/stream',
+        canvas: this.videoPlayer!.nativeElement,
+        onDisconnect: () => {
+          setTimeout(connect, 5000); // reconnect after 5 seconds
+        },
+      });
+    };
+    connect();
   }
 
 

src/server/server.js

@@ -6,6 +6,7 @@ expressWs(app);
 const { proxy, scriptUrl } = require('rtsp-relay')(app);
 
 const port = 8080;
+const urlCamera = 'rtsp://admin:[email protected]:88/cam/realmonitor?channel=1&subtype=0';
 
 app.ws('/api/stream/:cameraIP', (ws, req) =>
   proxy({
@@ -14,8 +15,9 @@ app.ws('/api/stream/:cameraIP', (ws, req) =>
 );
 
 const handler = proxy({
-  url: 'rtsp://admin:hd543211@@xuanphuong32.dyndns.org:8001/cam/realmonitor?channel=7&subtype=0',
+  url: urlCamera,
   verbose: false,
+  transport: 'tcp'
 });