Как реализовать этот пример как модуль?
Сейчас написал следующий модуль:
Ext.define("USACapturizePhotoModule", [], function() {
Ext.define("Terrasoft.configuration.USACapturizePhotoModule", {
extend: "Terrasoft.BaseModule",
alternateClassName: "Terrasoft.USACapturizePhotoModule",
init: function() {
this.callParent(arguments);
},
render: function(renderTo) {
this.callParent(arguments);
var config = this.generateConfig();
Ext.create(config, renderTo);
},
generateConfig: function() {
var width = 750;
var height = 500;
var video;
return {
xtype: "panel",
title: "Сделать фото клиента",
height: height,
width: width,
draggable: true,
closable: true,
floating: true,
layout: {
type: "vbox",
pack: "center",
align: "stretch"
},
items: [{
html: "<video id='video'></video>",
flex: 1,
listeners: {
afterrender: function() {
video = document.getElementById("video");
}
}
}],
bbar: [{
xtype: "button",
text: "Запустить камеру",
itemId: "startbutton",
enableToggle: true,
toggleHandler: function(btn, state) {
var streaming = false;
var stream;
if (state) {
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function(stream) {
stream = stream;
video.srcObject = stream;
video.play();
})
.catch(function(err) {
window.console.error("An error occurred: " + err);
});
video.addEventListener("canplay", function(ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute("width", width);
video.setAttribute("height", height);
streaming = true;
}
}, false);
} else {
video.pause();
video.src = "";
if (stream) {
stream.getTracks().forEach(function(track) {
track.stop();
});
}
video.srcObject = null;
}
this.ownerCt.down("#takePhoto").setDisabled(!state);
}
}, {
xtype: "button",
text: "Сделать снимок",
disabled: true,
itemId: "takePhoto",
handler: function() {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
context.drawImage(video, 0, 0, width, height);
var imageSrc = canvas.toDataURL("image/png");
Terrasoft.utils.log(imageSrc);
canvas = null;
}
}]
};
}
});
return Terrasoft.USACapturizePhotoModule;
});
