Как реализовать этот пример как модуль?
Сейчас написал следующий модуль:
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;
});
Нравится
1 комментарий
18 сентября 2023 08:02
Сделал в виде миксина:
define("CameraPageMixin", [], function() {
Ext.define("Terrasoft.configuration.mixins.CameraPageMixin", {
alternateClassName: "Terrasoft.CameraPageMixin",
afterRender: function() {
this.callParent(arguments);
this.webcamStarted = false;
},
videoWidth: 500,
videoHeight: 380,
videoStream: null,
containerId: "WebCamModuleContainer",
photoContainerId: "PhotoModuleContainer",
openWebCamClick: function() {
try {
var videoElement = document.createElement("video");
videoElement.setAttribute("autoplay", "true");
videoElement.width = this.videoWidth;
videoElement.height = this.videoHeight;
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
videoElement.srcObject = stream;
this.videoStream = stream;
var container = this.Ext.get(this.containerId);
if (container) {
container.dom.appendChild(videoElement);
this.webcamStarted = true;
} else {
window.console.error("Ошибка: элемент с идентификатором "
+ this.containerId + " не найден в DOM.");
}
}.bind(this))
.catch(function(error) {
window.console.error("Ошибка при получении доступа к веб-камере:", error);
});
} catch (e) {
window.console.error("Произошла ошибка при инициализации веб-камеры:", e);
}
},
takePhoto: function() {
var videoElement = document.querySelector("video");
if (videoElement.srcObject) {
var canvas = document.createElement("canvas");
canvas.width = this.videoWidth;
canvas.height = this.videoHeight;
var context = canvas.getContext("2d");
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
var photoData = canvas.toDataURL("image/png");
this.closeWebCamAndRemoveContainer();
this.showModalWindow();
}
},
closeWebCamAndRemoveContainer: function() {
if (this.videoStream) {
this.videoStream.getTracks().forEach(function(track) {
track.stop();
});
}
var container = this.Ext.get(this.containerId);
if (container) {
container.dom.remove();
}
},
showModalWindow: function() {
this.showConfirmationDialog("Не пройдена по техническим причинам?",
this.showModalCallback,
[this.Terrasoft.MessageBoxButtons.NO.returnCode, this.Terrasoft.MessageBoxButtons.YES.returnCode],
null);
},
showModalCallback: function(returnCode) {
if (returnCode === this.Terrasoft.MessageBoxButtons.YES.returnCode) {
Terrasoft.showInformation("Нажата кнопка ДА");
} else if (returnCode === this.Terrasoft.MessageBoxButtons.NO.returnCode) {
Terrasoft.showInformation("Нажата кнопка НЕТ");
}
}
});
return Ext.create(Terrasoft.CameraPageMixin);
});
Показать все комментарии
Войдите или зарегистрируйтесь, что бы комментировать