+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ + Image Capture Widget
+Image Capture Widget + +
+
+
+
+
+
+
+ 
+
+
+ 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 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 butto 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 100644
index 000000000..2eb20f75f
--- /dev/null
+++ b/image_capture_upload_widget/static/src/js/image_capture.js
@@ -0,0 +1,164 @@
+/** @odoo-module **/
+
+import { isMobileOS } from "@web/core/browser/feature_detection";
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { url } from "@web/core/utils/urls";
+import { isBinarySize } from "@web/core/utils/binary";
+
+import { FileUploader } from "@web/views/fields/file_handler";
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+
+
+import { Component, useState, onWillUpdateProps } from "@odoo/owl";
+const { DateTime } = luxon;
+
+export const fileTypeMagicWordMap = {
+ "/": "jpg",
+ R: "gif",
+ i: "png",
+ P: "svg+xml",
+};
+
+const placeholder = "/web/static/img/placeholder.png";
+
+export function imageCacheKey(value) {
+ if (value instanceof DateTime) {
+ return value.ts;
+ }
+ return "";
+}
+
+export class ImageCapture extends Component {
+ setup() {
+ this.notification = useService("notification");
+ this.isMobile = isMobileOS();
+ this.state = useState({
+ isValid: true,
+ });
+
+ this.rawCacheKey = this.props.record.data.__last_update;
+ onWillUpdateProps((nextProps) => {
+ const { record } = this.props;
+ const { record: nextRecord } = nextProps;
+ if (record.resId !== nextRecord.resId || nextRecord.mode === "readonly") {
+ this.rawCacheKey = nextRecord.data.__last_update;
+ }
+ });
+ }
+
+ get sizeStyle() {
+ // For getting image style details
+ let style = "";
+ if (this.props.width) {
+ style += `max-width: ${this.props.width}px;`;
+ }
+ if (this.props.height) {
+ style += `max-height: ${this.props.height}px;`;
+ }
+ return style;
+ }
+ get hasTooltip() {
+ return this.props.enableZoom && this.props.readonly && this.props.value;
+ }
+
+ getUrl(previewFieldName) {
+ // getting the details and url of the image
+ if (this.state.isValid && this.props.value) {
+ if (isBinarySize(this.props.value)) {
+ if (!this.rawCacheKey) {
+ this.rawCacheKey = this.props.record.data.__last_update;
+ }
+ return url("/web/image", {
+ model: this.props.record.resModel,
+ id: this.props.record.resId,
+ field: previewFieldName,
+ unique: imageCacheKey(this.rawCacheKey),
+ });
+ } else {
+ // Use magic-word technique for detecting image type
+ const magic = fileTypeMagicWordMap[this.props.value[0]] || "png";
+ return `data:image/${magic};base64,${this.props.value}`;
+ }
+ }
+ return placeholder;
+ }
+ onFileRemove() {
+ // removing the images
+ this.state.isValid = true;
+ this.props.update(false);
+ }
+ onFileUploaded(info) {
+ // Upload the images
+ this.state.isValid = true;
+ this.rawCacheKey = null;
+ this.props.update(info.data);
+ }
+ onFileCaptureImage() {
+ // Open a window for open the image and capture it
+ var field = this.props.name;
+ var id = this.props.record.data.id;
+ var model = this.props.record.resModel;
+ this.env.services['action'].doAction({
+ type: "ir.actions.act_window",
+ res_model: 'image.capture',
+ views: [[false, "form"]],
+ target: "new",
+ context: {
+ "default_record_id": id,
+ "default_model_name": model,
+ "default_field_name": field,
+ },
+ });
+ }
+ onLoadFailed() {
+ this.state.isValid = false;
+ this.notification.add(this.env._t("Could not display the selected image"), {
+ type: "danger",
+ });
+ }
+}
+
+ImageCapture.template = "CaptureImage";
+ImageCapture.components = {
+ FileUploader,
+};
+ImageCapture.props = {
+ ...standardFieldProps,
+ enableZoom: { type: Boolean, optional: true },
+ zoomDelay: { type: Number, optional: true },
+ previewImage: { type: String, optional: true },
+ acceptedFileExtensions: { type: String, optional: true },
+ width: { type: Number, optional: true },
+ height: { type: Number, optional: true },
+};
+ImageCapture.defaultProps = {
+ acceptedFileExtensions: "image/*",
+};
+
+ImageCapture.displayName = _lt("Image");
+ImageCapture.supportedTypes = ["binary"];
+
+ImageCapture.fieldDependencies = {
+ __last_update: { type: "datetime" },
+};
+
+ImageCapture.extractProps = ({ attrs }) => {
+ return {
+ enableZoom: attrs.options.zoom,
+ zoomDelay: attrs.options.zoom_delay,
+ previewImage: attrs.options.preview_image,
+ acceptedFileExtensions: attrs.options.accepted_file_extensions,
+ width:
+ attrs.options.size && Boolean(attrs.options.size[0])
+ ? attrs.options.size[0]
+ : attrs.width,
+ height:
+ attrs.options.size && Boolean(attrs.options.size[1])
+ ? attrs.options.size[1]
+ : attrs.height,
+ };
+};
+
+registry.category("fields").add("capture_image", ImageCapture);
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 100644
index 000000000..51054ca9d
--- /dev/null
+++ b/image_capture_upload_widget/static/src/js/image_upload.js
@@ -0,0 +1,51 @@
+/** @odoo-module */
+
+import { registry } from '@web/core/registry';
+
+import { formView } from '@web/views/form/form_view';
+import { FormController } from '@web/views/form/form_controller';
+import { FormRenderer } from '@web/views/form/form_renderer';
+const { useListener } = require("@web/core/utils/hooks");
+import rpc from 'web.rpc';
+import { patch } from "@web/core/utils/patch";
+
+patch(FormRenderer.prototype, 'FormRender',{
+ setup() {
+ this._super();
+ },
+ async OnClickOpenCamera() {
+ // opening the camera for capture 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');
+ let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+ player.srcObject = stream;
+ },
+ async OnClickCaptureImage() {
+ // 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, 320, 240);
+ image.value = context.canvas.toDataURL();
+ canvas.classList.remove('d-none');
+ this.url = context.canvas.toDataURL()
+ },
+ async OnClickSaveImage(){
+ // Saving the image to that field
+ rpc.query({
+ model: 'image.capture',
+ method: 'action_save_image',
+ args: [[], this.props.record.data, this.url],
+ }).then(function(results){
+ location.reload();
+ })
+ }
+});
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 100644
index 000000000..e1bb3bec0
--- /dev/null
+++ b/image_capture_upload_widget/static/src/scss/image_capture.scss
@@ -0,0 +1,18 @@
+.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 100644
index 000000000..259331dee
--- /dev/null
+++ b/image_capture_upload_widget/static/src/xml/image_capture_templates.xml
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ ![Binary file]()
+
+
+
+
+
+
+
+
+
+
+
+
+