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::
:alt: License: LGPL-3
Web Widget - Image WebCam
This module extends the functionality of the image widget and allows to take snapshots with WebCam.
By default, the module works with all `major browsers
An important note for **Chrome 47+** users - this module only works with websites delivered over SSL / HTTPS.
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``
Its done! Now this module also work with websites without SSL / HTTPS.
To use this module, you need to:
#. Go to ...
.. image::
:alt: Try me on Runbot
Bug Tracker
Bugs are tracked on `GitHub 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.
* Siddharth Bhalgami <>
.. image::
:alt: Odoo Community Association
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
# -*- coding: utf-8 -*-
# Copyright 2016 Siddharth Bhalgami <>
# License LGPL-3.0 or later (
"name": "Web Widget - Image WebCam",
"summary": "Allows to take image with WebCam",
"version": "",
"category": "web",
"website": "",
"author": "Tech Receptives, "
"Odoo Community Association (OCA)",
"license": "LGPL-3",
"data": [
"depends": [
"qweb": [
"installable": True,
Copyright 2016 Siddharth Bhalgami <>
License LGPL-3.0 or later (
.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 <>
License LGPL-3.0 or later (
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;
render_value: function () {
var self = this,
WebCamDialog = $(QWeb.render("WebCamDialog")),
// ::webcamjs:: < >
// Webcam: Set Custom Parameters
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',
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) {
:: Important Note about 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
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: ->
[ 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
// 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"/>');
destroy: function () {
// Shut Down the Live Camera Preview | Reset the System
this._super.apply(this, arguments);
<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright 2016 Siddharth Bhalgami <>
License LGPL-3.0 or later ( -->
<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>
<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 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>
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2016 Siddharth Bhalgami <>
License LGPL-3.0 or later ( -->
<template id="assets_backend" inherit_id="web.assets_backend">
<xpath expr=".">
<script type="text/javascript"
<link rel="stylesheet"
<script type="text/javascript"
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