diff --git a/bricks/camera.js b/bricks/camera.js
new file mode 100644
index 0000000..9e0b907
--- /dev/null
+++ b/bricks/camera.js
@@ -0,0 +1,75 @@
+var bricks = window.bricks || {}
+bricks.Camera = class extends bricks.Popup {
+	/*
+	{
+		fps:60
+	*/
+	constructor(opts){
+		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);
+		}
+	}
+    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;
+        }
+    }
+	show_picture(){
+		var canvas = document.createElement('canvas');
+        canvas.height = this.video.videoHeight;
+        canvas.width = this.video.videoWidth;
+		const context = this.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);
+	}
+	take_picture(){
+		var d = this.imgs.base64();
+		this.dispatch('shot', d);
+        // Create a blob from the canvas data URL
+	}
+}