From 004ab046be626b4b181ec572781023dd97709fa9 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Thu, 18 Apr 2024 17:40:11 +0200
Subject: [PATCH] ov-components: Improved replace track sending stream params

---
 .../video-devices/video-devices.component.ts  |  8 +++---
 .../participant/participant.service.ts        | 26 ++++++++++++++++---
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.ts
index 91fbf958c9..29c5fae70c 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/settings/video-devices/video-devices.component.ts
@@ -78,7 +78,6 @@ export class VideoDevicesComponent implements OnInit, OnDestroy {
 
 		// Is New deviceId different from the old one?
 		if (this.deviceSrv.needUpdateVideoTrack(device)) {
-			const mirror = this.deviceSrv.cameraNeedsMirror(device.device);
 			// Reapply Virtual Background to new Publisher if necessary
 			const backgroundSelected = this.backgroundService.backgroundSelected.getValue();
 			const isBackgroundApplied = this.backgroundService.isBackgroundApplied();
@@ -86,9 +85,8 @@ export class VideoDevicesComponent implements OnInit, OnDestroy {
 			if (isBackgroundApplied) {
 				await this.backgroundService.removeBackground();
 			}
-			const pp: PublisherProperties = { videoSource: device.device, audioSource: false, mirror };
-			const publisher = this.participantService.getMyCameraPublisher();
-			await this.openviduService.replaceCameraTrack(publisher, pp);
+
+			await this.participantService.replaceVideoTrack(device);
 
 			if (isBackgroundApplied) {
 				const bgSelected = this.backgroundService.backgrounds.find((b) => b.id === backgroundSelected);
@@ -108,7 +106,7 @@ export class VideoDevicesComponent implements OnInit, OnDestroy {
 	 */
 	compareObjectDevices(o1: CustomDevice, o2: CustomDevice): boolean {
 		return o1.label === o2.label;
-	  }
+	}
 
 	protected subscribeToParticipantMediaProperties() {
 		this.localParticipantSubscription = this.participantService.localParticipantObs.subscribe((p: ParticipantAbstractModel) => {
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts
index b38b50bd94..e276d0ee4e 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/services/participant/participant.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Publisher, Subscriber } from 'openvidu-browser';
+import { Publisher, PublisherProperties, Subscriber } from 'openvidu-browser';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { ILogger } from '../../models/logger.model';
 import {
@@ -14,6 +14,7 @@ import { OpenViduAngularConfigService } from '../config/openvidu-angular.config.
 import { DeviceService } from '../device/device.service';
 import { LoggerService } from '../logger/logger.service';
 import { OpenViduService } from '../openvidu/openvidu.service';
+import { CustomDevice } from '../../models/device.model';
 
 @Injectable({
 	providedIn: 'root'
@@ -88,13 +89,26 @@ export class ParticipantService {
 		}
 	}
 
+	async replaceVideoTrack(device: CustomDevice) {
+		const mirror = this.deviceService.cameraNeedsMirror(device.device);
+		const cameraPublisher = this.getMyCameraPublisher();
+		const { frameRate, videoDimensions } = cameraPublisher.stream;
+		const pp: PublisherProperties = {
+			videoSource: device.device,
+			audioSource: false,
+			frameRate,
+			resolution: `${videoDimensions.width}x${videoDimensions.height}`,
+			mirror
+		};
+		await this.openviduService.replaceCameraTrack(cameraPublisher, pp);
+	}
+
 	/**
 	 * Share or unshare the local participant screen.
 	 * Hide the camera stream (while muted) when screen is sharing.
 	 *
 	 */
 	async toggleScreenshare() {
-
 		const screenPublisher = this.getMyScreenPublisher();
 		const participantNickname = this.getMyNickname();
 		const participantId = this.getLocalParticipant().id;
@@ -313,7 +327,13 @@ export class ParticipantService {
 			if (publish) {
 				// Forcing restoration with a custom media stream (the older one instead the default)
 				const currentDeviceId = this.deviceService.getCameraSelected()?.device;
-				const mediaStream = await this.openviduService.createMediaStream({ videoSource: currentDeviceId, audioSource: false });
+				const { frameRate, videoDimensions } = publisher.stream;
+				const mediaStream = await this.openviduService.createMediaStream({
+					videoSource: currentDeviceId,
+					audioSource: false,
+					frameRate,
+					resolution: `${videoDimensions.width}x${videoDimensions.height}`,
+				});
 				resource = mediaStream.getVideoTracks()[0];
 			}