schmich / instascan Goto Github PK

See #45.

• webrtc-adapter should be a peer dependency, not a direct dependency, of this library
• Update installation instructions
  • Browsers: need to include instascan.min.js as well as adapter.min.js
  • Provide a fully bundled version (webrtc-adapter included)?
  • npm/yarn: npm install --save instascan webrtc-adapter
  • ...

• Instead of always-on scanning
• Add to API, e.g. scanner.scan()
• Allow disabling continuous scanning with opts.continuous.
• Uses same scan event path, should respect captureImage
• Should ignore refractoryPeriod
• Use promise for result? Duplicates effort with scan event, but allows for better control

• Allows quick integration
• Move to its own GitHub project
• Publish on npm

The back camera of my Xiaomi Redmi 4 Pro phone shows only a black image.
The front camera instead works fine.
It seems to be a bug with this library because other javascript scanners like quaggaJS work fine with both cameras.
This bug is in the demo page too.

• js, css, ...

• See https://codepen.io/jonathan/pen/sxgJl

• Phone/mobile support
• { video: { facingMode: "user" } }
• { video: { facingMode: { exact: "environment" } } }
• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

If you control QR generation:

• Size
• Complexity
• Border
• Matte vs. glossy

Scanning:

• Higher resolution typically provides better results, but is more CPU intensive
• Example setup
• Orientation doesn't matter
• Camera autofocus/fixed-focus
• Exposure compensation
• Blurriness is bad
• Angled/skewed is bad

• Open Chrome in incognito
• Open site
• Notice prompt for permissions
• Open instascan settings
• Notice blank camera name
• Issue: we call getCameras before our first call to webkitGetUserMedia, so the cameras do not enumerate properly
• Fix: have to figure out how to do first-time discovery of cameras (ordering)

Hello I need to make this to be able to detect multiple QR codes at the same time. Is this a possibility?

If scanner is stopped and scanner.start is called while tab is not focused and backgroundScan is false, the scanner still starts. Instead, it should transition to the inactive state.

• Needs to be HTTPS
• https://schmich.github.io/instascan or similar

• URL (template)
• Method: GET, POST, PUT, PATCH, etc.
• Additional headers: (key, value)
• Template variables
  • %r: raw content
  • %s: scanned content
  • %i: base64-encoded image data
• Payload
  • Template if specified, otherwise default
  • JSON, form-encoded, ...
  • Auto-determine Content-Type header
• Checkbox: include image data

MVP:

• POST
• User-specified URL
• JSON payload
• Option to include base64-encoded image data

• Yes Opera 38.0.2220.41, Mac OS X 10.11.5 64-bit
• Yes Chrome 51.0.2704.103 (64-bit)
• Yes Firefox 46.0.1
• No Safari (no support for getUserMedia)
• No IE (no support for getUserMedia)
• Yes Edge 13
• http://caniuse.com/#feat=stream

