Skip to content
Snippets Groups Projects
Commit f07d13a4 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Add attribute to start qr code scan automatically

parent 7fa21547
No related branches found
No related tags found
No related merge requests found
Pipeline #13293 passed
Stage: test
Hide whitespace changes
Inline Side-by-side
packages/qr-code-scanner/src/qr-code-scanner.js
+ 76
− 64
View file @ f07d13a4
...@@ -26,6 +26,9 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -26,6 +26,9 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
this.scanIsOk = false; this.scanIsOk = false;
this.showOutput = false; this.showOutput = false;
this.stopScan = false; this.stopScan = false;
this.activeCamera = '';
} }
static get scopedElements() { static get scopedElements() {
...@@ -48,7 +51,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -48,7 +51,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
loading: { type: Boolean, attribute: false }, loading: { type: Boolean, attribute: false },
scanIsOk: { type: Boolean, attribute: 'scan-is-ok' }, scanIsOk: { type: Boolean, attribute: 'scan-is-ok' },
showOutput: { type: Boolean, attribute: 'show-output' }, showOutput: { type: Boolean, attribute: 'show-output' },
stopScan: { type: Boolean, attribute: 'stop-scan' } stopScan: { type: Boolean, attribute: 'stop-scan' },
activeCamera: { type: String, attribute: false },
}; };
} }
...@@ -58,72 +62,76 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -58,72 +62,76 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
const that = this; const that = this;
this.updateComplete.then(()=>{ this.updateComplete.then(()=>{
let devices_map = new Map(); this.checkSupport();
if (!this.stopScan) {
const that = this; this.qrCodeScannerInit();
}
});
}
if (navigator.mediaDevices checkSupport() {
&& navigator.mediaDevices.enumerateDevices const that = this;
&& navigator.mediaDevices.getUserMedia) { let devices_map = new Map();
navigator.mediaDevices.enumerateDevices() if (navigator.mediaDevices
.then(function (devices) { && navigator.mediaDevices.enumerateDevices
devices.forEach(function (device) { && navigator.mediaDevices.getUserMedia) {
console.log(device.kind + ": " + device.label + navigator.mediaDevices.enumerateDevices()
" id = " + device.deviceId); .then(function (devices) {
// that._("#error").innerText += " | device.kind: " + device.kind + " id: " + device.deviceId + " label: " + device.label + " | "; devices.forEach(function (device) {
if (device.kind === 'videoinput') { console.log(device.kind + ": " + device.label +
let id = device.deviceId; " id = " + device.deviceId);
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { // that._("#error").innerText += " | device.kind: " + device.kind + " id: " + device.deviceId + " label: " + device.label + " | ";
devices_map.set('environment', i18n.t('back-camera')); if (device.kind === 'videoinput') {
devices_map.set('user', i18n.t('front-camera')); let id = device.deviceId;
} else { if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
devices_map.set(id ? id : true, device.label || i18n.t('camera') + (devices_map.size + 1)); devices_map.set('environment', i18n.t('back-camera'));
} devices_map.set('user', i18n.t('front-camera'));
} else {
devices_map.set(id ? id : true, device.label || i18n.t('camera') + (devices_map.size + 1));
} }
});
if (devices_map.size < 1) {
that.notSupported = true;
} }
for (let [id, label] of devices_map) {
let opt = document.createElement("option");
opt.value = id;
opt.text = label;
that._('#videoSource').appendChild(opt);
}
console.log(devices_map);
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
that.notSupported = true;
}); });
} else if (MediaStreamTrack && MediaStreamTrack.getSources) { if (devices_map.size < 1) {
this._log("MediaStreamTrack.getSources used"); that.notSupported = true;
const callback = sourceInfos => { }
const results = []; for (let [id, label] of devices_map) {
for (let i = 0; i !== sourceInfos.length; ++i) { let opt = document.createElement("option");
const sourceInfo = sourceInfos[i]; opt.value = id;
// that._("#error").innerText += " * kind: " + sourceInfo.kind + " id: " + sourceInfo.id + " label: " + sourceInfo.label + " * "; opt.text = label;
if (sourceInfo.kind === 'video') { that._('#videoSource').appendChild(opt);
devices_map.set(sourceInfo.id ? sourceInfo.id : true, sourceInfo.label || i18n.t('camera') + (devices_map.size + 1)) }
results.push({ console.log(devices_map);
id: sourceInfo.id, that.activeCamera = devices_map.keys().next().value;
label: sourceInfo.label })
}); .catch(function (err) {
} console.log(err.name + ": " + err.message);
that.notSupported = true;
});
} else if (MediaStreamTrack && MediaStreamTrack.getSources) {
this._log("MediaStreamTrack.getSources used");
const callback = sourceInfos => {
const results = [];
for (let i = 0; i !== sourceInfos.length; ++i) {
const sourceInfo = sourceInfos[i];
// that._("#error").innerText += " * kind: " + sourceInfo.kind + " id: " + sourceInfo.id + " label: " + sourceInfo.label + " * ";
if (sourceInfo.kind === 'video') {
devices_map.set(sourceInfo.id ? sourceInfo.id : true, sourceInfo.label || i18n.t('camera') + (devices_map.size + 1))
results.push({
id: sourceInfo.id,
label: sourceInfo.label
});
} }
this._log(`${results.length} results found`);
resolve(results);
} }
MediaStreamTrack.getSources(callback); this._log(`${results.length} results found`);
} that.activeCamera = devices_map.keys().next().value;
else { resolve(results);
that.notSupported = true;
} }
MediaStreamTrack.getSources(callback);
}
else {
that.notSupported = true;
}
});
} }
getLoadingMsg(string) { getLoadingMsg(string) {
...@@ -132,6 +140,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -132,6 +140,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
} }
qrCodeScannerInit() { qrCodeScannerInit() {
this.stopScan = false;
this.askPermission = true; this.askPermission = true;
let video = document.createElement("video"); let video = document.createElement("video");
...@@ -158,8 +168,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -158,8 +168,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
canvas.stroke(); canvas.stroke();
} }
const that = this; console.log(this.activeCamera);
let videoId = this._('#videoSource').options[this._('#videoSource').selectedIndex].value; let videoId = this.activeCamera;
let constraint = { video: { deviceId: videoId } }; let constraint = { video: { deviceId: videoId } };
if ( (videoId === 'environment') ) { if ( (videoId === 'environment') ) {
...@@ -168,6 +178,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -168,6 +178,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
constraint = { video: { facingMode: "user" } }; constraint = { video: { facingMode: "user" } };
} }
const that = this;
navigator.mediaDevices.getUserMedia(constraint).then(function(stream) { navigator.mediaDevices.getUserMedia(constraint).then(function(stream) {
video.srcObject = stream; video.srcObject = stream;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
...@@ -177,14 +189,14 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -177,14 +189,14 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
}).catch((e) => { console.log(e); that.askPermission = true;}); }).catch((e) => { console.log(e); that.askPermission = true;});
function tick() { function tick() {
if (videoId !== that._('#videoSource').options[that._('#videoSource').selectedIndex].value) { /* if (videoId !== that._('#videoSource').options[that._('#videoSource').selectedIndex].value) {
video.srcObject.getTracks().forEach(function(track) { video.srcObject.getTracks().forEach(function(track) {
track.stop(); track.stop();
console.log("Changed Media"); console.log("Changed Media");
}); });
that.qrCodeScannerInit(); that.qrCodeScannerInit();
return; return;
} }*/
if (that.videoRunning === false) { if (that.videoRunning === false) {
video.srcObject.getTracks().forEach(function(track) { video.srcObject.getTracks().forEach(function(track) {
track.stop(); track.stop();
...@@ -328,7 +340,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) { ...@@ -328,7 +340,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
<div class="button-wrapper"> <div class="button-wrapper">
<button class="start button is-primary ${classMap({hidden: this.videoRunning})}" @click="${() => this.qrCodeScannerInit()}" title="${i18n.t('start-scan')}">${i18n.t('start-scan')}</button> <button class="start button is-primary ${classMap({hidden: this.videoRunning})}" @click="${() => this.qrCodeScannerInit(this)}" title="${i18n.t('start-scan')}">${i18n.t('start-scan')}</button>
<button class="stop button is-primary ${classMap({hidden: !this.videoRunning})}" @click="${() => this.stopScanning()}" title="${i18n.t('stop-scan')}">${i18n.t('stop-scan')}</button> <button class="stop button is-primary ${classMap({hidden: !this.videoRunning})}" @click="${() => this.stopScanning()}" title="${i18n.t('stop-scan')}">${i18n.t('stop-scan')}</button>
<select id="videoSource" class="button"></select> <select id="videoSource" class="button"></select>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment