Stream merger aspect ratio and resolution made configurable

src/main/webapp/js/stream_merger.js

@@ -1,7 +1,7 @@
 
 
 export class StreamMerger{
-  constructor(width, height, autoMode){
+  constructor(width, height, autoMode, aspectRatio){
       this.streams = [];
       this.width = width;
       this.height = height;
@@ -10,6 +10,10 @@ export class StreamMerger{
       this.audioDestination = this.audioCtx.createMediaStreamDestination()
       this.autoMode = autoMode;
 
+      this.aspectRatio = aspectRatio;
+      this.stream_height = height;
+      this.stream_width = width;
+
       //4:3 portrait mode stream width height
       this.pwidth = 0
       this.pheight = 0
@@ -33,6 +37,18 @@ export class StreamMerger{
       this.started = false;
       this.fps = 30;
   }
+
+  changeAspectRatio(ratio){
+    this.aspectRatio = ratio;
+    console.log("Changing aspect ratio to: " + ratio);
+    this.resizeAndSortV2();
+  }
+  changeStreamSize(height){
+    this.stream_height = height;
+    console.log("Changing merged streams size to = " + height + "p");
+    this.resizeAndSortV2();
+  }
+
   getResult(){
       return this.result;
   }
@@ -130,11 +146,11 @@ export class StreamMerger{
     /*
     * For automatic sorting, since webcams use default ratio as 4:3 the default canvas ratio is also 4:3
     * This is because the canvas size is also dynamic
-    * If you want to change the ratios you can change the hardcoded this.height, this.width
     */
     resizeAndSortV2(){
       //Clears all of the canvas when sorted.
       this.ctx.clearRect(0, 0, this.width, this.height);
+      console.log("Sorting the streams");
 
       let xindex = 0;
       let yindex = 0;
@@ -161,19 +177,42 @@ export class StreamMerger{
           divider = i;
           if( i*(i-1) >= this.streams.length && this.streams.length > 2){
             yNumber = i - 1;
-            this.height = 240 * yNumber;
-            this.width = 320 * yNumber;
-
-            pcheight = 240 * yNumber;
-            pcwidth = 180* yNumber;
-
+            this.height = this.stream_height * yNumber;
+            if(this.aspectRatio == "16:9"){
+              let temp = (this.stream_height / 9) * 16;
+              this.width = temp * yNumber;
+            }else{
+              let temp = (this.stream_height / 3) * 4;
+              this.width= temp * yNumber;
+            }
+
+            pcheight = this.stream_height * yNumber;
+            if(this.aspectRatio == "16:9"){
+              let temp = (this.stream_height / 16) * 9;
+              pcwidth = temp * yNumber;
+            }else{
+              let temp = (this.stream_height / 4) * 3;
+              pcwidth = temp * yNumber;
+            }
           }
           else{
             yNumber = i;
-            this.height = 240 * yNumber;
-            this.width = 320 * yNumber;
-            pcheight = 240 * yNumber;
-            pcwidth = 180* yNumber;
+            this.height = this.stream_height * yNumber;
+            if(this.aspectRatio == "16:9"){
+              let temp = (this.stream_height / 9) * 16;
+              this.width = temp * yNumber;
+            }else{
+              let temp = (this.stream_height / 3) * 4;
+              this.width= temp * yNumber;
+            }
+            pcheight = this.stream_height * yNumber;
+            if(this.aspectRatio == "16:9"){
+              let temp = (this.stream_height / 16) * 9;
+              pcwidth = temp * yNumber;
+            }else{
+              let temp = (this.stream_height / 4) * 3;
+              pcwidth = temp * yNumber;
+            }
           }
           break;
         }

src/main/webapp/merge_streams.html

@@ -97,6 +97,31 @@ <h3 class="col text-muted">WebRTC Merge</h3>
 						<input type="text" class="form-control" value="mergedStream"
 							   id="streamId" placeholder="Type streamId here">
 					</div>
+					<label>Aspect Ratio   </label>
+					<div class="form-check form-check-inline">
+						<input type="radio" checked name = "options" id="narrow" class="form-check-input"/>
+						<label class="form-check-label font-weight-light" for="narrow"> 
+							4:3
+						</label>
+					</div>
+
+					<div class="form-check form-check-inline">
+						<input type="radio"  name = "options" id="wide" class="form-check-input"/>
+						<label class="form-check-label font-weight-light" for="wide"> 
+							16:9
+						</label>
+					</div>
+					<div >
+						<label for="framework">Stream size</label>
+						<select id="framework">
+							<option value="120">120p</option>
+							<option value="240">240p</option>
+							<option value="360">360p</option>
+							<option value="480">480p</option>
+							<option value="720">720p</option>
+						</select>
+					</div>
+
 					<div class="form-group">
 						<button class="btn btn-primary"
 							id="join_publish_button">Start</button>
@@ -138,7 +163,16 @@ <h3 class="col text-muted">WebRTC Merge</h3>
 	var streamId = getUrlParameter("streamId");
 	var roomName = getUrlParameter("roomName");
     var playOnly = true;
-	var merger = new StreamMerger(640,480, true);
+	var merger = new StreamMerger(320,240, true, "4:3");
+
+	var narrow = document.getElementById("narrow");
+	narrow.addEventListener("click", toggleRatio, false);
+
+	var wide = document.getElementById("wide");
+	wide.addEventListener("click", toggleRatio, false);
+
+	var sb = document.querySelector('#framework');
+	sb.addEventListener("click" , toggleResolution, false);
 
 	var join_publish_button = document.getElementById("join_publish_button");
 	join_publish_button.addEventListener("click", joinRoom, false);
@@ -172,7 +206,19 @@ <h3 class="col text-muted">WebRTC Merge</h3>
 
 	if(streamId != null){
 		streamNameBox.value = streamId;
-	}	
+	}
+	function toggleResolution(event){
+		merger.changeStreamSize(sb.value);
+	}
+	function toggleRatio(){
+		if(narrow.checked == true){
+			merger.changeAspectRatio("4:3");
+		}
+		else{
+			merger.changeAspectRatio("16:9");
+		}
+
+	}
 
 	function sendNotificationEvent(eventType) {
 		if(isDataChannelOpen) {