segmentation options

build/main.css

@@ -312,4 +312,14 @@ input[type="text"]:focus {
     right:0;
     width: 32px;
     height: 32px;
+}
+.options{
+    position: fixed;
+    top: 128px;
+    right: 0;
+    width: 512px;
+    background: #ffdada;
+    padding: 24px;
+    box-sizing: border-box;
+    border-radius: 24px 0 0 24px;
 }
\ No newline at end of file

build/view/CallScreen.js

 var isConnecting = new Store.Value.Boolean(false);
+var showOptions = new Store.Value.Boolean(false);
+
+
+
 Screen.Conference = function() {
+	store.set('tresh', 100);
+	var optStore = new Store({
+		eachFrame: true,
+		smallerImage: true
+	});
+	var trInput,
+			eachInput = D.h('input', {type: 'checkbox', onChange: (e)=>optStore.set('eachFrame', eachInput.checked)}),
+			smallerImageInput = D.h('input', {type: 'checkbox', onChange: (e)=>optStore.set('smallerImage', smallerImageInput.checked)});
+
+	window.options = D.div({},
+		D.div({},
+			trInput = LabeledInput({label: 'Threshold'}, 'tresh')
+		),
+		D.div({},
+			D.h('label', {},
+				D.div({cls: 'label_label'}, 'Each frame'),
+				eachInput
+			)
+		),
+		D.div({},
+			D.h('label', {},
+				D.div({cls: 'label_label'}, 'Smaller Image'),
+				smallerImageInput
+			)
+		)
+	);
+	optStore.sub('eachFrame', function(val) {
+		eachInput.checked = val;
+	});
+	optStore.sub('smallerImage', function(val) {
+		smallerImageInput.checked = val;
+	});
+	trInput.querySelector('input').type = 'number';
 
 	var RTC = function(parent, canvas, devname, id, remoteParent) {
 		let callApp;
@@ -27,7 +64,6 @@ Screen.Conference = function() {
 		callApp.___id = id;
 		this.id = id;
 	}
-
 	var resultProcessor = function(canvasElement) {
 		window.canvasElement = canvasElement;
 		let segmentations = [false,false,false];
@@ -54,7 +90,8 @@ Screen.Conference = function() {
 			segmentations = [segmentations[1], segmentations[2], tmpCtx.getImageData(0,0,w,h).data];
 
 			sPointer++;
-			var tresh = 64;//window.tresh || 50;
+			var tresh = store.get('tresh')|0;
+			//window.tresh || 50;
 			var pos = canvasElement.position;
 			var from = w*pos[0]/100,
 				to = w*pos[1]/100;
@@ -63,18 +100,32 @@ Screen.Conference = function() {
 				  seg0 = segmentations[ 0 ];
 			if(sPointer>3){
 				var pointer;
-				for(var j = 0; j < h; j++){
-					pointer = j*w*4+3;
-
-					for( var i = 0; i < w; i++ ){
-
-						//if( ){
-						composedDataData[ pointer ] =
-							composedDataData[ pointer - 2 ] =
-								i<from || i > to ||
-								seg2[ pointer ] + (seg1[ pointer ]>>1) + (seg0[ pointer ]>>2) < tresh ? 255 : 0;
-						pointer += 4;
-						//}
+
+				if(optStore.get('eachFrame')){
+					for( var j = 0; j < h; j++ ){
+						pointer = j * w * 4 + 3;
+						for( var i = 0; i < w; i++ ){
+							//if( ){
+							composedDataData[ pointer ] =
+								composedDataData[ pointer - 2 ] =
+									i < from || i > to ||
+									seg2[ pointer ] < tresh ? 255 : 0;
+							pointer += 4;
+							//}
+						}
+					}
+				}else{
+					for( var j = 0; j < h; j++ ){
+						pointer = j * w * 4 + 3;
+						for( var i = 0; i < w; i++ ){
+							//if( ){
+							composedDataData[ pointer ] =
+								composedDataData[ pointer - 2 ] =
+									i < from || i > to ||
+									seg2[ pointer ] + ( seg1[ pointer ] >> 1 ) + ( seg0[ pointer ] >> 2 ) < tresh ? 255 : 0;
+							pointer += 4;
+							//}
+						}
 					}
 				}
 				composedMaskCtx.putImageData(composedData,0,0);
@@ -284,12 +335,24 @@ Screen.Conference = function() {
 				resultProcessorFn.apply( this, arguments )
 			} );
 
+			var smalar = document.createElement('canvas'),
+					smalarCtx = smalar.getContext('2d');
 			var segmentation = async function() {
 
 				if( store.get( 'callScreenCamerasTune' ) ){
 						if( video1.videoWidth > 10 && store.get( 'videoinput' + currentCameraID ) ){
 							try{
-								await selfieSegmentation.send( { image: video1 } );
+								if(optStore.get('smallerImage')){
+									var w = video1.videoWidth, h = video1.videoHeight;
+
+									smalar.width = w/2;
+									smalar.height = h/2;
+
+									smalarCtx.drawImage(video1, 0,0, w, h,0,0,w/2,h/2);
+									await selfieSegmentation.send( { image: smalar } );
+								}else{
+									await selfieSegmentation.send( { image: video1 } );
+								}
 							}catch( e ){
 
 							}
@@ -388,6 +451,9 @@ Screen.Conference = function() {
 				remoteVideoEl
 
 			)
+		),
+		D.div({cls: ['options', {hidden: Store.NOT(showOptions)}]},
+			options
 		)
 	);
 
@@ -553,7 +619,11 @@ Screen.Conference = function() {
 	})();
 	return dom;
 };
-
+document.addEventListener('keydown', function(e) {
+	if(e.code === 'KeyO'){
+		showOptions.set(!showOptions.get());
+	}
+})
 Screen.Conference.beforeShow = function() {
 	isConnecting.set(false);
 	store.set({