bricks/bricks/camera.js
2024-12-11 18:08:41 +08:00

100 lines
2.5 KiB
JavaScript

var bricks = window.bricks || {}
bricks.Camera = class extends bricks.Popup {
/*
{
fps:60
}
*/
constructor(opts){
opts.fps = opts.fps || 60;
opts.auto_dismiss = false;
super(opts);
this.stream = null;
this.video = document.createElement('video');
var filler = new bricks.Filler({});
var hbox = new bricks.HBox({
cheight:3
});
this.cur_camera_id = 0;
this.add_widget(filler);
this.add_widget(hbox);
var shot_btn = new bricks.Icon({
url:bricks_resource('imgs/camera.png'),
margin: '10px',
tip:'Take a picture',
rate:2.5
});
var switch_btn = new bricks.Icon({
url:bricks_resource('imgs/switch-camera.png'),
tip:'switch camera',
margin: '10px',
rate:1.5
});
var del_btn = new bricks.Icon({
url:bricks_resource('imgs/delete.png'),
tip:'canel it',
margin: '10px',
rate:1.5
})
del_btn.bind('click', this.dismiss.bind(this));
shot_btn.bind('click', this.take_picture.bind(this));
switch_btn.bind('click', this.switch_camera.bind(this, switch_btn));
this.imgw = new bricks.Image({
width:'100%'
});
hbox.add_widget(switch_btn);
hbox.add_widget(shot_btn);
hbox.add_widget(new bricks.Filler({}));
hbox.add_widget(del_btn);
filler.add_widget(this.imgw);
this.task_period = 1 / this.fps;
schedule_once(this.startCamera.bind(this), 0.1);
}
async switch_camera(btn, event){
if (bricks.app.video_devices.length < 2){
btn.disabled(true);
return;
}
var vpos = bricks.app.vpos;
vpos += 1;
if (vpos >= bricks.app.video_devices.length){
vpos = 0;
}
this.startCamera(vpos);
}
async startCamera(vpos) {
await bricks.app.start_camera(vpos);
this.stream = bricks.app.video_stream;
this.video.srcObject = this.stream;
this.video.play();
this.show_cnt = 1;
this.task = schedule_once(this.show_picture.bind(this), this.task_period);
}
show_picture(){
if (this.task_period == 0){
return;
}
var canvas = document.createElement('canvas');
canvas.height = this.video.videoHeight;
canvas.width = this.video.videoWidth;
const context = canvas.getContext('2d');
context.drawImage(this.video, 0, 0);
this.imgw.set_url(canvas.toDataURL('image/jpeg'));
this.task = schedule_once(this.show_picture.bind(this), this.task_period);
this.show_cnt += 1;
}
take_picture(event){
event.stopPropagation();
if (this.task){
task.cancel();
this.task = null;
}
this.task_period = 0;
this.task = null;
var d = this.imgw.base64();
this.dispatch('shot', d);
}
}
bricks.Factory.register('Camera', bricks.Camera);