Fix some issues with web proxy.

config had some issues handling.
Our compile mode doesn't seem to support properties.

Also stopped overflowing the datachannel when it fills. Stops sending
when it is close to full.

Change-Id: I3628adc8c1fbdaa8a170d5bc892653350f48111c
diff --git a/aos/network/web_proxy.cc b/aos/network/web_proxy.cc
index f4da7d9..5b50072 100644
--- a/aos/network/web_proxy.cc
+++ b/aos/network/web_proxy.cc
@@ -67,6 +67,10 @@
         rtc::CopyOnWriteBuffer(buffer.data(), buffer.size()),
         true /* binary array */);
     for (auto conn : channels_) {
+      if (conn->buffered_amount() > 14000000) {
+        VLOG(1) << "skipping a send because buffered amount is too high";
+        continue;
+      }
       conn->Send(data_buffer);
     }
   }
@@ -160,7 +164,7 @@
   webrtc::DataBuffer data_buffer(
       rtc::CopyOnWriteBuffer(buffer.data(), buffer.size()),
       true /* binary array */);
-  VLOG(2) << "Sending " << buffer.size() << "bytes to a client";
+  VLOG(1) << "Sending " << buffer.size() << "bytes to a client";
   data_channel_->Send(data_buffer);
 }
 
diff --git a/aos/network/www/proxy.ts b/aos/network/www/proxy.ts
index 9eb0bb6..a675340 100644
--- a/aos/network/www/proxy.ts
+++ b/aos/network/www/proxy.ts
@@ -79,7 +79,7 @@
         'message', (e) => this.onWebSocketMessage(e));
   }
 
-  get config() {
+  getConfig() {
     return this.config_internal;
   }
 
@@ -88,7 +88,7 @@
   onDataChannelMessage(e: MessageEvent): void {
     const fbBuffer = new flatbuffers.ByteBuffer(new Uint8Array(e.data));
     this.configInternal = Configuration.getRootAsConfiguration(fbBuffer);
-    for (handler of this.configHandlers) {
+    for (const handler of Array.from(this.configHandlers)) {
       handler(this.configInternal);
     }
   }
@@ -187,7 +187,7 @@
    * @param a Finished flatbuffer.Builder containing a Connect message to send.
    */
   sendConnectMessage(builder: any) {
-    const array = builder.assUint8Array();
+    const array = builder.asUint8Array();
     this.dataChannel.send(array.buffer.slice(array.byteOffset));
   }
 }
diff --git a/y2020/www/image_handler.ts b/y2020/www/image_handler.ts
index ae530ef..e2ba0b9 100644
--- a/y2020/www/image_handler.ts
+++ b/y2020/www/image_handler.ts
@@ -4,6 +4,7 @@
 export class ImageHandler {
   private canvas = document.createElement('canvas');
   private imageBuffer: Uint8ClampedArray|null = null;
+  private image: CameraImage|null = null;
   private imageTimestamp: flatbuffers.Long|null = null;
   private result: ImageMatchResult|null = null;
   private resultTimestamp: flatbuffers.Long|null = null;
@@ -16,6 +17,7 @@
   }
 
   handleImage(data: Uint8Array): void {
+    console.log('got an image to process');
     if (this.imageSkipCount != 0) {
       this.imageSkipCount--;
       return;
@@ -24,24 +26,28 @@
     }
 
     const fbBuffer = new flatbuffers.ByteBuffer(data);
-    const image = CameraImage.getRootAsCameraImage(fbBuffer);
-    this.imageTimestamp = image.monotonicTimestampNs();
+    this.image = CameraImage.getRootAsCameraImage(fbBuffer);
+    this.imageTimestamp = this.image.monotonicTimestampNs();
 
-    this.width = image.cols();
-    this.height = image.rows();
+    this.width = this.image.cols();
+    this.height = this.image.rows();
     if (this.width === 0 || this.height === 0) {
       return;
     }
-    this.imageBuffer = new Uint8ClampedArray(this.width * this.height * 4); // RGBA
 
+    this.draw();
+  }
+
+  convertImage(): void {
+    this.imageBuffer = new Uint8ClampedArray(this.width * this.height * 4); // RGBA
     // Read four bytes (YUYV) from the data and transform into two pixels of
     // RGBA for canvas
     for (const j = 0; j < this.height; j++) {
       for (const i = 0; i < this.width; i += 2) {
-        const y1 = image.data((j * this.width + i) * 2);
-        const u = image.data((j * this.width + i) * 2 + 1);
-        const y2 = image.data((j * this.width + i + 1) * 2);
-        const v = image.data((j * this.width + i + 1) * 2 + 1);
+        const y1 = this.image.data((j * this.width + i) * 2);
+        const u = this.image.data((j * this.width + i) * 2 + 1);
+        const y2 = this.image.data((j * this.width + i + 1) * 2);
+        const v = this.image.data((j * this.width + i + 1) * 2 + 1);
 
         // Based on https://en.wikipedia.org/wiki/YUV#Converting_between_Y%E2%80%B2UV_and_RGB
         const c1 = y1 - 16;
@@ -59,11 +65,10 @@
         this.imageBuffer[(j * this.width + i) * 4 + 7] = 255;
       }
     }
-
-    this.draw();
   }
 
   handleImageMetadata(data: Uint8Array): void {
+    console.log('got an image match result to process');
     const fbBuffer = new flatbuffers.ByteBuffer(data);
     this.result = ImageMatchResult.getRootAsImageMatchResult(fbBuffer);
     this.resultTimestamp = this.result.imageMonotonicTimestampNs();
@@ -74,8 +79,12 @@
   if (!this.imageTimestamp || !this.resultTimestamp ||
         this.imageTimestamp.low !== this.resultTimestamp.low ||
         this.imageTimestamp.high !== this.resultTimestamp.high) {
+      console.log('image and result do not match');
+      console.log(this.imageTimestamp.low, this.resultTimestamp.low);
+      console.log(this.imageTimestamp.high, this.resultTimestamp.high);
       return;
     }
+    this.convertImage();
     const ctx = this.canvas.getContext('2d');
 
     this.canvas.width = this.width;