Added screensharing to stream-chat.service.ts

Author: alexiscruzdavid

src/app/app.component.spec.ts

@@ -54,6 +54,7 @@ import {MockWebSocketService} from './core/services/testing/mock-websocket.servi
 import {TRACE_SERVICE, TraceService} from './core/services/trace.service';
 import {VIDEO_SERVICE, VideoService} from './core/services/video.service';
 import {WEBSOCKET_SERVICE, WebSocketService,} from './core/services/websocket.service';
+import { SCREEN_SHARING_SERVICE } from './core/services/screensharing.service';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
@@ -65,6 +66,7 @@ describe('AppComponent', () => {
     const audioService = new MockAudioService();
     const webSocketService = new MockWebSocketService();
     const videoService = new MockVideoService();
+    const screenSharingService = new MockScreenSharingService();
     const streamChatService = new MockStreamChatService();
     const eventService = new MockEventService();
     const downloadService = new MockDownloadService();
@@ -115,6 +117,10 @@ describe('AppComponent', () => {
               provide: VIDEO_SERVICE,
               useValue: videoService,
             },
+            {
+              provide: SCREEN_SHARING_SERVICE,
+              useValue: screenSharingService,
+            },
             {
               provide: STREAM_CHAT_SERVICE,
               useValue: streamChatService,

src/app/components/chat/chat.component.spec.ts

@@ -112,6 +112,7 @@ describe('ChatComponent', () => {
   let mockAudioService: MockAudioService;
   let mockWebSocketService: MockWebSocketService;
   let mockVideoService: MockVideoService;
+  let mockScreenSharingService: MockScreenSharingService;
   let mockStreamChatService: MockStreamChatService;
   let mockEventService: MockEventService;
   let mockDownloadService: MockDownloadService;
@@ -134,6 +135,7 @@ describe('ChatComponent', () => {
     mockAudioService = new MockAudioService();
     mockWebSocketService = new MockWebSocketService();
     mockVideoService = new MockVideoService();
+    mockScreenSharingService = new MockScreenSharingService();
     mockStreamChatService = new MockStreamChatService();
     mockEventService = new MockEventService();
     mockDownloadService = new MockDownloadService();

src/app/components/chat/chat.component.ts

@@ -1048,11 +1048,12 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
       return;
     }
     this.isScreenSharing = true;
-    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
-    this.webSocketService.connect(
-      `${protocol}://${URLUtil.getWSServerUrl()}/run_live?app_name=${this.appName}&user_id=${this.userId}&session_id=${this.sessionId}`,
-    );
-    this.screenSharingService.startScreenSharing(screenSharingContainer);
+    this.streamChatService.startScreenSharingChat({
+      appName: this.appName,
+      userId: this.userId,
+      sessionId: this.sessionId,
+      screenSharingContainer,
+    });
     this.messages.update(
         messages => [...messages, {role: 'user', text: 'Sharing Screen...'}]);
     this.sessionHasUsedBidi.add(this.sessionId);
@@ -1064,8 +1065,7 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
       return;
     }
 
-    this.screenSharingService.stopScreenSharing(screenSharingContainer);
-    this.webSocketService.closeConnection();
+    this.streamChatService.stopScreenSharingChat(screenSharingContainer);
     this.isScreenSharing = false;
   }
 

src/app/core/services/stream-chat.service.ts

@@ -23,6 +23,7 @@ import {LiveRequest} from '../models/LiveRequest';
 import {AUDIO_SERVICE, AudioService} from './audio.service';
 import {VIDEO_SERVICE, VideoService} from './video.service';
 import {WEBSOCKET_SERVICE, WebSocketService} from './websocket.service';
+import { SCREEN_SHARING_SERVICE, ScreenSharingService } from './screensharing.service';
 
 export const STREAM_CHAT_SERVICE =
     new InjectionToken<StreamChatService>('StreamChatService');
@@ -36,10 +37,12 @@ export const STREAM_CHAT_SERVICE =
 export class StreamChatService {
   private audioIntervalId: number|undefined = undefined;
   private videoIntervalId: number|undefined = undefined;
+  private screenSharingIntervalId: number|undefined = undefined;
 
   constructor(
       @Inject(AUDIO_SERVICE) private readonly audioService: AudioService,
       @Inject(VIDEO_SERVICE) private readonly videoService: VideoService,
+      @Inject(SCREEN_SHARING_SERVICE) private readonly screenSharingService: ScreenSharingService,
       @Inject(WEBSOCKET_SERVICE) private readonly webSocketService:
           WebSocketService,
   ) {}
@@ -111,12 +114,38 @@ export class StreamChatService {
     await this.startVideoStreaming(videoContainer);
   }
 
+  async startScreenSharingChat({
+    appName,
+    userId,
+    sessionId,
+    screenSharingContainer,
+  }: {
+    appName: string; userId: string; sessionId: string;
+    screenSharingContainer: ElementRef
+  }){
+    const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    this.webSocketService.connect(
+        `${protocol}://${URLUtil.getWSServerUrl()}/run_live?app_name=${
+            appName}&user_id=${userId}&session_id=${sessionId}`,
+    );
+
+    await this.startAudioStreaming();
+    await this.startScreenSharing(screenSharingContainer);
+  }
+
   stopVideoChat(videoContainer: ElementRef) {
     this.stopAudioStreaming();
     this.stopVideoStreaming(videoContainer);
     this.webSocketService.closeConnection();
   }
 
+  stopScreenSharingChat(screenSharingContainer: ElementRef) {
+    this.stopAudioStreaming();
+    this.stopScreenSharing(screenSharingContainer);
+    this.webSocketService.closeConnection();
+  }
+
+
   private async startVideoStreaming(videoContainer: ElementRef) {
     try {
       await this.videoService.startRecording(videoContainer);
@@ -129,6 +158,18 @@ export class StreamChatService {
     }
   }
 
+  private async startScreenSharing(screenSharingContainer: ElementRef) {
+    try {
+      await this.screenSharingService.startScreenSharing(screenSharingContainer);
+      this.screenSharingIntervalId = setInterval(
+          async () => await this.sendCapturedFrame(),
+          1000,
+      );
+    } catch (error) {
+      console.error('Error accessing camera:', error);
+    }
+  }
+
   private async sendCapturedFrame() {
     const capturedFrame = await this.videoService.getCapturedFrame();
     if (!capturedFrame) return;
@@ -148,6 +189,12 @@ export class StreamChatService {
     this.videoService.stopRecording(videoContainer);
   }
 
+  private stopScreenSharing(screenSharingContainer: ElementRef) {
+    clearInterval(this.screenSharingIntervalId);
+    this.screenSharingIntervalId = undefined;
+    this.screenSharingService.stopScreenSharing(screenSharingContainer);
+  }
+
   onStreamClose() {
     return this.webSocketService.onCloseReason();
   }

src/assets/config/runtime-config.json

@@ -1,3 +1,3 @@
 {
   "backendUrl": "http://localhost:8000"
-}
+}

src/main.ts

@@ -70,6 +70,7 @@ fetch('./assets/config/runtime-config.json')
         },
         {provide: AUDIO_SERVICE, useClass: AudioService},
         {provide: VIDEO_SERVICE, useClass: VideoService},
+        {provide: SCREEN_SHARING_SERVICE, useClass: ScreenSharingService},
         {provide: STREAM_CHAT_SERVICE, useClass: StreamChatService},
         {provide: EVENT_SERVICE, useClass: EventService},
         {provide: EVAL_SERVICE, useClass: EvalService},