+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+
+ + Image Capture Widget
++ This custom module provides a that allows users to capture + images directly using their device's camera or upload images + from local storage to any image field within the Odoo + environment. +
+
+
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+ This module is used to Capture Image from our Webcam. It is a widget for
+ image fields to capture the images directly from the webcam.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+ 
+ Enterprise and Community compatible.
+
+
+ Enterprise and Community compatible.
+
+
+ Capturing Image from webcam
+
+
+ Capturing Image from webcam
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+ + Configuration +
+Add the 'capture_image' as the widget, 'oe_avatar' as class of an + image field
+
+ 
+
+
+ + Click the camera button to open the wizard +
+
+
+ 
+
+ + Click the 'Open Camera' button to open the camera +
+
+
+ 
+
+
+ + Click the capture button to take image and then click the save + image button for saving the image. +
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
diff --git a/image_capture_upload_widget/static/src/js/image_capture.js b/image_capture_upload_widget/static/src/js/image_capture.js
new file mode 100755
index 000000000..3b4eb3a8d
--- /dev/null
+++ b/image_capture_upload_widget/static/src/js/image_capture.js
@@ -0,0 +1,74 @@
+odoo.define('image_capture_upload_widget.CaptureImage', function (require) {
+ "use strict";
+ const { getDataURLFromFile } = require('web.utils');
+ var basicFields =require('web.basic_fields');
+ var rpc = require('web.rpc');
+ var core = require('web.core');
+ var fieldRegistry = require('web.field_registry');
+ const toBase64 = file => new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onload = () => resolve(reader.result);
+ reader.onerror = error => reject(error);
+});
+ var QWeb = core.qweb;
+ var CaptureImage = basicFields.FieldBinaryImage.extend({
+ template: 'CaptureImage',
+ events: {
+ 'click .o_select_file_button': 'onFileEdit',
+ 'click .o_upload_image_button': 'onFileUpload',
+ 'click .o_clear_file_button': 'onFileClear'
+ },
+ onFileEdit: function (ev) {
+ var self = this;
+ // Create an input element of type file
+ var fileInput = document.createElement('input');
+ fileInput.type = 'file';
+ // Trigger the file selection dialog
+ fileInput.click();
+ // Handle the selected file
+fileInput.addEventListener('change', async function (event) {
+ var file = event.target.files[0];
+ if (file) {
+ // Perform necessary operations with the selected file
+ var file_image = file_splice.split(',')[1]
+ //var file_name = ev.target.files[0].name
+ var record=rpc.query({
+ model: self.model,
+ method: 'write',
+ args: [[self.res_id], {[self.name] : file_image }],
+ }).then(function(){
+ window.location.reload();
+ });
+ // You can also upload the file to the server if needed
+ // Implement the desired functionality for file upload
+ }
+ });
+},
+onFileClear: function (ev) {
+ var self = this;
+ rpc.query({
+ model: self.model,
+ method: 'write',
+ args: [[self.res_id], {[self.name] : 0 }],
+ }).then(function(){
+ window.location.reload();
+ });
+},
+onFileUpload: function (ev) {
+ ev.preventDefault();
+ var self = this;
+ // Open form using do_action
+ var action = {
+ type: 'ir.actions.act_window',
+ res_model: 'image.capture',
+ views: [[false, 'form']],
+ target: 'new', // Open the form in a new window/tab
+ context: {'model_name': self.model, 'record_id': self.res_id, 'field_name': self.name}
+ };
+ this.do_action(action);
+ },
+ });
+fieldRegistry.add('capture_image', CaptureImage);
+ return CaptureImage;
+});
diff --git a/image_capture_upload_widget/static/src/js/image_upload.js b/image_capture_upload_widget/static/src/js/image_upload.js
new file mode 100755
index 000000000..9f4842aea
--- /dev/null
+++ b/image_capture_upload_widget/static/src/js/image_upload.js
@@ -0,0 +1,81 @@
+odoo.define('image_capture_upload_widget.image_upload', function (require) {
+"use strict";
+ const FormController = require('web.FormController');
+ const FormView = require('web.FormView');
+ const viewRegistry = require('web.view_registry');
+ var rpc = require('web.rpc');
+ var core = require('web.core');
+ var Dialog = require('web.Dialog');
+ var _t = core._t;
+ var data
+ var url
+ const CaptureWizardFormRenderer = FormController.extend({
+ custom_events: _.extend({}, FormController.prototype.custom_events, {
+ button_clicked: 'OnClickOpenCamera',
+ }),
+ init: function () {
+ this._super.apply(this, arguments);
+ const self = this;
+ data=this.initialState.context
+ },
+ renderButtons: function ($node) {
+ this._super.apply(this, arguments);
+ // When clicking on "Add", create a new record in form view
+ this.$buttons.on('click', '.camera', this.OnClickOpenCamera);
+ this.$buttons.on('click', '.capture', this.OnClickCaptureImage);
+ this.$buttons.on('click', '.save_image', this.OnClickSaveImage);
+ },
+OnClickOpenCamera: async function () {
+ // opening the camera for capturing the image
+ var player = document.getElementById('player');
+ var captureButton = document.getElementById('capture');
+ var camera = document.getElementById('camera');
+ player.classList.remove('d-none');
+ captureButton.classList.remove('d-none');
+ camera.classList.add('d-none');
+ // Check if the browser supports getUserMedia
+ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+ // Request access to the video stream
+ await navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+ .then(function (stream) {
+ // Success callback, stream is a MediaStream object
+ player.srcObject = stream;
+ })
+ .catch(function (error) {
+ });
+ } else {
+ Dialog.alert(self, _t('getUserMedia is not supported in this browser.'))
+ }
+},
+OnClickCaptureImage: function() {
+ // Capture the image from webcam and close the webcam
+ var context = snapshot.getContext('2d');
+ var canvas = document.getElementById('snapshot')
+ var save_image = document.getElementById('save_image')
+ var image = document.getElementById('image');
+ var video = document.getElementById('video')
+ var camera = document.getElementById('camera');
+ save_image.classList.remove('d-none');
+ context.drawImage(player, 0, 0, 300, 200);
+ image.value = context.canvas.toDataURL();
+ canvas.classList.remove('d-none');
+ url = context.canvas.toDataURL()
+ },
+ OnClickSaveImage: function(){
+ rpc.query({
+ model: 'image.capture',
+ method: 'action_save_image',
+ args: [[], data, url],
+ }).then(function(results){
+ location.reload();
+ })
+ }
+});
+ const CaptureView = FormView.extend({
+ config: _.extend({}, FormView.prototype.config, {
+ Controller: CaptureWizardFormRenderer,
+ }),
+ });
+ viewRegistry.add('capture_wizard', CaptureView);
+ return CaptureView;
+});
diff --git a/image_capture_upload_widget/static/src/scss/image_capture.scss b/image_capture_upload_widget/static/src/scss/image_capture.scss
new file mode 100755
index 000000000..ef855ee73
--- /dev/null
+++ b/image_capture_upload_widget/static/src/scss/image_capture.scss
@@ -0,0 +1,16 @@
+.o_field_image {
+ background-color: var(--ImageField-background-color, transparent);
+ button {
+ transition: opacity ease 400ms;
+ width: 26px;
+ height: 26px;
+ }
+ .o_mobile_controls {
+ button {
+ width: 30px;
+ height: 30px;
+ padding: 6px !important;
+ }
+ }
+}
+
diff --git a/image_capture_upload_widget/static/src/xml/image_capture_templates.xml b/image_capture_upload_widget/static/src/xml/image_capture_templates.xml
new file mode 100755
index 000000000..a5416f87b
--- /dev/null
+++ b/image_capture_upload_widget/static/src/xml/image_capture_templates.xml
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+