By default, backgroundScan should be true to avoid potentially confusing behavior (see #43). By making the user explicitly set backgroundScan to false, they should understand why the preview video disappears and reappears.

• Snackbar popup
• Should look like an error

• Add API support for specifying video constraints (e.g. min/max resolution, aspect ratio).
• https://github.com/webrtcHacks/WebRTC-Camera-Resolution
• https://webrtchacks.com/how-to-figure-out-webrtc-camera-resolutions/

• Can be complex or simple
• Rules based transformations
• e.g. regex match, text output
• e.g. match: .*, transform: http://foo.com?q=$0
• $1, $2, ... capture groups
• Will still be treated as URL if result is URL formatted

• Use snackbar

• Support PNG, JPG, and quality setting
• e.g. opts = { captureImage: { format: "png", quality: 0.9 } }

When using the library inside a AMD (requireJS) app I get an error probably related with the loading of lodash module. There are plans to package the library as AMD or UMD? There is a workaround for this issue?

Uncaught TypeError: _.forEach is not a function
at Object.init (instascan.js:7995)
at Stamp (instascan.js:26856)
at Function.create (instascan.js:27056)
at Scanner._createStateMachine (instascan.js:30311)
at new Scanner (instascan.js:30150)
at scanQR (play.js:866)
at HTMLFieldSetElement. (play.js:528)
at HTMLFieldSetElement.dispatch (jquery-2.1.4.min.js:3)
at HTMLFieldSetElement.r.handle (jquery-2.1.4.min.js:3)

• https://github.com/LazarSoft/jsqrcode
• https://github.com/zz85/quirc.js
• https://github.com/ghybs/zxingjs2
• WebAssembly build of Java ZXing
• Create multiple builds, one per library?
• Create an uber build that uses all simultaneously?

• Add README
• Deployment steps
  • Direct copyable, static
  • HTTPS for WebRTC
  • CORS for POST
  • Supports subfolder deployment (http://foo.com/scan/)
• QR code guidelines (autofocus, resolution, size, complexity)
• Brief rundown of features
• Screenshot of website/scan
• API documentation, usage

• On camera active, add active class to video element.
• On camera inactive, add inactive class to video element.

• npm install instascan and var Instascan = require('instascan');
• Use instascan.min.js from release zip
• Bower?

• Connect camera
• Launch instascan
• Select connected camera (saved in localStorage)
• Close instascan
• Disconnect camera
• Reopen instascan
• Camera preview does not launch since camera is no longer available
• Need to fallback to default existing camera

Scan history entries should have buttons to open links in new tab. Button should be to the left of the copy button

It would be helpful if this was compiled to ES5. Webpack/Babel isn't able to compile it when added as a dependency to package.json.

http://stackoverflow.com/questions/43417654/create-react-app-and-javascript-dependency-that-is-using-async-await-fails-to-co/43418589#43418589

let scanner = new Instascan.Scanner();
scanner.addListener('scan', function (content, image) {
  console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
  if (cameras.length > 0) {
    scanner.start(cameras[0]);
  } else {
    console.error('No cameras found.');
  }
});

When running this for the first time on a domain that the user doesn't trust yet, the cameras from getCameras have null names because the user hasn't yet allowed access to the camera.

When scanner.start is called, the user is prompted. When the user accepts, the app has to call getCameras again to actually get the names.

This should be at least called out in the documentation if not fixed with a more straightforward API.

Here are my HTML.

<div id="video_container" style="align-items:center;display:flex;height:100%;justify-content:center;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:2.5px;overflow:hidden;">
  <video id="video" width="50%" autoplay loop muted preload></video>
</div>

I am using the example codes.

let scanner = new Instascan.Scanner({ video: document.getElementById('video') });
scanner.addListener('scan', function (content) {
  console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
  if (cameras.length > 0) {
    scanner.start(cameras[0]);
  } else {
    console.error('No cameras found.');
  }
}).catch(function (e) {
  console.error(e);
});

Here is animated .gif of the problem. After I change tab (twice) the <video> gone although the DOM is still the same.

The screen shot of the <video> when it is gone.

• Rename monitor to video or something similar

• Publish as a Bower package
• https://bower.io/docs/creating-packages/

• scanner.start(...)
• scanner.stop()
• Leave tab
• Come back to tab
• Scanning starts again (does not respect stop call)

• http://stackoverflow.com/questions/23374806/webapp-using-webrtc-for-cross-platform-videochat-in-ios-browser-and-android-chro/23391401#23391401
• No iOS support for WebRTC, regardless of browser
• Maybe support H1 2017

Is there a way yo have a mark on the canvas to show the user a frame has been captured and an analyse is in progress?

Or better show like in a native app some dots over the recognized points ?

• Button will clear scan history

• Setting: on scan, open templated URL
• Use scanned data for template (URI escape)
• e.g. http://foo.com/?q={scan}

• Allow user to enable or disable scan history
• On disable, prompt to clear history

• Setting for timeout between duplicates (e.g. 5 seconds)

• Allow overriding constraints provided to getUserMedia
• Superset of setting resolution, camera facing, etc.

• One-click file download for JSON-formatted scan history

• Show live/not live status
• Show error if one occurs when enumerating cameras (e.g. camera access denied) instead of just "No cameras found"
• Add button to retry camera access (e.g. if user blocks then wants to allow camera access)

• Fast scan period makes preview laggy (too much for mobile)
• mirror setting doesn't work well (might be phone-dependent)
• Layout is optimized for desktop, looks bad on mobile, need mobile-optimized, too

Uncaught SyntaxError: Unexpected end of input
app.js:11 Uncaught ReferenceError: Instascan is not defined
at Ue.mounted (app.js:11)
at we (vue.min.js:6)
at Ue.e._mount (vue.min.js:6)
at Ue.$mount (vue.min.js:8)
at Ue.$mount (vue.min.js:8)
at Ue.Re.e._init (vue.min.js:6)
at new Ue (vue.min.js:6)
at app.js:1