diff --git a/bricks/audio.js b/bricks/audio.js
old mode 100755
new mode 100644
diff --git a/bricks/baseKnowledge.txt b/bricks/baseKnowledge.txt
old mode 100755
new mode 100644
diff --git a/bricks/bricks.js b/bricks/bricks.js
old mode 100755
new mode 100644
index 2a50eed..03c8726
--- a/bricks/bricks.js
+++ b/bricks/bricks.js
@@ -484,8 +484,27 @@ bricks.App = class extends bricks.Layout {
 		this.add_widget(this.tooltip);
 		this._Width = this.dom_element.offsetWidth;
 		this._Height = this.dom_element.offsetHeight;
+		this.video_stream = null;
+		this.audio_stream = null;
 		document.addEventListener('keydown', this.key_down_action.bind(this));
 	}
+    async start_camera() {
+		if (this.video_stream) return;
+        if (navigator.mediaDevices.getUserMedia) {
+            this.video_stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        } else {
+            console.log("Webcam access is not supported in this browser.");
+        }
+    }
+    async start_mic() {
+		if (this.audio_stream) return;
+        if (navigator.mediaDevices.getUserMedia) {
+            this.audio_stream = navigator.mediaDevices.getUserMedia({ audio: true });
+        } else {
+            console.log("mic access is not supported in this browser.");
+			this.stream = null;
+        }
+    }
 	new_zindex(){
 		const v = this.zindex;
 		this.zindex = v + 1;
diff --git a/bricks/build.sh b/bricks/build.sh
old mode 100755
new mode 100644
index 9f287d9..2b98cf0
--- a/bricks/build.sh
+++ b/bricks/build.sh
@@ -1,6 +1,6 @@
 SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js uitype.js \
 	i18n.js widget.js layout.js bricks.js image.js html.js splitter.js \
-	jsoncall.js myoperator.js scroll.js menu.js popup.js modal.js running.js \
+	jsoncall.js myoperator.js scroll.js menu.js popup.js camera.js  modal.js running.js \
 	markdown_viewer.js video.js audio.js toolbar.js tab.js \
 	input.js registerfunction.js button.js accordion.js dataviewer.js \
 	tree.js multiple_state_image.js dynamiccolumn.js form.js message.js conform.js \
diff --git a/bricks/camera.js b/bricks/camera.js
index 9e0b907..3649a1f 100644
--- a/bricks/camera.js
+++ b/bricks/camera.js
@@ -8,68 +8,53 @@ bricks.Camera = class extends bricks.Popup {
 		opts.fps = opts.fps || 60;
 		super(opts);
 		this.stream = null;
-    	startCamera();
-		if (this.stream) {
-			this.video = document.createElement('video');
-			this.video.srcObject = this.stream;
-			this.video.play();
-			var filler = new bricks.Filler({});
-			var hbox = new bricks.HBox({
-					cheight:2
-			});
-			this.add_widget(filler);
-			this.add_widget(hbox);
-			shot_btn = new bricks.Icon({
-				url:bricks_resource('imgs/camera.png'),
-				rate:1.5
-			});
-			del_btn = new bricks.Icon({
-				url:bricks_resource('imgs/delete.png'),
-				rate:1.5
-			})
-			del_btn.bind('click', function(){
-				this.dismiss();
-			});
-			shot.bind('click', function(){
-				this.take_photo();
-			});
-			this.imgw = new bricks.Image({
-				width:'100%'
-			});
-			hbox.add_widget(shot_btn);
-			hbox.add_widget(del_btn);
-			filler.add_widget(this.ingw);
-			this.task_period = 1 / this.fps;
-			this.task = schedule_once(this.show_picture, this.task_period);
-		}
+		this.video = document.createElement('video');
+		var filler = new bricks.Filler({});
+		var hbox = new bricks.HBox({
+				cheight:2
+		});
+		this.add_widget(filler);
+		this.add_widget(hbox);
+		var shot_btn = new bricks.Icon({
+			url:bricks_resource('imgs/camera.png'),
+			rate:1.5
+		});
+		var del_btn = new bricks.Icon({
+			url:bricks_resource('imgs/delete.png'),
+			rate:1.5
+		})
+		del_btn.bind('click', this.dismiss.bind(this));
+		shot_btn.bind('click', this.take_picture.bind(this));
+		this.imgw = new bricks.Image({
+			width:'100%'
+		});
+		hbox.add_widget(shot_btn);
+		hbox.add_widget(del_btn);
+		filler.add_widget(this.imgw);
+		this.task_period = 1 / this.fps;
+    	schedule_once(this.startCamera.bind(this), 0.3);
 	}
-    startCamera() {
-        if (navigator.mediaDevices.getUserMedia) {
-            navigator.mediaDevices.getUserMedia({ video: true })
-                .then(function(stream) {
-					this.stream = stream;
-                })
-                .catch(function(err) {
-                    console.error("Error accessing webcam:", err);
-					this.stream = null;
-                });
-        } else {
-            console.log("Webcam access is not supported in this browser.");
-			this.stream = null;
-        }
+    async startCamera() {
+		await bricks.app.start_camera();
+		this.stream = bricks.app.video_stream;
+		this.video.srcObject = this.stream;
+		this.video.play();
+		this.task = schedule_once(this.show_picture.bind(this), this.task_period);
     }
 	show_picture(){
 		var canvas = document.createElement('canvas');
         canvas.height = this.video.videoHeight;
         canvas.width = this.video.videoWidth;
-		const context = this.canvas.getContext('2d');
+		const context = canvas.getContext('2d');
         context.drawImage(this.video, 0, 0);
-		this.imgs.set_url(canvas.toDataURL('image/jpeg'));
-		this.task = schedule_once(this.show_picture, this.task_period);
+		this.imgw.set_url(canvas.toDataURL('image/jpeg'));
+		this.task = schedule_once(this.show_picture.bind(this), this.task_period);
 	}
 	take_picture(){
-		var d = this.imgs.base64();
+		var d = this.imgw.base64();
 		this.dispatch('shot', d);
         // Create a blob from the canvas data URL
 	}
 }
+
+bricks.Factory.register('Camera', bricks.Camera);
diff --git a/bricks/factory.js b/bricks/factory.js
old mode 100755
new mode 100644
diff --git a/bricks/i18n.js b/bricks/i18n.js
old mode 100755
new mode 100644
diff --git a/bricks/image.js b/bricks/image.js
old mode 100755
new mode 100644
diff --git a/bricks/input.js b/bricks/input.js
old mode 100755
new mode 100644
diff --git a/bricks/jsoncall.js b/bricks/jsoncall.js
old mode 100755
new mode 100644
diff --git a/bricks/layout.js b/bricks/layout.js
old mode 100755
new mode 100644
diff --git a/bricks/markdown_viewer.js b/bricks/markdown_viewer.js
old mode 100755
new mode 100644
diff --git a/bricks/menu.js b/bricks/menu.js
old mode 100755
new mode 100644
diff --git a/bricks/minify_tools.txt b/bricks/minify_tools.txt
old mode 100755
new mode 100644
diff --git a/bricks/modal.js b/bricks/modal.js
old mode 100755
new mode 100644
diff --git a/bricks/myoperator.js b/bricks/myoperator.js
old mode 100755
new mode 100644
diff --git a/bricks/registerfunction.js b/bricks/registerfunction.js
old mode 100755
new mode 100644
diff --git a/bricks/tab.js b/bricks/tab.js
old mode 100755
new mode 100644
diff --git a/bricks/toolbar.js b/bricks/toolbar.js
old mode 100755
new mode 100644
diff --git a/bricks/tree.js b/bricks/tree.js
old mode 100755
new mode 100644
diff --git a/bricks/uitypesdef.js b/bricks/uitypesdef.js
old mode 100755
new mode 100644
diff --git a/bricks/utils.js b/bricks/utils.js
old mode 100755
new mode 100644
diff --git a/bricks/video.js b/bricks/video.js
old mode 100755
new mode 100644
diff --git a/bricks/widget.js b/bricks/widget.js
old mode 100755
new mode 100644
diff --git a/examples/camera.ui b/examples/camera.ui
new file mode 100644
index 0000000..2f78703
--- /dev/null
+++ b/examples/camera.ui
@@ -0,0 +1,29 @@
+{
+	"widgettype":"HBox",
+	"options":{
+		"widht":"100%",
+		"height":"100%"
+	},
+	"subwidgets":[
+		{
+			"widgettype":"Camera",
+			"options":{
+				"width":"50%",
+				"height":"90%",
+				"archor":"cl",
+				"auto_open":true,
+				"fps":60
+			}
+		},
+		{
+			"widgettype":"Camera",
+			"options":{
+				"width":"50%",
+				"height":"90%",
+				"archor":"cr",
+				"auto_open":true,
+				"fps":30
+			}
+		}
+	]
+}