bugfix

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;

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 \

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);

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
+			}
+		}
+	]
+}