Commit 935b5841 authored by Siddharth Bhalgami's avatar Siddharth Bhalgami Committed by smurf-U
Browse files

[NEW] web_widget_image_webcam: New Module that allows to take image with webcam

parent 4d88189c
.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg
:target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
:alt: License: LGPL-3
=========================
Web Widget - Image WebCam
=========================
This module extends the functionality of the image widget and allows to take snapshots with WebCam.
Configuration
=============
By default, the module works with all `major browsers
<https://github.com/jhuckaby/webcamjs#browser-support>`_.
An important note for **Chrome 47+** users - this module only works with websites delivered over SSL / HTTPS.
Visit this for `more info
<https://github.com/jhuckaby/webcamjs#important-note-for-chrome-47>`_.
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``
Its done! Now this module also work with websites without SSL / HTTPS.
Usage
=====
To use this module, you need to:
#. Go to ...
.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
:alt: Try me on Runbot
:target: https://runbot.odoo-community.org/runbot/162/9.0
Bug Tracker
===========
Bugs are tracked on `GitHub Issues
<https://github.com/OCA/web/issues>`_. In case of trouble, please
check there if your issue has already been reported. If you spotted it first,
help us smashing it by providing a detailed and welcomed feedback.
Credits
=======
Contributors
------------
* Siddharth Bhalgami <siddharth.bhalgami@techreceptives.com>
Maintainer
----------
.. image:: https://odoo-community.org/logo.png
:alt: Odoo Community Association
:target: https://odoo-community.org
This module is maintained by the OCA.
OCA, or the Odoo Community Association, is a nonprofit organization whose
mission is to support the collaborative development of Odoo features and
promote its widespread use.
To contribute to this module, please visit https://odoo-community.org.
# -*- coding: utf-8 -*-
# Copyright 2016 Siddharth Bhalgami <siddharth.bhalgami@techreceptives.com>
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
{
"name": "Web Widget - Image WebCam",
"summary": "Allows to take image with WebCam",
"version": "9.0.1.0.0",
"category": "web",
"website": "https://www.techreceptives.com",
"author": "Tech Receptives, "
"Odoo Community Association (OCA)",
"license": "LGPL-3",
"data": [
"views/assets.xml",
],
"depends": [
"web",
],
"qweb": [
"static/src/xml/web_widget_image_webcam.xml",
],
"installable": True,
}
/*
Copyright 2016 Siddharth Bhalgami <siddharth.bhalgami@techreceptives.com>
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
*/
.openerp .oe_form .oe_form_field_image .oe_form_field_image_controls
.oe_form_binary_file_web_cam {
color: inherit;
}
.live_webcam_outer_div, .webcam_result_outer_div {
padding-left: 20px;
}
#webcam_result img {
max-width: 320px;
max-height: 240px;
}
#live_webcam {
width: 320px;
height: 240px;
}
.direction_icon {
text-align: center;
}
This diff is collapsed.
/*
Copyright 2016 Siddharth Bhalgami <siddharth.bhalgami@techreceptives.com>
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl).
*/
odoo.define('web_widget_image_webcam.webcam_widget', function(require) {
"use strict";
var core = require('web.core');
var Model = require('web.Model');
var Dialog = require('web.Dialog');
var _t = core._t;
var QWeb = core.qweb;
core.form_widget_registry.get("image").include({
render_value: function () {
this._super();
var self = this,
WebCamDialog = $(QWeb.render("WebCamDialog")),
img_data;
// ::webcamjs:: < https://github.com/jhuckaby/webcamjs >
// Webcam: Set Custom Parameters
Webcam.set({
width: 320,
height: 240,
dest_width: 320,
dest_height: 240,
image_format: 'jpeg',
jpeg_quality: 90,
force_flash: false,
fps: 45,
swfURL: '/web_widget_image_webcam/static/src/js/webcam.swf',
});
self.$el.find('.oe_form_binary_file_clear').removeClass('col-md-offset-5');
new Model('ir.config_parameter').call('get_param', ['web_widget_image_webcam.flash_fallback_mode', false]).
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,
});
}
});
self.$el.find('.oe_form_binary_file_web_cam').off().on('click', function(){
// Init Webcam
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+'"/>');
});
// 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) // 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();
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"/>');
});
},
});
Dialog.include({
destroy: function () {
// Shut Down the Live Camera Preview | Reset the System
Webcam.reset();
this._super.apply(this, arguments);
},
});
});
<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright 2016 Siddharth Bhalgami <siddharth.bhalgami@techreceptives.com>
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=".oe_form_binary_file_edit" t-operation="after">
<a class="fa fa-eye fa-1g col-md-4 oe_form_binary_file_web_cam" title="WebCam"></a>
</t>
</t>
<div t-name="WebCamDialog" id="WebCamModal">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="col-md-5 live_webcam_outer_div">
<div id="live_webcam"></div>
</div>
<div class="col-md-2 mt64 direction_icon fa fa-angle-right fa-8x"></div>
<div class="col-md-5 webcam_result_outer_div">
<div id="webcam_result"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2016 Siddharth Bhalgami <siddharth.bhalgami@techreceptives.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/js/webcam.js"/>
<link rel="stylesheet"
href="/web_widget_image_webcam/static/src/css/web_widget_image_webcam.css"/>
<script type="text/javascript"
src="/web_widget_image_webcam/static/src/js/webcam_widget.js"/>
</xpath>
</template>
</odoo>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment