diff --git a/web_widget_image_webcam/README.rst b/web_widget_image_webcam/README.rst new file mode 100644 index 00000000..66c63878 --- /dev/null +++ b/web_widget_image_webcam/README.rst @@ -0,0 +1,68 @@ +.. 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 +`_. + +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. + +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 +`_. 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 + +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. diff --git a/web_widget_image_webcam/__init__.py b/web_widget_image_webcam/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/web_widget_image_webcam/__openerp__.py b/web_widget_image_webcam/__openerp__.py new file mode 100644 index 00000000..1149b470 --- /dev/null +++ b/web_widget_image_webcam/__openerp__.py @@ -0,0 +1,23 @@ +# -*- coding: utf-8 -*- +# Copyright 2016 Siddharth Bhalgami +# 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, +} diff --git a/web_widget_image_webcam/static/description/icon.png b/web_widget_image_webcam/static/description/icon.png new file mode 100644 index 00000000..72699c51 Binary files /dev/null and b/web_widget_image_webcam/static/description/icon.png differ diff --git a/web_widget_image_webcam/static/src/css/web_widget_image_webcam.css b/web_widget_image_webcam/static/src/css/web_widget_image_webcam.css new file mode 100644 index 00000000..20e95c4f --- /dev/null +++ b/web_widget_image_webcam/static/src/css/web_widget_image_webcam.css @@ -0,0 +1,26 @@ +/* + Copyright 2016 Siddharth Bhalgami + 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; +} diff --git a/web_widget_image_webcam/static/src/img/webcam_placeholder.png b/web_widget_image_webcam/static/src/img/webcam_placeholder.png new file mode 100644 index 00000000..55776d04 Binary files /dev/null and b/web_widget_image_webcam/static/src/img/webcam_placeholder.png differ diff --git a/web_widget_image_webcam/static/src/js/webcam.js b/web_widget_image_webcam/static/src/js/webcam.js new file mode 100644 index 00000000..3edd3250 --- /dev/null +++ b/web_widget_image_webcam/static/src/js/webcam.js @@ -0,0 +1,718 @@ +// WebcamJS v1.0.6 +// Webcam library for capturing JPEG/PNG images in JavaScript +// Attempts getUserMedia, falls back to Flash +// Author: Joseph Huckaby: http://github.com/jhuckaby +// Based on JPEGCam: http://code.google.com/p/jpegcam/ +// Copyright (c) 2012 - 2015 Joseph Huckaby +// Licensed under the MIT License + +(function(window) { + +var Webcam = { + version: '1.0.6', + + // globals + protocol: location.protocol.match(/https/i) ? 'https' : 'http', + swfURL: '', // URI to webcam.swf movie (defaults to the js location) + loaded: false, // true when webcam movie finishes loading + live: false, // true when webcam is initialized and ready to snap + userMedia: true, // true when getUserMedia is supported natively + + params: { + width: 0, + height: 0, + dest_width: 0, // size of captured image + dest_height: 0, // these default to width/height + image_format: 'jpeg', // image format (may be jpeg or png) + jpeg_quality: 90, // jpeg image quality from 0 (worst) to 100 (best) + force_flash: false, // force flash mode, + flip_horiz: false, // flip image horiz (mirror mode) + fps: 30, // camera frames per second + upload_name: 'webcam', // name of file in upload post data + constraints: null // custom user media constraints + }, + + hooks: {}, // callback hook functions + + init: function() { + // initialize, check for getUserMedia support + var self = this; + + // Setup getUserMedia, with polyfill for older browsers + // Adapted from: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia + this.mediaDevices = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ? + navigator.mediaDevices : ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? { + getUserMedia: function(c) { + return new Promise(function(y, n) { + (navigator.mozGetUserMedia || + navigator.webkitGetUserMedia).call(navigator, c, y, n); + }); + } + } : null); + + window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; + this.userMedia = this.userMedia && !!this.mediaDevices && !!window.URL; + + // Older versions of firefox (< 21) apparently claim support but user media does not actually work + if (navigator.userAgent.match(/Firefox\D+(\d+)/)) { + if (parseInt(RegExp.$1, 10) < 21) this.userMedia = null; + } + + // Make sure media stream is closed when navigating away from page + if (this.userMedia) { + window.addEventListener( 'beforeunload', function(event) { + self.reset(); + } ); + } + }, + + attach: function(elem) { + // create webcam preview and attach to DOM element + // pass in actual DOM reference, ID, or CSS selector + if (typeof(elem) == 'string') { + elem = document.getElementById(elem) || document.querySelector(elem); + } + if (!elem) { + return this.dispatch('error', "Could not locate DOM element to attach to."); + } + this.container = elem; + elem.innerHTML = ''; // start with empty element + + // insert "peg" so we can insert our preview canvas adjacent to it later on + var peg = document.createElement('div'); + elem.appendChild( peg ); + this.peg = peg; + + // set width/height if not already set + if (!this.params.width) this.params.width = elem.offsetWidth; + if (!this.params.height) this.params.height = elem.offsetHeight; + + // set defaults for dest_width / dest_height if not set + if (!this.params.dest_width) this.params.dest_width = this.params.width; + if (!this.params.dest_height) this.params.dest_height = this.params.height; + + // if force_flash is set, disable userMedia + if (this.params.force_flash) this.userMedia = null; + + // check for default fps + if (typeof this.params.fps !== "number") this.params.fps = 30; + + // adjust scale if dest_width or dest_height is different + var scaleX = this.params.width / this.params.dest_width; + var scaleY = this.params.height / this.params.dest_height; + + if (this.userMedia) { + // setup webcam video container + var video = document.createElement('video'); + video.setAttribute('autoplay', 'autoplay'); + video.style.width = '' + this.params.dest_width + 'px'; + video.style.height = '' + this.params.dest_height + 'px'; + + if ((scaleX != 1.0) || (scaleY != 1.0)) { + elem.style.overflow = 'hidden'; + video.style.webkitTransformOrigin = '0px 0px'; + video.style.mozTransformOrigin = '0px 0px'; + video.style.msTransformOrigin = '0px 0px'; + video.style.oTransformOrigin = '0px 0px'; + video.style.transformOrigin = '0px 0px'; + video.style.webkitTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + video.style.mozTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + video.style.msTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + video.style.oTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + video.style.transform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + } + + // add video element to dom + elem.appendChild( video ); + this.video = video; + + // ask user for access to their camera + var self = this; + this.mediaDevices.getUserMedia({ + "audio": false, + "video": this.params.constraints || { + mandatory: { + minWidth: this.params.dest_width, + minHeight: this.params.dest_height + } + } + }) + .then( function(stream) { + // got access, attach stream to video + video.src = window.URL.createObjectURL( stream ) || stream; + self.stream = stream; + self.loaded = true; + self.live = true; + self.dispatch('load'); + self.dispatch('live'); + self.flip(); + }) + .catch( function(err) { + return self.dispatch('error', "Could not access webcam: " + err.name + ": " + err.message, err); + }); + } + else { + // flash fallback + window.Webcam = Webcam; // needed for flash-to-js interface + var div = document.createElement('div'); + div.innerHTML = this.getSWFHTML(); + elem.appendChild( div ); + } + + // setup final crop for live preview + if (this.params.crop_width && this.params.crop_height) { + var scaled_crop_width = Math.floor( this.params.crop_width * scaleX ); + var scaled_crop_height = Math.floor( this.params.crop_height * scaleY ); + + elem.style.width = '' + scaled_crop_width + 'px'; + elem.style.height = '' + scaled_crop_height + 'px'; + elem.style.overflow = 'hidden'; + + elem.scrollLeft = Math.floor( (this.params.width / 2) - (scaled_crop_width / 2) ); + elem.scrollTop = Math.floor( (this.params.height / 2) - (scaled_crop_height / 2) ); + } + else { + // no crop, set size to desired + elem.style.width = '' + this.params.width + 'px'; + elem.style.height = '' + this.params.height + 'px'; + } + }, + + reset: function() { + // shutdown camera, reset to potentially attach again + if (this.preview_active) this.unfreeze(); + + // attempt to fix issue #64 + this.unflip(); + + if (this.userMedia) { + if (this.stream) { + if (this.stream.getVideoTracks) { + // get video track to call stop on it + var tracks = this.stream.getVideoTracks(); + if (tracks && tracks[0] && tracks[0].stop) tracks[0].stop(); + } + else if (this.stream.stop) { + // deprecated, may be removed in future + this.stream.stop(); + } + } + delete this.stream; + delete this.video; + } + + if (this.container) { + this.container.innerHTML = ''; + delete this.container; + } + + this.loaded = false; + this.live = false; + }, + + set: function() { + // set one or more params + // variable argument list: 1 param = hash, 2 params = key, value + if (arguments.length == 1) { + for (var key in arguments[0]) { + this.params[key] = arguments[0][key]; + } + } + else { + this.params[ arguments[0] ] = arguments[1]; + } + }, + + on: function(name, callback) { + // set callback hook + name = name.replace(/^on/i, '').toLowerCase(); + if (!this.hooks[name]) this.hooks[name] = []; + this.hooks[name].push( callback ); + }, + + off: function(name, callback) { + // remove callback hook + name = name.replace(/^on/i, '').toLowerCase(); + if (this.hooks[name]) { + if (callback) { + // remove one selected callback from list + var idx = this.hooks[name].indexOf(callback); + if (idx > -1) this.hooks[name].splice(idx, 1); + } + else { + // no callback specified, so clear all + this.hooks[name] = []; + } + } + }, + + dispatch: function() { + // fire hook callback, passing optional value to it + var name = arguments[0].replace(/^on/i, '').toLowerCase(); + var args = Array.prototype.slice.call(arguments, 1); + + if (this.hooks[name] && this.hooks[name].length) { + for (var idx = 0, len = this.hooks[name].length; idx < len; idx++) { + var hook = this.hooks[name][idx]; + + if (typeof(hook) == 'function') { + // callback is function reference, call directly + hook.apply(this, args); + } + else if ((typeof(hook) == 'object') && (hook.length == 2)) { + // callback is PHP-style object instance method + hook[0][hook[1]].apply(hook[0], args); + } + else if (window[hook]) { + // callback is global function name + window[ hook ].apply(window, args); + } + } // loop + return true; + } + else if (name == 'error') { + // default error handler if no custom one specified + alert("Webcam.js Error: " + args[0]); + } + + return false; // no hook defined + }, + + setSWFLocation: function(url) { + // set location of SWF movie (defaults to webcam.swf in cwd) + this.swfURL = url; + }, + + detectFlash: function() { + // return true if browser supports flash, false otherwise + // Code snippet borrowed from: https://github.com/swfobject/swfobject + var SHOCKWAVE_FLASH = "Shockwave Flash", + SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash", + FLASH_MIME_TYPE = "application/x-shockwave-flash", + win = window, + nav = navigator, + hasFlash = false; + + if (typeof nav.plugins !== "undefined" && typeof nav.plugins[SHOCKWAVE_FLASH] === "object") { + var desc = nav.plugins[SHOCKWAVE_FLASH].description; + if (desc && (typeof nav.mimeTypes !== "undefined" && nav.mimeTypes[FLASH_MIME_TYPE] && nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) { + hasFlash = true; + } + } + else if (typeof win.ActiveXObject !== "undefined") { + try { + var ax = new ActiveXObject(SHOCKWAVE_FLASH_AX); + if (ax) { + var ver = ax.GetVariable("$version"); + if (ver) hasFlash = true; + } + } + catch (e) {;} + } + + return hasFlash; + }, + + getSWFHTML: function() { + // Return HTML for embedding flash based webcam capture movie + var html = ''; + + // make sure we aren't running locally (flash doesn't work) + if (location.protocol.match(/file/)) { + this.dispatch('error', "Flash does not work from local disk. Please run from a web server."); + return '

