Как сделать модуль вызова веб-камеры

Как реализовать этот пример как модуль?

 

Сейчас написал следующий модуль: 

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 комментарий

Сделал в виде миксина: 

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

 

Показать все комментарии