change video size, tune segmentation

build/callapp.html

@@ -20,11 +20,13 @@
             width: <input type="text" class="callapp_width" size="4" value="1280">  </input>
              
             height:<input type="text" class="callapp_height" size="4" value="720"> </input>
+
         </div>
         <button class="callapp_button"> Join </button>
         <div class="callapp_local_video">local video</div>
         <div class="callapp_remote_video">remote video</div>
     </div>
+
 <!--
     <div id="callapp2">
         <h1>Callapp2:</h1>

build/index.html

@@ -5,6 +5,9 @@
           type="image/png"
           href="favicon.png">
     <meta charset="utf-8">
+    <script>
+        window.videoSize = {w: 1280, h: 720, fps: 30};
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>

build/view/CallScreen.js

@@ -30,9 +30,9 @@ Screen.Conference = function() {
 
 	var resultProcessor = function(canvasElement) {
 		window.canvasElement = canvasElement;
-		const segmentations = [false,false,false,false];
+		let segmentations = [false,false,false];
 		let sPointer = 0;
-		var w = 720, h = 405;
+		var w = window.videoSize.w, h = window.videoSize.h;
 
 		var tmpCanvas = D.h('canvas', {width: w, height: h}),
 			tmpCtx = tmpCanvas.getContext('2d'),
@@ -51,10 +51,16 @@ Screen.Conference = function() {
 
 			tmpCtx.clearRect(0,0,w,h);
 			tmpCtx.drawImage(image,0,0,image.width,image.height,0,0,w,h);
-			segmentations[(sPointer++)%4] = tmpCtx.getImageData(0,0,w,h).data;
+			segmentations = [segmentations[1], segmentations[2], tmpCtx.getImageData(0,0,w,h).data];
+
+			sPointer++;
+			var tresh = 64;//window.tresh || 50;
 			var pos = canvasElement.position;
 			var from = w*pos[0]/100,
 				to = w*pos[1]/100;
+			var seg1 = segmentations[ 1 ],
+					seg2 = segmentations[ 2 ],
+				  seg0 = segmentations[ 0 ];
 			if(sPointer>3){
 				var pointer;
 				for(var j = 0; j < h; j++){
@@ -66,7 +72,7 @@ Screen.Conference = function() {
 						composedDataData[ pointer ] =
 							composedDataData[ pointer - 2 ] =
 								i<from || i > to ||
-								segmentations[ 3 ][ pointer ] + segmentations[ 2 ][ pointer ] + segmentations[ 1 ][ pointer ] + segmentations[ 0 ][ pointer ] < 120 ? 255 : 0;
+								seg2[ pointer ] + (seg1[ pointer ]>>1) + (seg0[ pointer ]>>2) < tresh ? 255 : 0;
 						pointer += 4;
 						//}
 					}
@@ -128,8 +134,8 @@ Screen.Conference = function() {
 				canvasResizerEl = CanvasResizer(
 					cameraCanvas = D.h( 'canvas', {
 						cls: "output_canvas",
-						width: "720px",
-						height: "480px",
+						width: window.videoSize.w+"px",
+						height: window.videoSize.h+"px",
 						style: {
 							/*display: 'none',*/
 							width: '320px'
@@ -194,7 +200,8 @@ Screen.Conference = function() {
 					}else{
 						var stream = await navigator.mediaDevices.getUserMedia( {
 							video: {
-								deviceId: { exact: input }
+								deviceId: { exact: input },
+								width: window.videoSize.w
 							}
 						} );
 
@@ -492,7 +499,7 @@ Screen.Conference = function() {
 							console.log('waiting permission')
 							try{
 								await new Promise(((r1, reject) => {
-									navigator.mediaDevices.getUserMedia( { video: { width: 1280, height: 720 } } )
+									navigator.mediaDevices.getUserMedia( { video: { width: window.videoSize.w, height: window.videoSize.h } } )
 										.then( function( stream ){
 											r1();
 											resolve();
@@ -522,7 +529,18 @@ Screen.Conference = function() {
 			console.log('Got error :', error);
 		}
 
-		navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
+		navigator.mediaDevices.enumerateDevices()
+			/*.then(devices => {
+				var cameras = devices.filter(device => device.kind == "videoinput");
+				return Promise.all(cameras.map(async function(camera) {
+					var constraints = { deviceId: { exact: camera.deviceId }, width: window.videoSize.w };
+					var media = await navigator.mediaDevices.getUserMedia({ video: constraints })
+					debugger
+					return media;
+				}))
+
+			})*/
+			.then(gotDevices).catch(handleError);
 
 		var soundDisablerID = setInterval(function() {
 			D('video').map(a=>a.muted = true)

build/webgl/index.html

@@ -7,7 +7,7 @@
   </head>
 
   <body>
-    <canvas id="glcanvas" width="640" height="480"></canvas>
+    <canvas id="glcanvas" width="1280" height="720"></canvas>
   </body>
 
 <script src="../bundle/awrtc.js"></script>
@@ -44,8 +44,8 @@
         config.Audio = false;
         config.Video = true;
 		config.FrameUpdates = true;
-        config.IdealWidth = 640;
-        config.IdealHeight = 480;
+        config.IdealWidth = 1280;
+        config.IdealHeight = 720;
         config.IdealFps = 30;
         console.log("requested config:" + JSON.stringify(config));
 		call.Configure(config);

src/apps/testapps.ts

@@ -138,7 +138,7 @@ export function CAPI_MediaNetwork_testapp()
     let lIndex = awrtc.CAPI_MediaNetwork_Create("{\"IceUrls\":[\"stun:stun.l.google.com:19302\"], \"SignalingUrl\":\"ws://because-why-not.com:12776\"}");
 
     let configDone = false;
-    awrtc.CAPI_MediaNetwork_Configure(lIndex, true, true, 160, 120, 640, 480, 640, 480, -1, -1, -1);
+    awrtc.CAPI_MediaNetwork_Configure(lIndex, true, true, window['videoSize']['w'], window['videoSize']['h'], window['videoSize']['w'], window['videoSize']['h'], window['videoSize']['w'], window['videoSize']['h'], -1, -1, -1);
     console.log(awrtc.CAPI_MediaNetwork_GetConfigurationState(lIndex));
 
     let startTime = new Date().getTime();

src/apps/videoinputapp.ts

@@ -77,11 +77,11 @@ export class VideoInputApp {
         var config = new awrtc.MediaConfig();
         config.Audio = false;//audio;
         config.Video = video;
-        config.IdealWidth = 640;
-        config.MinWidth = 640;
-        config.MinHeight = 480;
-        config.IdealHeight = 480;
-        config.IdealFps = 30;
+        config.IdealWidth = window['videoSize']['w'];
+        config.MinWidth = window['videoSize']['w'];
+        config.MinHeight = window['videoSize']['h'];
+        config.IdealHeight = window['videoSize']['h'];
+        config.IdealFps = window['videoSize']['fps'];
         if (this.sVideoDevice !== null) {
             config.VideoDeviceName = this.sVideoDevice;
         }

src/awrtc/media_browser/BrowserMediaStream.ts

@@ -528,8 +528,8 @@ export class BrowserMediaStream {
 
         var videoElement: HTMLVideoElement= document.createElement("video");
         //width/doesn't seem to be important
-        videoElement.width = 640;
-        videoElement.height = 480;
+        videoElement.width = window['videoSize']['w'];
+        videoElement.height = window['videoSize']['h'];
         videoElement.controls = true;
         videoElement.setAttribute("playsinline", "");
         videoElement.id = "awrtc_mediastream_video_" + this.mInstanceId;