@aliath2/html5-qrcode
Advanced tools
Changelog
Version 2.2.5 & Version 2.2.6
Small minification fix in Version 2.2.6.
Added support for turning torch On and Off in Html5QrcodeScanner.
On supported devices + browsers.
This new feature will implement the feature request - Issue#129 and add support for torch (also called flash) on supported devices and browsers.
So far I have confirmed functionality on Samsung Flip 4 Chrome and Internet (Samsung's default browser).
This is only supported on Html5QrcodeScanner and can be enabled using the config like this.
let html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{
fps: 10,
qrbox: qrboxFunction,
// Important notice: this is experimental feature, use it at your
// own risk. See documentation in
// mebjas@/html5-qrcode/src/experimental-features.ts
experimentalFeatures: {
useBarCodeDetectorIfSupported: true
},
rememberLastUsedCamera: true,
aspectRatio: 1.7777778,
showTorchButtonIfSupported: true
});
The showTorchButtonIfSupported: true part is the crucial one. It's off by default for now as I don't like the UI very much.
Added support for getRunningTrackSettings().
Added a new API to get settings (type: MediaTrackSettings) for running video streams while QR code is being scanned.
/**
* Returns the object containing the current values of each constrainable
* property of the running video track.
*
* Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getSettings
*
* Important:
* 1. Must be called only if the camera based scanning is in progress.
*
* @returns the supported settings of the running video track.
* @throws error if the scanning is not in running state.
*/
public getRunningTrackSettings(): MediaTrackSettings {}
This API can be used to check the currently applied settings on the running video stream like weather torch is on or not.
getRunningTrackCapabilities(..) and applyVideoConstraints(..) out of beta.
Both Html5Qrcode and Html5QrcodeScanner classes had support for following APIs.
/**
* Returns the capabilities of the running video track.
*
* Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getConstraints
*
* Important:
* 1. Must be called only if the camera based scanning is in progress.
*
* @returns the capabilities of a running video track.
* @throws error if the scanning is not in running state.
*/
public getRunningTrackCapabilities(): MediaTrackCapabilities {}
/**
* Apply a video constraints on running video track from camera.
*
* Important:
* 1. Must be called only if the camera based scanning is in progress.
* 2. Changing aspectRatio while scanner is running is not yet supported.
*
* @param {MediaTrackConstraints} specifies a variety of video or camera
* controls as defined in
* https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints
* @returns a Promise which succeeds if the passed constraints are applied,
* fails otherwise.
* @throws error if the scanning is not in running state.
*/
public applyVideoConstraints(videoConstaints: MediaTrackConstraints)
: Promise<any> {}
These have now been taken out of beta and publicly documented. More blog articles to be published for these.
Sponsorship
Thanks <a href="https://github.com/bujjivadu"><img src="https://github.com/bujjivadu.png" width="40px" alt="" /></a> for sponsorship!
Changelog
Version 2.2.5 & Version 2.2.6
Small minification fix in Version 2.2.6.
Added support for turning torch On and Off in Html5QrcodeScanner.
On supported devices + browsers.
This new feature will implement the feature request - Issue#129 and add support for torch (also called flash) on supported devices and browsers.
So far I have confirmed functionality on Samsung Flip 4 Chrome and Internet (Samsung's default browser).
This is only supported on Html5QrcodeScanner and can be enabled using the config like this.
let html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{
fps: 10,
qrbox: qrboxFunction,
// Important notice: this is experimental feature, use it at your
// own risk. See documentation in
// mebjas@/html5-qrcode/src/experimental-features.ts
experimentalFeatures: {
useBarCodeDetectorIfSupported: true
},
rememberLastUsedCamera: true,
aspectRatio: 1.7777778,
showTorchButtonIfSupported: true
});
The showTorchButtonIfSupported: true part is the crucial one. It's off by default for now as I don't like the UI very much.
Added support for getRunningTrackSettings().
Added a new API to get settings (type: MediaTrackSettings) for running video streams while QR code is being scanned.
/**
* Returns the object containing the current values of each constrainable
* property of the running video track.
*
* Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getSettings
*
* Important:
* 1. Must be called only if the camera based scanning is in progress.
*
* @returns the supported settings of the running video track.
* @throws error if the scanning is not in running state.
*/
public getRunningTrackSettings(): MediaTrackSettings {}
This API can be used to check the currently applied settings on the running video stream like weather torch is on or not.
getRunningTrackCapabilities(..) and applyVideoConstraints(..) out of beta.
Both Html5Qrcode and Html5QrcodeScanner classes had support for following APIs.
/**
* Returns the capabilities of the running video track.
*
* Read more: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getConstraints
*
* Important:
* 1. Must be called only if the camera based scanning is in progress.
*
* @returns the capabilities of a running video track.
* @throws error if the scanning is not in running state.
*/
public getRunningTrackCapabilities(): MediaTrackCapabilities {}
/**
* Apply a video constraints on running video track from camera.
*
* Important:
* 1. Must be called only if the camera based scanning is in progress.
* 2. Changing aspectRatio while scanner is running is not yet supported.
*
* @param {MediaTrackConstraints} specifies a variety of video or camera
* controls as defined in
* https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints
* @returns a Promise which succeeds if the passed constraints are applied,
* fails otherwise.
* @throws error if the scanning is not in running state.
*/
public applyVideoConstraints(videoConstaints: MediaTrackConstraints)
: Promise<any> {}
These have now been taken out of beta and publicly documented. More blog articles to be published for these.
Sponsorship
Thanks <a href="https://github.com/bujjivadu"><img src="https://github.com/bujjivadu.png" width="40px" alt="" /></a> for sponsorship!
Changelog
Version 2.2.1
-
Added support for
supportedScanTypeinHtml5QrcodeScanner. This feature was implemented by our latest contributor - mohsinaav@Now users can decide to only use camera based scan or file based scan or use them in different order. How to use:
function onScanSuccess(decodedText, decodedResult) { // handle the scanned code as you like, for example: console.log(`Code matched = ${decodedText}`, decodedResult); } let config = { fps: 10, qrbox: {width: 100, height: 100}, rememberLastUsedCamera: true, // Only support camera scan type. supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA] }; let html5QrcodeScanner = new Html5QrcodeScanner( "reader", config, /* verbose= */ false); html5QrcodeScanner.render(onScanSuccess);For file based scan only choose:
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]For supporting both as it is today, you can ignore this field or set as:
supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]To set the file based scan as defult change the order:
supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_FILE, Html5QrcodeScanType.SCAN_TYPE_CAMERA]