mirror of https://github.com/OCA/web.git
[MIG] web_widget_image_webcam: Migration to 16.0
emlafza
OCA-git-bot
parent
fceed2bfc0
commit
0752d33f03
|
|
@ -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,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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"/>'
|
||||
);
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue