+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+ 
+
+ + Capture Image Upload
++ Capture the Identification Images for Products & Contacts +
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ This module allows the user to capture the images of Employee profile
+ picture,
+ Partner profile picture and product Image with their web cameras.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+
+ Capture Partner profile picture
+
+
+
+
+ Capture Partner profile picture
+
+
+
+
+
+
+ Capture Employee profile picture
+
+
+
+
+ Capture Employee profile picture
+
+
+
+
+
+
+ Capture Product Image
+
+
+
+
+ Capture Product Image
+
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Go to products >> Camera icon. +
+
+
+ 
+
+
+ + Take a photo button click.
+
+
+ 
+
+ + Save the Image.
+
+
+ 
+
+
+
+ + Image was Uploaded +
+
+
+
+
+ 
+
+
+ + 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/capture_image_field/static/src/js/camera_dialog.js b/capture_image_field/static/src/js/camera_dialog.js
new file mode 100644
index 000000000..7bd37d050
--- /dev/null
+++ b/capture_image_field/static/src/js/camera_dialog.js
@@ -0,0 +1,82 @@
+/** @odoo-module */
+
+import { Dialog } from "@web/core/dialog/dialog";
+const { useRef, onMounted, useState, Component, onWillUnmount } = owl;
+ /**
+ * creating a dialogue to show camera
+ */
+export class CameraDialog extends Component {
+ setup() {
+ super.setup();
+ this.video = useRef('video');
+ this.image = useRef('image');
+ this.state = useState({
+ img: false
+ })
+ onMounted(async () => {
+ this.video.el.srcObject = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+ });
+ onWillUnmount(() => {
+ this.stopCamera();
+ })
+ }
+ /**
+ * Closes the camera
+ */
+ _cancel() {
+ (this.env.dialogData).close()
+ this.stopCamera();
+ }
+ /**
+ * Saves the Image
+ */
+ _confirm() {
+ let video = this.video.el
+ let image = this.image.el
+ const canvas = document.createElement("canvas");
+ canvas.width = video.videoWidth;
+ canvas.height = video.videoHeight;
+ const canvasContext = canvas.getContext("2d");
+ canvasContext.drawImage(video, 0, 0);
+ this.state.img = canvas.toDataURL('image/jpeg');
+ this.img_binary = this.state.img.split(',')[1]
+ video.classList.add('d-none');
+ image.classList.remove('d-none');
+ image.src = this.state.img
+ }
+ /**
+ * Updates the image
+ */
+ _save(){
+ this.props.parent.props.update(this.img_binary);
+ this.props.parent.state.isValid = true;
+ this.props.parent.rawCacheKey = null;
+ (this.env.dialogData).close()
+ this.stopCamera();
+ }
+ /**
+ * Resets the Image
+ */
+ _reset(){
+ this.img_binary = false;
+ this.state.img = false;
+ this.video.el.classList.remove('d-none');
+ this.image.el.classList.add('d-none');
+ }
+ /**
+ * Closes camera
+ */
+ _close(){
+ this.stopCamera();
+ }
+ /**
+ * Stop camera
+ */
+ stopCamera(){
+ this.video.el.srcObject.getVideoTracks().forEach((track) => {
+ track.stop();
+ });
+ }
+}
+CameraDialog.template = "capture_image_field.camera_dialog";
+CameraDialog.components = { Dialog };
\ No newline at end of file
diff --git a/capture_image_field/static/src/js/image_upload.js b/capture_image_field/static/src/js/image_upload.js
new file mode 100644
index 000000000..861e405d9
--- /dev/null
+++ b/capture_image_field/static/src/js/image_upload.js
@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+import { ImageField } from '@web/views/fields/image/image_field';
+import { patch } from "@web/core/utils/patch";
+import { CameraDialog } from "./camera_dialog.js";
+import { useService } from "@web/core/utils/hooks";
+ /**
+ * Updates ImageField
+ */
+patch(ImageField.prototype, '/capture_image_field/static/src/js/image_upload.js', {
+ setup(){
+ this._super.apply(this, arguments)
+ this.dialogService = useService('dialog')
+ },
+ onFileCamera(ev){
+ ev.stopPropagation()
+ this.dialogService.add(CameraDialog, {parent: this},);
+ }
+})
\ No newline at end of file
diff --git a/capture_image_field/static/src/xml/camera_dialog.xml b/capture_image_field/static/src/xml/camera_dialog.xml
new file mode 100644
index 000000000..27c5ab8e7
--- /dev/null
+++ b/capture_image_field/static/src/xml/camera_dialog.xml
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+