canvas alpha color is now blue. smooth segmentation detection

build/segmentrtc.html

@@ -180,25 +180,51 @@
   );
 	const videoElement = document.getElementsByClassName('input_video')[0];
 	const canvasElement = window.canvasElement =document.getElementsByClassName('output_canvas')[0];
+	const segmentations = [false,false,false,false];
+	let sPointer = 0;
+	var w = 720, h = 405;
+
+	var tmpCanvas = D.h('canvas', {width: w, height: h}),
+        tmpCtx = tmpCanvas.getContext('2d'),
+
+        composedMaskCanvas = D.h('canvas', {width: w, height: h, renderTo: document.body}),
+        composedMaskCtx = composedMaskCanvas.getContext('2d'),
+        composedData = composedMaskCtx.getImageData(0,0,w,h),
+        composedDataData = composedData.data;
+
 	const canvasCtx = window.canvasCtx = canvasElement.getContext('2d');
 
 	window.onResults = function(results){
-			canvasCtx.save();
+		var max = Math.max;
 
-			canvasCtx.clearRect( 0, 0, canvasElement.width, canvasElement.height );
-			canvasCtx.drawImage( results.segmentationMask, 0, 0,
-				canvasElement.width, canvasElement.height );
 
+		tmpCtx.clearRect(0,0,w,h);
+		tmpCtx.drawImage(results.segmentationMask,0,0,w,h,0,0,w,h);
+		segmentations[(sPointer++)%4] = tmpCtx.getImageData(0,0,w,h).data;
 
-			// Only overwrite missing pixels.
-			canvasCtx.globalCompositeOperation = 'source-in';
+		if(sPointer>3){
+			for(var i = 3, _i = h*w*4; i < _i; i+=4){
+				//if( ){
+				composedDataData[ i ] =
+					composedDataData[ i - 1 ] = segmentations[ 3 ][i] + segmentations[ 2 ][i] + segmentations[ 1 ][i] + segmentations[ 0 ][i]>120?0:255;
+				//}
+			}
+			composedMaskCtx.putImageData(composedData,0,0);
+
+		}
 		canvasCtx.drawImage(
 			results.image, 0, 0, canvasElement.width, canvasElement.height );
-			canvasCtx.globalCompositeOperation = 'destination-over';
+
+		canvasCtx.drawImage( composedMaskCanvas/*results.segmentationMask*/, 0, 0,
+			canvasElement.width, canvasElement.height );
+
+
+		// Only overwrite missing pixels.
+		//canvasCtx.globalCompositeOperation = 'source-in';
+
 		/*canvasCtx.fillStyle = '#fff';
         canvasCtx.fillRect( 0, 0, canvasElement.width, canvasElement.height );*/
 
-			canvasCtx.restore();
 	};/*
 		canvasCtx.save();
 		canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
@@ -239,8 +265,8 @@
 		onFrame: async () => {
 			await selfieSegmentation.send({image: videoElement});
 		},
-		width: 1280,
-		height: 720
+		width: w,//1280,
+		height: h//,720
 	});
 	camera.start();
     D.ext(D('.callapp_button')[0], {onclick: function() {