Implementation - September

QR code scanning

Implemented a QR code scanner that runs on HTML5 browser. It applies a javascript QR code scanning library: jsqrcode. It has been tested that the scanner can run on Desktop Chrome, Android Chrome, Android UC Browser.

The scanner is using a WebRTC API: getUserMedia(http://caniuse.com/#search=getusermedia) to access the camera. If the browser can support this API, the scanner can get a video stream and get QR code from this stream. The user doesn't need to tap any button to take pictures. However a large part of the browsers can not support WebRTC. If the user is using a browser that cannot support WebRTC,  the front-end will use an <input type="file"> tag to get a image and parse the QR code in it. In such case, the user need to tap a button to take photos and submit it to the system.

Using WebRTC.getUserMedia()

The API is in javascript. A javascript programme can call this method to get access to user's webcam and / or microphone. Some browsers can not support this API, and calling this API will return undefined. Different browsers have different forms of the API name: mozGetUserMedia, webkitGetUserMedia, etc.

Calling this API will require a parameter about the requesting permission: video, or audio, or both. If calling this API is successed, a video stream captured by the webcam / microphone will be got.

Using jsqrcode

Jsqrcode is a porting of ZXing.

The decoding is based on <canvas>. So if canvas is not supported, the library can not work. In the project, if a user is using a browser that can not support canvas, the scanner will show a page to suggest the users some modern HTML5 browsers.

The library will decode the canvas named "qr-canvas" when qrcode.decode is called.The result will be returned by a callback function.

Screenshots

Desktop:

Android Browser (WebRTC is not supported):

New questions for the game

Found some good questions on http://www.sheknows.com/parenting/.

These questions / challenges are all designed to be completed by a family. I think it is good for family relationships. 10 questions from this website has been added to the project.