/abbcwallet/public/faical/webcam.js

https://bitbucket.org/zeeshanbutt003/abbcwebsource · JavaScript · 1052 lines · 278 code · 40 blank · 734 comment · 72 complexity · efbfcc2a6ed04f70391e0c6d43ed52dd MD5 · raw file

  1. // WebcamJS v1.0.25
  2. // Webcam library for capturing JPEG/PNG images in JavaScript
  3. // Attempts getUserMedia, falls back to Flash
  4. // Author: Joseph Huckaby: http://github.com/jhuckaby
  5. // Based on JPEGCam: http://code.google.com/p/jpegcam/
  6. // Copyright (c) 2012 - 2017 Joseph Huckaby
  7. // Licensed under the MIT License
  8. (function(window) {
  9. var _userMedia;
  10. // declare error types
  11. // inheritance pattern here:
  12. // https://stackoverflow.com/questions/783818/how-do-i-create-a-custom-error-in-javascript
  13. function FlashError() {
  14. var temp = Error.apply(this, arguments);
  15. temp.name = this.name = "FlashError";
  16. this.stack = temp.stack;
  17. this.message = temp.message;
  18. }
  19. function WebcamError() {
  20. var temp = Error.apply(this, arguments);
  21. temp.name = this.name = "WebcamError";
  22. this.stack = temp.stack;
  23. this.message = temp.message;
  24. }
  25. var IntermediateInheritor = function() {};
  26. IntermediateInheritor.prototype = Error.prototype;
  27. FlashError.prototype = new IntermediateInheritor();
  28. WebcamError.prototype = new IntermediateInheritor();
  29. var Webcam = {
  30. version: '1.0.25',
  31. // globals
  32. protocol: location.protocol.match(/https/i) ? 'https' : 'http',
  33. loaded: false, // true when webcam movie finishes loading
  34. live: false, // true when webcam is initialized and ready to snap
  35. userMedia: true, // true when getUserMedia is supported natively
  36. iOS: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream,
  37. params: {
  38. width: 0,
  39. height: 0,
  40. dest_width: 0, // size of captured image
  41. dest_height: 0, // these default to width/height
  42. image_format: 'jpeg', // image format (may be jpeg or png)
  43. jpeg_quality: 90, // jpeg image quality from 0 (worst) to 100 (best)
  44. enable_flash: true, // enable flash fallback,
  45. force_flash: false, // force flash mode,
  46. flip_horiz: false, // flip image horiz (mirror mode)
  47. fps: 30, // camera frames per second
  48. upload_name: 'webcam', // name of file in upload post data
  49. constraints: null, // custom user media constraints,
  50. swfURL: '', // URI to webcam.swf movie (defaults to the js location)
  51. flashNotDetectedText: 'ERROR: No Adobe Flash Player detected. Webcam.js relies on Flash for browsers that do not support getUserMedia (like yours).',
  52. noInterfaceFoundText: 'No supported webcam interface found.',
  53. unfreeze_snap: true, // Whether to unfreeze the camera after snap (defaults to true)
  54. iosPlaceholderText: 'Click here to open camera.',
  55. user_callback: null, // callback function for snapshot (used if no user_callback parameter given to snap function)
  56. user_canvas: null // user provided canvas for snapshot (used if no user_canvas parameter given to snap function)
  57. },
  58. errors: {
  59. FlashError: FlashError,
  60. WebcamError: WebcamError
  61. },
  62. hooks: {}, // callback hook functions
  63. init: function() {
  64. // initialize, check for getUserMedia support
  65. var self = this;
  66. // Setup getUserMedia, with polyfill for older browsers
  67. // Adapted from: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
  68. this.mediaDevices = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ?
  69. navigator.mediaDevices : ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
  70. getUserMedia: function(c) {
  71. return new Promise(function(y, n) {
  72. (navigator.mozGetUserMedia ||
  73. navigator.webkitGetUserMedia).call(navigator, c, y, n);
  74. });
  75. }
  76. } : null);
  77. window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
  78. this.userMedia = this.userMedia && !!this.mediaDevices && !!window.URL;
  79. if (this.iOS) {
  80. this.userMedia = null;
  81. }
  82. // Older versions of firefox (< 21) apparently claim support but user media does not actually work
  83. if (navigator.userAgent.match(/Firefox\D+(\d+)/)) {
  84. if (parseInt(RegExp.$1, 10) < 21) this.userMedia = null;
  85. }
  86. // Make sure media stream is closed when navigating away from page
  87. if (this.userMedia) {
  88. window.addEventListener( 'beforeunload', function(event) {
  89. self.reset();
  90. } );
  91. }
  92. },
  93. exifOrientation: function(binFile) {
  94. // extract orientation information from the image provided by iOS
  95. // algorithm based on exif-js
  96. var dataView = new DataView(binFile);
  97. if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {
  98. console.log('Not a valid JPEG file');
  99. return 0;
  100. }
  101. var offset = 2;
  102. var marker = null;
  103. while (offset < binFile.byteLength) {
  104. // find 0xFFE1 (225 marker)
  105. if (dataView.getUint8(offset) != 0xFF) {
  106. console.log('Not a valid marker at offset ' + offset + ', found: ' + dataView.getUint8(offset));
  107. return 0;
  108. }
  109. marker = dataView.getUint8(offset + 1);
  110. if (marker == 225) {
  111. offset += 4;
  112. var str = "";
  113. for (n = 0; n < 4; n++) {
  114. str += String.fromCharCode(dataView.getUint8(offset+n));
  115. }
  116. if (str != 'Exif') {
  117. console.log('Not valid EXIF data found');
  118. return 0;
  119. }
  120. offset += 6; // tiffOffset
  121. var bigEnd = null;
  122. // test for TIFF validity and endianness
  123. if (dataView.getUint16(offset) == 0x4949) {
  124. bigEnd = false;
  125. } else if (dataView.getUint16(offset) == 0x4D4D) {
  126. bigEnd = true;
  127. } else {
  128. console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)");
  129. return 0;
  130. }
  131. if (dataView.getUint16(offset+2, !bigEnd) != 0x002A) {
  132. console.log("Not valid TIFF data! (no 0x002A)");
  133. return 0;
  134. }
  135. var firstIFDOffset = dataView.getUint32(offset+4, !bigEnd);
  136. if (firstIFDOffset < 0x00000008) {
  137. console.log("Not valid TIFF data! (First offset less than 8)", dataView.getUint32(offset+4, !bigEnd));
  138. return 0;
  139. }
  140. // extract orientation data
  141. var dataStart = offset + firstIFDOffset;
  142. var entries = dataView.getUint16(dataStart, !bigEnd);
  143. for (var i=0; i<entries; i++) {
  144. var entryOffset = dataStart + i*12 + 2;
  145. if (dataView.getUint16(entryOffset, !bigEnd) == 0x0112) {
  146. var valueType = dataView.getUint16(entryOffset+2, !bigEnd);
  147. var numValues = dataView.getUint32(entryOffset+4, !bigEnd);
  148. if (valueType != 3 && numValues != 1) {
  149. console.log('Invalid EXIF orientation value type ('+valueType+') or count ('+numValues+')');
  150. return 0;
  151. }
  152. var value = dataView.getUint16(entryOffset + 8, !bigEnd);
  153. if (value < 1 || value > 8) {
  154. console.log('Invalid EXIF orientation value ('+value+')');
  155. return 0;
  156. }
  157. return value;
  158. }
  159. }
  160. } else {
  161. offset += 2+dataView.getUint16(offset+2);
  162. }
  163. }
  164. return 0;
  165. },
  166. fixOrientation: function(origObjURL, orientation, targetImg) {
  167. // fix image orientation based on exif orientation data
  168. // exif orientation information
  169. // http://www.impulseadventure.com/photo/exif-orientation.html
  170. // link source wikipedia (https://en.wikipedia.org/wiki/Exif#cite_note-20)
  171. var img = new Image();
  172. img.addEventListener('load', function(event) {
  173. var canvas = document.createElement('canvas');
  174. var ctx = canvas.getContext('2d');
  175. // switch width height if orientation needed
  176. if (orientation < 5) {
  177. canvas.width = img.width;
  178. canvas.height = img.height;
  179. } else {
  180. canvas.width = img.height;
  181. canvas.height = img.width;
  182. }
  183. // transform (rotate) image - see link at beginning this method
  184. switch (orientation) {
  185. case 2: ctx.transform(-1, 0, 0, 1, img.width, 0); break;
  186. case 3: ctx.transform(-1, 0, 0, -1, img.width, img.height); break;
  187. case 4: ctx.transform(1, 0, 0, -1, 0, img.height); break;
  188. case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
  189. case 6: ctx.transform(0, 1, -1, 0, img.height , 0); break;
  190. case 7: ctx.transform(0, -1, -1, 0, img.height, img.width); break;
  191. case 8: ctx.transform(0, -1, 1, 0, 0, img.width); break;
  192. }
  193. ctx.drawImage(img, 0, 0);
  194. // pass rotated image data to the target image container
  195. targetImg.src = canvas.toDataURL();
  196. }, false);
  197. // start transformation by load event
  198. img.src = origObjURL;
  199. },
  200. attach: function(elem) {
  201. // create webcam preview and attach to DOM element
  202. // pass in actual DOM reference, ID, or CSS selector
  203. if (typeof(elem) == 'string') {
  204. elem = document.getElementById(elem) || document.querySelector(elem);
  205. }
  206. if (!elem) {
  207. return this.dispatch('error', new WebcamError("Could not locate DOM element to attach to."));
  208. }
  209. this.container = elem;
  210. elem.innerHTML = ''; // start with empty element
  211. // insert "peg" so we can insert our preview canvas adjacent to it later on
  212. var peg = document.createElement('div');
  213. elem.appendChild( peg );
  214. this.peg = peg;
  215. // set width/height if not already set
  216. if (!this.params.width) this.params.width = elem.offsetWidth;
  217. if (!this.params.height) this.params.height = elem.offsetHeight;
  218. // make sure we have a nonzero width and height at this point
  219. if (!this.params.width || !this.params.height) {
  220. return this.dispatch('error', new WebcamError("No width and/or height for webcam. Please call set() first, or attach to a visible element."));
  221. }
  222. // set defaults for dest_width / dest_height if not set
  223. if (!this.params.dest_width) this.params.dest_width = this.params.width;
  224. if (!this.params.dest_height) this.params.dest_height = this.params.height;
  225. this.userMedia = _userMedia === undefined ? this.userMedia : _userMedia;
  226. // if force_flash is set, disable userMedia
  227. if (this.params.force_flash) {
  228. _userMedia = this.userMedia;
  229. this.userMedia = null;
  230. }
  231. // check for default fps
  232. if (typeof this.params.fps !== "number") this.params.fps = 30;
  233. // adjust scale if dest_width or dest_height is different
  234. var scaleX = this.params.width / this.params.dest_width;
  235. var scaleY = this.params.height / this.params.dest_height;
  236. if (this.userMedia) {
  237. // setup webcam video container
  238. var video = document.createElement('video');
  239. video.setAttribute('autoplay', 'autoplay');
  240. video.style.width = '' + this.params.dest_width + 'px';
  241. video.style.height = '' + this.params.dest_height + 'px';
  242. if ((scaleX != 1.0) || (scaleY != 1.0)) {
  243. elem.style.overflow = 'hidden';
  244. video.style.webkitTransformOrigin = '0px 0px';
  245. video.style.mozTransformOrigin = '0px 0px';
  246. video.style.msTransformOrigin = '0px 0px';
  247. video.style.oTransformOrigin = '0px 0px';
  248. video.style.transformOrigin = '0px 0px';
  249. video.style.webkitTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  250. video.style.mozTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  251. video.style.msTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  252. video.style.oTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  253. video.style.transform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  254. }
  255. // add video element to dom
  256. elem.appendChild( video );
  257. this.video = video;
  258. // ask user for access to their camera
  259. var self = this;
  260. this.mediaDevices.getUserMedia({
  261. "audio": false,
  262. "video": this.params.constraints || {
  263. mandatory: {
  264. minWidth: this.params.dest_width,
  265. minHeight: this.params.dest_height
  266. }
  267. }
  268. })
  269. .then( function(stream) {
  270. // got access, attach stream to video
  271. video.onloadedmetadata = function(e) {
  272. self.stream = stream;
  273. self.loaded = true;
  274. self.live = true;
  275. self.dispatch('load');
  276. self.dispatch('live');
  277. self.flip();
  278. };
  279. // as window.URL.createObjectURL() is deprecated, adding a check so that it works in Safari.
  280. // older browsers may not have srcObject
  281. if ("srcObject" in video) {
  282. video.srcObject = stream;
  283. }
  284. else {
  285. // using URL.createObjectURL() as fallback for old browsers
  286. video.src = window.URL.createObjectURL(stream);
  287. }
  288. })
  289. .catch( function(err) {
  290. // JH 2016-07-31 Instead of dispatching error, now falling back to Flash if userMedia fails (thx @john2014)
  291. // JH 2016-08-07 But only if flash is actually installed -- if not, dispatch error here and now.
  292. if (self.params.enable_flash && self.detectFlash()) {
  293. setTimeout( function() { self.params.force_flash = 1; self.attach(elem); }, 1 );
  294. }
  295. else {
  296. self.dispatch('error', err);
  297. }
  298. });
  299. }
  300. else if (this.iOS) {
  301. // prepare HTML elements
  302. var div = document.createElement('div');
  303. div.id = this.container.id+'-ios_div';
  304. div.className = 'webcamjs-ios-placeholder';
  305. div.style.width = '' + this.params.width + 'px';
  306. div.style.height = '' + this.params.height + 'px';
  307. div.style.textAlign = 'center';
  308. div.style.display = 'table-cell';
  309. div.style.verticalAlign = 'middle';
  310. div.style.backgroundRepeat = 'no-repeat';
  311. div.style.backgroundSize = 'contain';
  312. div.style.backgroundPosition = 'center';
  313. var span = document.createElement('span');
  314. span.className = 'webcamjs-ios-text';
  315. span.innerHTML = this.params.iosPlaceholderText;
  316. div.appendChild(span);
  317. var img = document.createElement('img');
  318. img.id = this.container.id+'-ios_img';
  319. img.style.width = '' + this.params.dest_width + 'px';
  320. img.style.height = '' + this.params.dest_height + 'px';
  321. img.style.display = 'none';
  322. div.appendChild(img);
  323. var input = document.createElement('input');
  324. input.id = this.container.id+'-ios_input';
  325. input.setAttribute('type', 'file');
  326. input.setAttribute('accept', 'image/*');
  327. input.setAttribute('capture', 'camera');
  328. var self = this;
  329. var params = this.params;
  330. // add input listener to load the selected image
  331. input.addEventListener('change', function(event) {
  332. if (event.target.files.length > 0 && event.target.files[0].type.indexOf('image/') == 0) {
  333. var objURL = URL.createObjectURL(event.target.files[0]);
  334. // load image with auto scale and crop
  335. var image = new Image();
  336. image.addEventListener('load', function(event) {
  337. var canvas = document.createElement('canvas');
  338. canvas.width = params.dest_width;
  339. canvas.height = params.dest_height;
  340. var ctx = canvas.getContext('2d');
  341. // crop and scale image for final size
  342. ratio = Math.min(image.width / params.dest_width, image.height / params.dest_height);
  343. var sw = params.dest_width * ratio;
  344. var sh = params.dest_height * ratio;
  345. var sx = (image.width - sw) / 2;
  346. var sy = (image.height - sh) / 2;
  347. ctx.drawImage(image, sx, sy, sw, sh, 0, 0, params.dest_width, params.dest_height);
  348. var dataURL = canvas.toDataURL();
  349. img.src = dataURL;
  350. div.style.backgroundImage = "url('"+dataURL+"')";
  351. }, false);
  352. // read EXIF data
  353. var fileReader = new FileReader();
  354. fileReader.addEventListener('load', function(e) {
  355. var orientation = self.exifOrientation(e.target.result);
  356. if (orientation > 1) {
  357. // image need to rotate (see comments on fixOrientation method for more information)
  358. // transform image and load to image object
  359. self.fixOrientation(objURL, orientation, image);
  360. } else {
  361. // load image data to image object
  362. image.src = objURL;
  363. }
  364. }, false);
  365. // Convert image data to blob format
  366. var http = new XMLHttpRequest();
  367. http.open("GET", objURL, true);
  368. http.responseType = "blob";
  369. http.onload = function(e) {
  370. if (this.status == 200 || this.status === 0) {
  371. fileReader.readAsArrayBuffer(this.response);
  372. }
  373. };
  374. http.send();
  375. }
  376. }, false);
  377. input.style.display = 'none';
  378. elem.appendChild(input);
  379. // make div clickable for open camera interface
  380. div.addEventListener('click', function(event) {
  381. if (params.user_callback) {
  382. // global user_callback defined - create the snapshot
  383. self.snap(params.user_callback, params.user_canvas);
  384. } else {
  385. // no global callback definied for snapshot, load image and wait for external snap method call
  386. input.style.display = 'block';
  387. input.focus();
  388. input.click();
  389. input.style.display = 'none';
  390. }
  391. }, false);
  392. elem.appendChild(div);
  393. this.loaded = true;
  394. this.live = true;
  395. }
  396. else if (this.params.enable_flash && this.detectFlash()) {
  397. // flash fallback
  398. window.Webcam = Webcam; // needed for flash-to-js interface
  399. var div = document.createElement('div');
  400. div.innerHTML = this.getSWFHTML();
  401. elem.appendChild( div );
  402. }
  403. else {
  404. this.dispatch('error', new WebcamError( this.params.noInterfaceFoundText ));
  405. }
  406. // setup final crop for live preview
  407. if (this.params.crop_width && this.params.crop_height) {
  408. var scaled_crop_width = Math.floor( this.params.crop_width * scaleX );
  409. var scaled_crop_height = Math.floor( this.params.crop_height * scaleY );
  410. elem.style.width = '' + scaled_crop_width + 'px';
  411. elem.style.height = '' + scaled_crop_height + 'px';
  412. elem.style.overflow = 'hidden';
  413. elem.scrollLeft = Math.floor( (this.params.width / 2) - (scaled_crop_width / 2) );
  414. elem.scrollTop = Math.floor( (this.params.height / 2) - (scaled_crop_height / 2) );
  415. }
  416. else {
  417. // no crop, set size to desired
  418. elem.style.width = '' + this.params.width + 'px';
  419. elem.style.height = '' + this.params.height + 'px';
  420. }
  421. },
  422. reset: function() {
  423. // shutdown camera, reset to potentially attach again
  424. if (this.preview_active) this.unfreeze();
  425. // attempt to fix issue #64
  426. this.unflip();
  427. if (this.userMedia) {
  428. if (this.stream) {
  429. if (this.stream.getVideoTracks) {
  430. // get video track to call stop on it
  431. var tracks = this.stream.getVideoTracks();
  432. if (tracks && tracks[0] && tracks[0].stop) tracks[0].stop();
  433. }
  434. else if (this.stream.stop) {
  435. // deprecated, may be removed in future
  436. this.stream.stop();
  437. }
  438. }
  439. delete this.stream;
  440. delete this.video;
  441. }
  442. if ((this.userMedia !== true) && this.loaded && !this.iOS) {
  443. // call for turn off camera in flash
  444. var movie = this.getMovie();
  445. if (movie && movie._releaseCamera) movie._releaseCamera();
  446. }
  447. if (this.container) {
  448. this.container.innerHTML = '';
  449. delete this.container;
  450. }
  451. this.loaded = false;
  452. this.live = false;
  453. },
  454. set: function() {
  455. // set one or more params
  456. // variable argument list: 1 param = hash, 2 params = key, value
  457. if (arguments.length == 1) {
  458. for (var key in arguments[0]) {
  459. this.params[key] = arguments[0][key];
  460. }
  461. }
  462. else {
  463. this.params[ arguments[0] ] = arguments[1];
  464. }
  465. },
  466. on: function(name, callback) {
  467. // set callback hook
  468. name = name.replace(/^on/i, '').toLowerCase();
  469. if (!this.hooks[name]) this.hooks[name] = [];
  470. this.hooks[name].push( callback );
  471. },
  472. off: function(name, callback) {
  473. // remove callback hook
  474. name = name.replace(/^on/i, '').toLowerCase();
  475. if (this.hooks[name]) {
  476. if (callback) {
  477. // remove one selected callback from list
  478. var idx = this.hooks[name].indexOf(callback);
  479. if (idx > -1) this.hooks[name].splice(idx, 1);
  480. }
  481. else {
  482. // no callback specified, so clear all
  483. this.hooks[name] = [];
  484. }
  485. }
  486. },
  487. dispatch: function() {
  488. // fire hook callback, passing optional value to it
  489. var name = arguments[0].replace(/^on/i, '').toLowerCase();
  490. var args = Array.prototype.slice.call(arguments, 1);
  491. if (this.hooks[name] && this.hooks[name].length) {
  492. for (var idx = 0, len = this.hooks[name].length; idx < len; idx++) {
  493. var hook = this.hooks[name][idx];
  494. if (typeof(hook) == 'function') {
  495. // callback is function reference, call directly
  496. hook.apply(this, args);
  497. }
  498. else if ((typeof(hook) == 'object') && (hook.length == 2)) {
  499. // callback is PHP-style object instance method
  500. hook[0][hook[1]].apply(hook[0], args);
  501. }
  502. else if (window[hook]) {
  503. // callback is global function name
  504. window[ hook ].apply(window, args);
  505. }
  506. } // loop
  507. return true;
  508. }
  509. else if (name == 'error') {
  510. var message;
  511. if ((args[0] instanceof FlashError) || (args[0] instanceof WebcamError)) {
  512. message = args[0].message;
  513. } else {
  514. message = "Could not access webcam: " + args[0].name + ": " +
  515. args[0].message + " " + args[0].toString();
  516. }
  517. // default error handler if no custom one specified
  518. alert("Webcam.js Error: " + message);
  519. }
  520. return false; // no hook defined
  521. },
  522. setSWFLocation: function(value) {
  523. // for backward compatibility.
  524. this.set('swfURL', value);
  525. },
  526. detectFlash: function() {
  527. // return true if browser supports flash, false otherwise
  528. // Code snippet borrowed from: https://github.com/swfobject/swfobject
  529. var SHOCKWAVE_FLASH = "Shockwave Flash",
  530. SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
  531. FLASH_MIME_TYPE = "application/x-shockwave-flash",
  532. win = window,
  533. nav = navigator,
  534. hasFlash = false;
  535. if (typeof nav.plugins !== "undefined" && typeof nav.plugins[SHOCKWAVE_FLASH] === "object") {
  536. var desc = nav.plugins[SHOCKWAVE_FLASH].description;
  537. if (desc && (typeof nav.mimeTypes !== "undefined" && nav.mimeTypes[FLASH_MIME_TYPE] && nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) {
  538. hasFlash = true;
  539. }
  540. }
  541. else if (typeof win.ActiveXObject !== "undefined") {
  542. try {
  543. var ax = new ActiveXObject(SHOCKWAVE_FLASH_AX);
  544. if (ax) {
  545. var ver = ax.GetVariable("$version");
  546. if (ver) hasFlash = true;
  547. }
  548. }
  549. catch (e) {;}
  550. }
  551. return hasFlash;
  552. },
  553. getSWFHTML: function() {
  554. // Return HTML for embedding flash based webcam capture movie
  555. var html = '',
  556. swfURL = this.params.swfURL;
  557. // make sure we aren't running locally (flash doesn't work)
  558. if (location.protocol.match(/file/)) {
  559. this.dispatch('error', new FlashError("Flash does not work from local disk. Please run from a web server."));
  560. return '<h3 style="color:red">ERROR: the Webcam.js Flash fallback does not work from local disk. Please run it from a web server.</h3>';
  561. }
  562. // make sure we have flash
  563. if (!this.detectFlash()) {
  564. this.dispatch('error', new FlashError("Adobe Flash Player not found. Please install from get.adobe.com/flashplayer and try again."));
  565. return '<h3 style="color:red">' + this.params.flashNotDetectedText + '</h3>';
  566. }
  567. // set default swfURL if not explicitly set
  568. if (!swfURL) {
  569. // find our script tag, and use that base URL
  570. var base_url = '';
  571. var scpts = document.getElementsByTagName('script');
  572. for (var idx = 0, len = scpts.length; idx < len; idx++) {
  573. var src = scpts[idx].getAttribute('src');
  574. if (src && src.match(/\/webcam(\.min)?\.js/)) {
  575. base_url = src.replace(/\/webcam(\.min)?\.js.*$/, '');
  576. idx = len;
  577. }
  578. }
  579. if (base_url) swfURL = base_url + '/webcam.swf';
  580. else swfURL = 'webcam.swf';
  581. }
  582. // if this is the user's first visit, set flashvar so flash privacy settings panel is shown first
  583. if (window.localStorage && !localStorage.getItem('visited')) {
  584. this.params.new_user = 1;
  585. localStorage.setItem('visited', 1);
  586. }
  587. // construct flashvars string
  588. var flashvars = '';
  589. for (var key in this.params) {
  590. if (flashvars) flashvars += '&';
  591. flashvars += key + '=' + escape(this.params[key]);
  592. }
  593. // construct object/embed tag
  594. html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+this.params.width+'" height="'+this.params.height+'" id="webcam_movie_obj" align="middle"><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+swfURL+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/><embed id="webcam_movie_embed" src="'+swfURL+'" wmode="opaque" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+this.params.width+'" height="'+this.params.height+'" name="webcam_movie_embed" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'"></embed></object>';
  595. return html;
  596. },
  597. getMovie: function() {
  598. // get reference to movie object/embed in DOM
  599. if (!this.loaded) return this.dispatch('error', new FlashError("Flash Movie is not loaded yet"));
  600. var movie = document.getElementById('webcam_movie_obj');
  601. if (!movie || !movie._snap) movie = document.getElementById('webcam_movie_embed');
  602. if (!movie) this.dispatch('error', new FlashError("Cannot locate Flash movie in DOM"));
  603. return movie;
  604. },
  605. freeze: function() {
  606. // show preview, freeze camera
  607. var self = this;
  608. var params = this.params;
  609. // kill preview if already active
  610. if (this.preview_active) this.unfreeze();
  611. // determine scale factor
  612. var scaleX = this.params.width / this.params.dest_width;
  613. var scaleY = this.params.height / this.params.dest_height;
  614. // must unflip container as preview canvas will be pre-flipped
  615. this.unflip();
  616. // calc final size of image
  617. var final_width = params.crop_width || params.dest_width;
  618. var final_height = params.crop_height || params.dest_height;
  619. // create canvas for holding preview
  620. var preview_canvas = document.createElement('canvas');
  621. preview_canvas.width = final_width;
  622. preview_canvas.height = final_height;
  623. var preview_context = preview_canvas.getContext('2d');
  624. // save for later use
  625. this.preview_canvas = preview_canvas;
  626. this.preview_context = preview_context;
  627. // scale for preview size
  628. if ((scaleX != 1.0) || (scaleY != 1.0)) {
  629. preview_canvas.style.webkitTransformOrigin = '0px 0px';
  630. preview_canvas.style.mozTransformOrigin = '0px 0px';
  631. preview_canvas.style.msTransformOrigin = '0px 0px';
  632. preview_canvas.style.oTransformOrigin = '0px 0px';
  633. preview_canvas.style.transformOrigin = '0px 0px';
  634. preview_canvas.style.webkitTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  635. preview_canvas.style.mozTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  636. preview_canvas.style.msTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  637. preview_canvas.style.oTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  638. preview_canvas.style.transform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
  639. }
  640. // take snapshot, but fire our own callback
  641. this.snap( function() {
  642. // add preview image to dom, adjust for crop
  643. preview_canvas.style.position = 'relative';
  644. preview_canvas.style.left = '' + self.container.scrollLeft + 'px';
  645. preview_canvas.style.top = '' + self.container.scrollTop + 'px';
  646. self.container.insertBefore( preview_canvas, self.peg );
  647. self.container.style.overflow = 'hidden';
  648. // set flag for user capture (use preview)
  649. self.preview_active = true;
  650. }, preview_canvas );
  651. },
  652. unfreeze: function() {
  653. // cancel preview and resume live video feed
  654. if (this.preview_active) {
  655. // remove preview canvas
  656. this.container.removeChild( this.preview_canvas );
  657. delete this.preview_context;
  658. delete this.preview_canvas;
  659. // unflag
  660. this.preview_active = false;
  661. // re-flip if we unflipped before
  662. this.flip();
  663. }
  664. },
  665. flip: function() {
  666. // flip container horiz (mirror mode) if desired
  667. if (this.params.flip_horiz) {
  668. var sty = this.container.style;
  669. sty.webkitTransform = 'scaleX(-1)';
  670. sty.mozTransform = 'scaleX(-1)';
  671. sty.msTransform = 'scaleX(-1)';
  672. sty.oTransform = 'scaleX(-1)';
  673. sty.transform = 'scaleX(-1)';
  674. sty.filter = 'FlipH';
  675. sty.msFilter = 'FlipH';
  676. }
  677. },
  678. unflip: function() {
  679. // unflip container horiz (mirror mode) if desired
  680. if (this.params.flip_horiz) {
  681. var sty = this.container.style;
  682. sty.webkitTransform = 'scaleX(1)';
  683. sty.mozTransform = 'scaleX(1)';
  684. sty.msTransform = 'scaleX(1)';
  685. sty.oTransform = 'scaleX(1)';
  686. sty.transform = 'scaleX(1)';
  687. sty.filter = '';
  688. sty.msFilter = '';
  689. }
  690. },
  691. savePreview: function(user_callback, user_canvas) {
  692. // save preview freeze and fire user callback
  693. var params = this.params;
  694. var canvas = this.preview_canvas;
  695. var context = this.preview_context;
  696. // render to user canvas if desired
  697. if (user_canvas) {
  698. var user_context = user_canvas.getContext('2d');
  699. user_context.drawImage( canvas, 0, 0 );
  700. }
  701. // fire user callback if desired
  702. user_callback(
  703. user_canvas ? null : canvas.toDataURL('image/' + params.image_format, params.jpeg_quality / 100 ),
  704. canvas,
  705. context
  706. );
  707. // remove preview
  708. if (this.params.unfreeze_snap) this.unfreeze();
  709. },
  710. snap: function(user_callback, user_canvas) {
  711. // use global callback and canvas if not defined as parameter
  712. if (!user_callback) user_callback = this.params.user_callback;
  713. if (!user_canvas) user_canvas = this.params.user_canvas;
  714. // take snapshot and return image data uri
  715. var self = this;
  716. var params = this.params;
  717. if (!this.loaded) return this.dispatch('error', new WebcamError("Webcam is not loaded yet"));
  718. // if (!this.live) return this.dispatch('error', new WebcamError("Webcam is not live yet"));
  719. if (!user_callback) return this.dispatch('error', new WebcamError("Please provide a callback function or canvas to snap()"));
  720. // if we have an active preview freeze, use that
  721. if (this.preview_active) {
  722. this.savePreview( user_callback, user_canvas );
  723. return null;
  724. }
  725. // create offscreen canvas element to hold pixels
  726. var canvas = document.createElement('canvas');
  727. canvas.width = this.params.dest_width;
  728. canvas.height = this.params.dest_height;
  729. var context = canvas.getContext('2d');
  730. // flip canvas horizontally if desired
  731. if (this.params.flip_horiz) {
  732. context.translate( params.dest_width, 0 );
  733. context.scale( -1, 1 );
  734. }
  735. // create inline function, called after image load (flash) or immediately (native)
  736. var func = function() {
  737. // render image if needed (flash)
  738. if (this.src && this.width && this.height) {
  739. context.drawImage(this, 0, 0, params.dest_width, params.dest_height);
  740. }
  741. // crop if desired
  742. if (params.crop_width && params.crop_height) {
  743. var crop_canvas = document.createElement('canvas');
  744. crop_canvas.width = params.crop_width;
  745. crop_canvas.height = params.crop_height;
  746. var crop_context = crop_canvas.getContext('2d');
  747. crop_context.drawImage( canvas,
  748. Math.floor( (params.dest_width / 2) - (params.crop_width / 2) ),
  749. Math.floor( (params.dest_height / 2) - (params.crop_height / 2) ),
  750. params.crop_width,
  751. params.crop_height,
  752. 0,
  753. 0,
  754. params.crop_width,
  755. params.crop_height
  756. );
  757. // swap canvases
  758. context = crop_context;
  759. canvas = crop_canvas;
  760. }
  761. // render to user canvas if desired
  762. if (user_canvas) {
  763. var user_context = user_canvas.getContext('2d');
  764. user_context.drawImage( canvas, 0, 0 );
  765. }
  766. // fire user callback if desired
  767. user_callback(
  768. user_canvas ? null : canvas.toDataURL('image/' + params.image_format, params.jpeg_quality / 100 ),
  769. canvas,
  770. context
  771. );
  772. };
  773. // grab image frame from userMedia or flash movie
  774. if (this.userMedia) {
  775. // native implementation
  776. context.drawImage(this.video, 0, 0, this.params.dest_width, this.params.dest_height);
  777. // fire callback right away
  778. func();
  779. }
  780. else if (this.iOS) {
  781. var div = document.getElementById(this.container.id+'-ios_div');
  782. var img = document.getElementById(this.container.id+'-ios_img');
  783. var input = document.getElementById(this.container.id+'-ios_input');
  784. // function for handle snapshot event (call user_callback and reset the interface)
  785. iFunc = function(event) {
  786. func.call(img);
  787. img.removeEventListener('load', iFunc);
  788. div.style.backgroundImage = 'none';
  789. img.removeAttribute('src');
  790. input.value = null;
  791. };
  792. if (!input.value) {
  793. // No image selected yet, activate input field
  794. img.addEventListener('load', iFunc);
  795. input.style.display = 'block';
  796. input.focus();
  797. input.click();
  798. input.style.display = 'none';
  799. } else {
  800. // Image already selected
  801. iFunc(null);
  802. }
  803. }
  804. else {
  805. // flash fallback
  806. var raw_data = this.getMovie()._snap();
  807. // render to image, fire callback when complete
  808. var img = new Image();
  809. img.onload = func;
  810. img.src = 'data:image/'+this.params.image_format+';base64,' + raw_data;
  811. }
  812. return null;
  813. },
  814. configure: function(panel) {
  815. // open flash configuration panel -- specify tab name:
  816. // "camera", "privacy", "default", "localStorage", "microphone", "settingsManager"
  817. if (!panel) panel = "camera";
  818. this.getMovie()._configure(panel);
  819. },
  820. flashNotify: function(type, msg) {
  821. // receive notification from flash about event
  822. switch (type) {
  823. case 'flashLoadComplete':
  824. // movie loaded successfully
  825. this.loaded = true;
  826. this.dispatch('load');
  827. break;
  828. case 'cameraLive':
  829. // camera is live and ready to snap
  830. this.live = true;
  831. this.dispatch('live');
  832. break;
  833. case 'error':
  834. // Flash error
  835. this.dispatch('error', new FlashError(msg));
  836. break;
  837. default:
  838. // catch-all event, just in case
  839. // console.log("webcam flash_notify: " + type + ": " + msg);
  840. break;
  841. }
  842. },
  843. b64ToUint6: function(nChr) {
  844. // convert base64 encoded character to 6-bit integer
  845. // from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
  846. return nChr > 64 && nChr < 91 ? nChr - 65
  847. : nChr > 96 && nChr < 123 ? nChr - 71
  848. : nChr > 47 && nChr < 58 ? nChr + 4
  849. : nChr === 43 ? 62 : nChr === 47 ? 63 : 0;
  850. },
  851. base64DecToArr: function(sBase64, nBlocksSize) {
  852. // convert base64 encoded string to Uintarray
  853. // from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
  854. var sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
  855. nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2,
  856. taBytes = new Uint8Array(nOutLen);
  857. for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
  858. nMod4 = nInIdx & 3;
  859. nUint24 |= this.b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
  860. if (nMod4 === 3 || nInLen - nInIdx === 1) {
  861. for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
  862. taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
  863. }
  864. nUint24 = 0;
  865. }
  866. }
  867. return taBytes;
  868. },
  869. upload: function(image_data_uri, target_url, callback) {
  870. // submit image data to server using binary AJAX
  871. var form_elem_name = this.params.upload_name || 'webcam';
  872. // detect image format from within image_data_uri
  873. var image_fmt = '';
  874. if (image_data_uri.match(/^data\:image\/(\w+)/))
  875. image_fmt = RegExp.$1;
  876. else
  877. throw "Cannot locate image format in Data URI";
  878. // extract raw base64 data from Data URI
  879. var raw_image_data = image_data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
  880. // contruct use AJAX object
  881. var http = new XMLHttpRequest();
  882. http.open("POST", target_url, true);
  883. // setup progress events
  884. if (http.upload && http.upload.addEventListener) {
  885. http.upload.addEventListener( 'progress', function(e) {
  886. if (e.lengthComputable) {
  887. var progress = e.loaded / e.total;
  888. Webcam.dispatch('uploadProgress', progress, e);
  889. }
  890. }, false );
  891. }
  892. // completion handler
  893. var self = this;
  894. http.onload = function() {
  895. if (callback) callback.apply( self, [http.status, http.responseText, http.statusText] );
  896. Webcam.dispatch('uploadComplete', http.status, http.responseText, http.statusText);
  897. };
  898. // create a blob and decode our base64 to binary
  899. var blob = new Blob( [ this.base64DecToArr(raw_image_data) ], {type: 'image/'+image_fmt} );
  900. // stuff into a form, so servers can easily receive it as a standard file upload
  901. var form = new FormData();
  902. form.append( form_elem_name, blob, form_elem_name+"."+image_fmt.replace(/e/, '') );
  903. // send data to server
  904. http.send(form);
  905. }
  906. };
  907. Webcam.init();
  908. if (typeof define === 'function' && define.amd) {
  909. define( function() { return Webcam; } );
  910. }
  911. else if (typeof module === 'object' && module.exports) {
  912. module.exports = Webcam;
  913. }
  914. else {
  915. window.Webcam = Webcam;
  916. }
  917. }(window));