ERROR: the Webcam.js Flash fallback does not work from local disk. Please run it from a web server.

'; + } + + // make sure we have flash + if (!this.detectFlash()) { + this.dispatch('error', "Adobe Flash Player not found. Please install from get.adobe.com/flashplayer and try again."); + return '

ERROR: No Adobe Flash Player detected. Webcam.js relies on Flash for browsers that do not support getUserMedia (like yours).

'; + } + + // set default swfURL if not explicitly set + if (!this.swfURL) { + // find our script tag, and use that base URL + var base_url = ''; + var scpts = document.getElementsByTagName('script'); + for (var idx = 0, len = scpts.length; idx < len; idx++) { + var src = scpts[idx].getAttribute('src'); + if (src && src.match(/\/webcam(\.min)?\.js/)) { + base_url = src.replace(/\/webcam(\.min)?\.js.*$/, ''); + idx = len; + } + } + if (base_url) this.swfURL = base_url + '/webcam.swf'; + else this.swfURL = 'webcam.swf'; + } + + // if this is the user's first visit, set flashvar so flash privacy settings panel is shown first + if (window.localStorage && !localStorage.getItem('visited')) { + this.params.new_user = 1; + localStorage.setItem('visited', 1); + } + + // construct flashvars string + var flashvars = ''; + for (var key in this.params) { + if (flashvars) flashvars += '&'; + flashvars += key + '=' + escape(this.params[key]); + } + + // construct object/embed tag + html += ''; + + return html; + }, + + getMovie: function() { + // get reference to movie object/embed in DOM + if (!this.loaded) return this.dispatch('error', "Flash Movie is not loaded yet"); + var movie = document.getElementById('webcam_movie_obj'); + if (!movie || !movie._snap) movie = document.getElementById('webcam_movie_embed'); + if (!movie) this.dispatch('error', "Cannot locate Flash movie in DOM"); + return movie; + }, + + freeze: function() { + // show preview, freeze camera + var self = this; + var params = this.params; + + // kill preview if already active + if (this.preview_active) this.unfreeze(); + + // determine scale factor + var scaleX = this.params.width / this.params.dest_width; + var scaleY = this.params.height / this.params.dest_height; + + // must unflip container as preview canvas will be pre-flipped + this.unflip(); + + // calc final size of image + var final_width = params.crop_width || params.dest_width; + var final_height = params.crop_height || params.dest_height; + + // create canvas for holding preview + var preview_canvas = document.createElement('canvas'); + preview_canvas.width = final_width; + preview_canvas.height = final_height; + var preview_context = preview_canvas.getContext('2d'); + + // save for later use + this.preview_canvas = preview_canvas; + this.preview_context = preview_context; + + // scale for preview size + if ((scaleX != 1.0) || (scaleY != 1.0)) { + preview_canvas.style.webkitTransformOrigin = '0px 0px'; + preview_canvas.style.mozTransformOrigin = '0px 0px'; + preview_canvas.style.msTransformOrigin = '0px 0px'; + preview_canvas.style.oTransformOrigin = '0px 0px'; + preview_canvas.style.transformOrigin = '0px 0px'; + preview_canvas.style.webkitTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + preview_canvas.style.mozTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + preview_canvas.style.msTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + preview_canvas.style.oTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + preview_canvas.style.transform = 'scaleX('+scaleX+') scaleY('+scaleY+')'; + } + + // take snapshot, but fire our own callback + this.snap( function() { + // add preview image to dom, adjust for crop + preview_canvas.style.position = 'relative'; + preview_canvas.style.left = '' + self.container.scrollLeft + 'px'; + preview_canvas.style.top = '' + self.container.scrollTop + 'px'; + + self.container.insertBefore( preview_canvas, self.peg ); + self.container.style.overflow = 'hidden'; + + // set flag for user capture (use preview) + self.preview_active = true; + + }, preview_canvas ); + }, + + unfreeze: function() { + // cancel preview and resume live video feed + if (this.preview_active) { + // remove preview canvas + this.container.removeChild( this.preview_canvas ); + delete this.preview_context; + delete this.preview_canvas; + + // unflag + this.preview_active = false; + + // re-flip if we unflipped before + this.flip(); + } + }, + + flip: function() { + // flip container horiz (mirror mode) if desired + if (this.params.flip_horiz) { + var sty = this.container.style; + sty.webkitTransform = 'scaleX(-1)'; + sty.mozTransform = 'scaleX(-1)'; + sty.msTransform = 'scaleX(-1)'; + sty.oTransform = 'scaleX(-1)'; + sty.transform = 'scaleX(-1)'; + sty.filter = 'FlipH'; + sty.msFilter = 'FlipH'; + } + }, + + unflip: function() { + // unflip container horiz (mirror mode) if desired + if (this.params.flip_horiz) { + var sty = this.container.style; + sty.webkitTransform = 'scaleX(1)'; + sty.mozTransform = 'scaleX(1)'; + sty.msTransform = 'scaleX(1)'; + sty.oTransform = 'scaleX(1)'; + sty.transform = 'scaleX(1)'; + sty.filter = ''; + sty.msFilter = ''; + } + }, + + savePreview: function(user_callback, user_canvas) { + // save preview freeze and fire user callback + var params = this.params; + var canvas = this.preview_canvas; + var context = this.preview_context; + + // render to user canvas if desired + if (user_canvas) { + var user_context = user_canvas.getContext('2d'); + user_context.drawImage( canvas, 0, 0 ); + } + + // fire user callback if desired + user_callback( + user_canvas ? null : canvas.toDataURL('image/' + params.image_format, params.jpeg_quality / 100 ), + canvas, + context + ); + + // remove preview + this.unfreeze(); + }, + + snap: function(user_callback, user_canvas) { + // take snapshot and return image data uri + var self = this; + var params = this.params; + + if (!this.loaded) return this.dispatch('error', "Webcam is not loaded yet"); + // if (!this.live) return this.dispatch('error', "Webcam is not live yet"); + if (!user_callback) return this.dispatch('error', "Please provide a callback function or canvas to snap()"); + + // if we have an active preview freeze, use that + if (this.preview_active) { + this.savePreview( user_callback, user_canvas ); + return null; + } + + // create offscreen canvas element to hold pixels + var canvas = document.createElement('canvas'); + canvas.width = this.params.dest_width; + canvas.height = this.params.dest_height; + var context = canvas.getContext('2d'); + + // flip canvas horizontally if desired + if (this.params.flip_horiz) { + context.translate( params.dest_width, 0 ); + context.scale( -1, 1 ); + } + + // create inline function, called after image load (flash) or immediately (native) + var func = function() { + // render image if needed (flash) + if (this.src && this.width && this.height) { + context.drawImage(this, 0, 0, params.dest_width, params.dest_height); + } + + // crop if desired + if (params.crop_width && params.crop_height) { + var crop_canvas = document.createElement('canvas'); + crop_canvas.width = params.crop_width; + crop_canvas.height = params.crop_height; + var crop_context = crop_canvas.getContext('2d'); + + crop_context.drawImage( canvas, + Math.floor( (params.dest_width / 2) - (params.crop_width / 2) ), + Math.floor( (params.dest_height / 2) - (params.crop_height / 2) ), + params.crop_width, + params.crop_height, + 0, + 0, + params.crop_width, + params.crop_height + ); + + // swap canvases + context = crop_context; + canvas = crop_canvas; + } + + // render to user canvas if desired + if (user_canvas) { + var user_context = user_canvas.getContext('2d'); + user_context.drawImage( canvas, 0, 0 ); + } + + // fire user callback if desired + user_callback( + user_canvas ? null : canvas.toDataURL('image/' + params.image_format, params.jpeg_quality / 100 ), + canvas, + context + ); + }; + + // grab image frame from userMedia or flash movie + if (this.userMedia) { + // native implementation + context.drawImage(this.video, 0, 0, this.params.dest_width, this.params.dest_height); + + // fire callback right away + func(); + } + else { + // flash fallback + var raw_data = this.getMovie()._snap(); + + // render to image, fire callback when complete + var img = new Image(); + img.onload = func; + img.src = 'data:image/'+this.params.image_format+';base64,' + raw_data; + } + + return null; + }, + + configure: function(panel) { + // open flash configuration panel -- specify tab name: + // "camera", "privacy", "default", "localStorage", "microphone", "settingsManager" + if (!panel) panel = "camera"; + this.getMovie()._configure(panel); + }, + + flashNotify: function(type, msg) { + // receive notification from flash about event + switch (type) { + case 'flashLoadComplete': + // movie loaded successfully + this.loaded = true; + this.dispatch('load'); + break; + + case 'cameraLive': + // camera is live and ready to snap + this.live = true; + this.dispatch('live'); + this.flip(); + break; + + case 'error': + // Flash error + this.dispatch('error', msg); + break; + + default: + // catch-all event, just in case + // console.log("webcam flash_notify: " + type + ": " + msg); + break; + } + }, + + b64ToUint6: function(nChr) { + // convert base64 encoded character to 6-bit integer + // from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding + return nChr > 64 && nChr < 91 ? nChr - 65 + : nChr > 96 && nChr < 123 ? nChr - 71 + : nChr > 47 && nChr < 58 ? nChr + 4 + : nChr === 43 ? 62 : nChr === 47 ? 63 : 0; + }, + + base64DecToArr: function(sBase64, nBlocksSize) { + // convert base64 encoded string to Uintarray + // from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding + var sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, + nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, + taBytes = new Uint8Array(nOutLen); + + for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { + nMod4 = nInIdx & 3; + nUint24 |= this.b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; + if (nMod4 === 3 || nInLen - nInIdx === 1) { + for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { + taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; + } + nUint24 = 0; + } + } + return taBytes; + }, + + upload: function(image_data_uri, target_url, callback) { + // submit image data to server using binary AJAX + var form_elem_name = this.params.upload_name || 'webcam'; + + // detect image format from within image_data_uri + var image_fmt = ''; + if (image_data_uri.match(/^data\:image\/(\w+)/)) + image_fmt = RegExp.$1; + else + throw "Cannot locate image format in Data URI"; + + // extract raw base64 data from Data URI + var raw_image_data = image_data_uri.replace(/^data\:image\/\w+\;base64\,/, ''); + + // contruct use AJAX object + var http = new XMLHttpRequest(); + http.open("POST", target_url, true); + + // setup progress events + if (http.upload && http.upload.addEventListener) { + http.upload.addEventListener( 'progress', function(e) { + if (e.lengthComputable) { + var progress = e.loaded / e.total; + Webcam.dispatch('uploadProgress', progress, e); + } + }, false ); + } + + // completion handler + var self = this; + http.onload = function() { + if (callback) callback.apply( self, [http.status, http.responseText, http.statusText] ); + Webcam.dispatch('uploadComplete', http.status, http.responseText, http.statusText); + }; + + // create a blob and decode our base64 to binary + var blob = new Blob( [ this.base64DecToArr(raw_image_data) ], {type: 'image/'+image_fmt} ); + + // stuff into a form, so servers can easily receive it as a standard file upload + var form = new FormData(); + form.append( form_elem_name, blob, form_elem_name+"."+image_fmt.replace(/e/, '') ); + + // send data to server + http.send(form); + } + +}; + +Webcam.init(); + +if (typeof define === 'function' && define.amd) { + define( function() { return Webcam; } ); +} +else if (typeof module === 'object' && module.exports) { + module.exports = Webcam; +} +else { + window.Webcam = Webcam; +} + +}(window)); diff --git a/web_widget_image_webcam/static/src/js/webcam.swf b/web_widget_image_webcam/static/src/js/webcam.swf new file mode 100644 index 00000000..1e19c9de Binary files /dev/null and b/web_widget_image_webcam/static/src/js/webcam.swf differ diff --git a/web_widget_image_webcam/static/src/js/webcam_widget.js b/web_widget_image_webcam/static/src/js/webcam_widget.js new file mode 100644 index 00000000..c11139b5 --- /dev/null +++ b/web_widget_image_webcam/static/src/js/webcam_widget.js @@ -0,0 +1,122 @@ +/* + Copyright 2016 Siddharth Bhalgami + 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(''); + }); + // 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(''); + }); + }, + }); + + Dialog.include({ + destroy: function () { + // Shut Down the Live Camera Preview | Reset the System + Webcam.reset(); + this._super.apply(this, arguments); + }, + }); + +}); 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 new file mode 100644 index 00000000..1f4297b4 --- /dev/null +++ b/web_widget_image_webcam/static/src/xml/web_widget_image_webcam.xml @@ -0,0 +1,28 @@ + + + diff --git a/web_widget_image_webcam/views/assets.xml b/web_widget_image_webcam/views/assets.xml new file mode 100644 index 00000000..40564726 --- /dev/null +++ b/web_widget_image_webcam/views/assets.xml @@ -0,0 +1,15 @@ + + + +