diff --git a/web_widget_image_webcam/__manifest__.py b/web_widget_image_webcam/__manifest__.py
index 9cfe13c72..5cebbea8b 100644
--- a/web_widget_image_webcam/__manifest__.py
+++ b/web_widget_image_webcam/__manifest__.py
@@ -4,15 +4,21 @@
{
"name": "Web Widget - Image WebCam",
"summary": "Allows to take image with WebCam",
- "version": "14.0.1.0.1",
+ "version": "16.0.1.0.0",
"category": "web",
"website": "https://github.com/OCA/web",
"author": "Tech Receptives, "
"Kaushal Prajapati, "
"Odoo Community Association (OCA)",
"license": "LGPL-3",
- "data": ["views/assets.xml"],
"depends": ["web"],
- "qweb": ["static/src/xml/web_widget_image_webcam.xml"],
+ "assets": {
+ "web.assets_backend": [
+ "web_widget_image_webcam/static/src/lib/webcam.js",
+ "web_widget_image_webcam/static/src/js/webcam_widget.js",
+ "web_widget_image_webcam/static/src/css/web_widget_image_webcam.css",
+ "web_widget_image_webcam/static/src/xml/web_widget_image_webcam.xml",
+ ]
+ },
"installable": True,
}
diff --git a/web_widget_image_webcam/readme/CONFIGURE.rst b/web_widget_image_webcam/readme/CONFIGURE.rst
index bfcfc6cf5..6b665b476 100644
--- a/web_widget_image_webcam/readme/CONFIGURE.rst
+++ b/web_widget_image_webcam/readme/CONFIGURE.rst
@@ -8,6 +8,6 @@ Visit this for `more info
But, If you still want this module to work with websites without SSL / HTTPS.
Here is the steps to do it easily (Always run in Adobe Flash fallback mode, but it is not desirable).
-Set the configuration parameter ``web_widget_image_webcam.flash_fallback_mode`` to ``1``
+Set the configuration parameter ``web_widget_image_webcam.flash_fallback_mode`` to ``1`` (note that configuration will be applied after browser reload).
Its done! Now this module also work with websites without SSL / HTTPS.
diff --git a/web_widget_image_webcam/static/src/js/webcam_widget.js b/web_widget_image_webcam/static/src/js/webcam_widget.js
index 4d10ad36a..eba2f3134 100644
--- a/web_widget_image_webcam/static/src/js/webcam_widget.js
+++ b/web_widget_image_webcam/static/src/js/webcam_widget.js
@@ -9,19 +9,19 @@ odoo.define("web_widget_image_webcam.webcam_widget", function (require) {
var core = require("web.core");
var rpc = require("web.rpc");
var Dialog = require("web.Dialog");
- var FieldBinaryImage = require("web.basic_fields").FieldBinaryImage;
+ const {patch} = require("@web/core/utils/patch");
+ const {ImageField} = require("@web/views/fields/image/image_field");
var _t = core._t;
var QWeb = core.qweb;
- FieldBinaryImage.include({
- _render: function () {
- this._super();
-
- var self = this,
- WebCamDialog = $(QWeb.render("WebCamDialog")),
- img_data = false;
+ const getWebcamFlashFallbackModeConfig = rpc.query({
+ model: "ir.config_parameter",
+ method: "get_webcam_flash_fallback_mode_config",
+ });
+ patch(ImageField.prototype, "web_widget_image_webcam", {
+ async _setWebcamParams() {
// ::webcamjs:: < https://github.com/jhuckaby/webcamjs >
// Webcam: Set Custom Parameters
Webcam.set({
@@ -31,107 +31,94 @@ odoo.define("web_widget_image_webcam.webcam_widget", function (require) {
dest_height: 240,
image_format: "jpeg",
jpeg_quality: 90,
- force_flash: false,
+ force_flash: (await getWebcamFlashFallbackModeConfig) === "1",
fps: 45,
swfURL: "/web_widget_image_webcam/static/src/lib/webcam.swf",
});
+ },
- rpc.query({
- model: "ir.config_parameter",
- method: "get_webcam_flash_fallback_mode_config",
- }).then(function (default_flash_fallback_mode) {
- if (default_flash_fallback_mode === 1) {
- Webcam.set({
- /*
- :: Important Note about Chrome 47+ :: < https://github.com/jhuckaby/webcamjs#important-note-for-chrome-47 >
- Setting "force_flash" to "true" will always run in Adobe Flash fallback mode on Chrome, but it is not desirable.
- */
- force_flash: true,
- });
- }
+ onWebcamClicked() {
+ var self = this,
+ WebCamDialog = $(QWeb.render("WebCamDialog")),
+ img_data = false;
+
+ self._setWebcamParams();
+
+ var dialog = new Dialog(self, {
+ size: "large",
+ dialogClass: "o_act_window",
+ title: _t("WebCam Booth"),
+ $content: WebCamDialog,
+ buttons: [
+ {
+ text: _t("Take Snapshot"),
+ classes: "btn-primary take_snap_btn",
+ click: function () {
+ Webcam.snap(function (data) {
+ img_data = data;
+ // Display Snap besides Live WebCam Preview
+ WebCamDialog.find("#webcam_result").html(
+ '<img src="' + img_data + '"/>'
+ );
+ });
+ if (Webcam.live) {
+ // Remove "disabled" attr from "Save & Close" button
+ $(".save_close_btn").removeAttr("disabled");
+ }
+ },
+ },
+ {
+ text: _t("Save & Close"),
+ classes: "btn-primary save_close_btn",
+ close: true,
+ click: function () {
+ var img_data_base64 = img_data.split(",")[1];
+
+ /*
+ Size in base64 is approx 33% overhead the original data size.
+
+ Source: -> http://stackoverflow.com/questions/11402329/base64-encoded-image-size
+ -> http://stackoverflow.com/questions/6793575/estimating-the-size-of-binary-data-encoded-as-a-b64-string-in-python
+
+ -> https://en.wikipedia.org/wiki/Base64
+ [ The ratio of output bytes to input bytes is 4:3 (33% overhead).
+ Specifically, given an input of n bytes, the output will be "4[n/3]" bytes long in base64,
+ including padding characters. ]
+ */
+
+ // From the above info, we doing the opposite stuff to find the approx size of Image in bytes.
+ var approx_img_size =
+ 3 * (img_data_base64.length / 4) -
+ (img_data_base64.match(/[=]+$/g) || []).length;
+ // Like... "3[n/4]"
+
+ // Upload image in Binary Field
+ self.onFileUploaded({
+ size: approx_img_size,
+ name: "web-cam-preview.jpeg",
+ type: "image/jpeg",
+ data: img_data_base64,
+ });
+ },
+ },
+ {
+ text: _t("Close"),
+ close: true,
+ },
+ ],
+ }).open();
+
+ dialog.opened().then(function () {
+ Webcam.attach("#live_webcam");
+
+ // At time of Init "Save & Close" button is disabled
+ $(".save_close_btn").attr("disabled", "disabled");
+
+ // Placeholder Image in the div "webcam_result"
+ WebCamDialog.find("#webcam_result").html(
+ '<img src="/web_widget_image_webcam/static/src/img/webcam_placeholder.png"/>'
+ );
});
-
- self.$el
- .find(".o_form_binary_file_web_cam")
- .off()
- .on("click", function () {
- // Init Webcam
- var dialog = new Dialog(self, {
- size: "large",
- dialogClass: "o_act_window",
- title: _t("WebCam Booth"),
- $content: WebCamDialog,
- buttons: [
- {
- text: _t("Take Snapshot"),
- classes: "btn-primary take_snap_btn",
- click: function () {
- Webcam.snap(function (data) {
- img_data = data;
- // Display Snap besides Live WebCam Preview
- WebCamDialog.find("#webcam_result").html(
- '<img src="' + img_data + '"/>'
- );
- });
- if (Webcam.live) {
- // Remove "disabled" attr from "Save & Close" button
- $(".save_close_btn").removeAttr("disabled");
- }
- },
- },
- {
- text: _t("Save & Close"),
- classes: "btn-primary save_close_btn",
- close: true,
- click: function () {
- var img_data_base64 = img_data.split(",")[1];
-
- /*
- Size in base64 is approx 33% overhead the original data size.
-
- Source: -> http://stackoverflow.com/questions/11402329/base64-encoded-image-size
- -> http://stackoverflow.com/questions/6793575/estimating-the-size-of-binary-data-encoded-as-a-b64-string-in-python
-
- -> https://en.wikipedia.org/wiki/Base64
- [ The ratio of output bytes to input bytes is 4:3 (33% overhead).
- Specifically, given an input of n bytes, the output will be "4[n/3]" bytes long in base64,
- including padding characters. ]
- */
-
- // From the above info, we doing the opposite stuff to find the approx size of Image in bytes.
- var approx_img_size =
- 3 * (img_data_base64.length / 4) -
- (img_data_base64.match(/[=]+$/g) || []).length;
- // Like... "3[n/4]"
-
- // Upload image in Binary Field
- self.on_file_uploaded(
- approx_img_size,
- "web-cam-preview.jpeg",
- "image/jpeg",
- img_data_base64
- );
- },
- },
- {
- text: _t("Close"),
- close: true,
- },
- ],
- }).open();
-
- dialog.opened().then(function () {
- Webcam.attach("#live_webcam");
-
- // At time of Init "Save & Close" button is disabled
- $(".save_close_btn").attr("disabled", "disabled");
-
- // Placeholder Image in the div "webcam_result"
- WebCamDialog.find("#webcam_result").html(
- '<img src="/web_widget_image_webcam/static/src/img/webcam_placeholder.png"/>'
- );
- });
- });
},
});
diff --git a/web_widget_image_webcam/static/src/xml/web_widget_image_webcam.xml b/web_widget_image_webcam/static/src/xml/web_widget_image_webcam.xml
index 05116942d..7240073f5 100644
--- a/web_widget_image_webcam/static/src/xml/web_widget_image_webcam.xml
+++ b/web_widget_image_webcam/static/src/xml/web_widget_image_webcam.xml
@@ -2,11 +2,22 @@
<!-- Copyright 2016 Siddharth Bhalgami <siddharth.bhalgami@gmail.com>
Copyright 2019-Today: Druidoo (<https://www.druidoo.io>)
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
-<template id="template" xml:space="preserve">
- <t t-extend="FieldBinaryImage">
- <t t-jquery=".o_select_file_button" t-operation="after">
- <span class="fa fa-eye o_form_binary_file_web_cam" title="WebCam" />
- </t>
+<template>
+ <t
+ t-name="web_widget_image_webcam.ImageField"
+ t-inherit="web.ImageField"
+ t-inherit-mode="extension"
+ owl="1"
+ >
+ <xpath expr="//button[hasclass('o_clear_file_button')]" position="before">
+ <button
+ class="o_form_binary_file_web_cam btn btn-light border-0 rounded-circle m-1 p-1"
+ data-tooltip="WebCam"
+ aria-label="WebCam"
+ >
+ <i class="fa fa-eye" t-on-click="onWebcamClicked" />
+ </button>
+ </xpath>
</t>
<div t-name="WebCamDialog" id="WebCamModal">
<div class="container-fluid">
diff --git a/web_widget_image_webcam/views/assets.xml b/web_widget_image_webcam/views/assets.xml
deleted file mode 100644
index ce1cbe29f..000000000
--- a/web_widget_image_webcam/views/assets.xml
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="utf-8" ?>
-<!-- Copyright 2016 Siddharth Bhalgami <siddharth.bhalgami@gmail.com>
- License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
-<odoo>
- <template id="assets_backend" inherit_id="web.assets_backend">
- <xpath expr=".">
- <script
- type="text/javascript"
- src="/web_widget_image_webcam/static/src/lib/webcam.js"
- />
- <script
- type="text/javascript"
- src="/web_widget_image_webcam/static/src/js/webcam_widget.js"
- />
- <link
- rel="stylesheet"
- href="/web_widget_image_webcam/static/src/css/web_widget_image_webcam.css"
- />
- </xpath>
- </template>
-</odoo>