diff --git a/bricks/recorder.js b/bricks/recorder.js
index 7b04570..38d7f73 100644
--- a/bricks/recorder.js
+++ b/bricks/recorder.js
@@ -128,30 +128,24 @@ bricks.SysVideoRecorder = class extends bricks.MediaRecorder {
 		}
 		this.mimetype = 'video/mp4';
 		this.stream = await navigator.mediaDevices.getUserMedia(options);
+		const track = this.stream.getVideoTracks()[0];
+		const settings = track.getSettings();
+		this.imageCapture = new ImageCapture(track);
+		this.camera_height = settings.height;
+		this.camera_width = settings.width;
 		this.imgw = new bricks.Image({width: '100%'});
 		this.preview.add_widget(this.imgw);
 		this.task = schedule_once(this.show_picture.bind(this), this.task_period);
 	}
-	get_camera_size(){
-		const track = stream.getVideoTracks()[0];
-		const settings = track.getSettings();
-		return [settings.width, settings.height]
-	}
 	show_picture(){
 		if (this.task_period == 0){
 			return;
 		}
-		var canvas = document.createElement('canvas');
-		var size = this.get_camera_size();
-        canvas.height = size[1];
-        canvas.width = size[0];
-		const context = canvas.getContext('2d');
-        context.drawImage(this.video, 0, 0);
-		this.dataurl = canvas.toDataURL('image/jpeg', 0.95);
+		const blob = await this.imageCapture.takePhoto();
+		this.dataurl = URL.createObjectURL(blob);
 		this.imgw.set_url(this.dataurl);
 		this.task = schedule_once(this.show_picture.bind(this), 
 									this.task_period);
-		this.show_cnt += 1;
 	}
 	close_recorder(){
 		super.close_recorder();