Black and white example works
This commit is contained in:
parent
721f856512
commit
7a366525af
21
index.html
21
index.html
|
|
@ -16,21 +16,32 @@
|
|||
padding: 0;
|
||||
}
|
||||
html,body{
|
||||
background: #000;
|
||||
max-width: 100vw;
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
background: #000;
|
||||
max-width: 100vw;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
#display,#video{
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
}
|
||||
#start{
|
||||
display: block;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 0;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="display" width="19" height="14"></canvas>
|
||||
<canvas id="video"></canvas>
|
||||
<!--<canvas id="video"></canvas>-->
|
||||
<div id="data"></div>
|
||||
<button id="start" onclick="start();">START</button>
|
||||
<script src="/js/jsQR.js"></script>
|
||||
<script src="/src/content.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -43,8 +43,8 @@ var Content = /** @class */ (function () {
|
|||
this.displayCtx = this.displayCanvas.getContext('2d');
|
||||
this.displayCanvas.height = this.height;
|
||||
this.displayCanvas.width = this.width;
|
||||
//
|
||||
this.videoCanvas = document.getElementById('video'); //document.createElement('canvas') as HTMLCanvasElement;
|
||||
//document.getElementById('video') as HTMLCanvasElement;
|
||||
this.videoCanvas = document.createElement('canvas');
|
||||
this.videoCtx = this.videoCanvas.getContext('2d');
|
||||
this.startCamera();
|
||||
}
|
||||
|
|
@ -56,8 +56,8 @@ var Content = /** @class */ (function () {
|
|||
case 0:
|
||||
constraints = {
|
||||
video: {
|
||||
width: { ideal: 4096 },
|
||||
height: { ideal: 2160 },
|
||||
width: { ideal: 640 },
|
||||
height: { ideal: 480 },
|
||||
facingMode: 'environment'
|
||||
},
|
||||
audio: false
|
||||
|
|
@ -104,11 +104,11 @@ var Content = /** @class */ (function () {
|
|||
}
|
||||
if (code !== null && code.binaryData.length === 266) {
|
||||
document.querySelector('#data').innerText = code.binaryData.toString();
|
||||
console.dir(code);
|
||||
//console.dir(code);
|
||||
this.display(code.binaryData);
|
||||
}
|
||||
else {
|
||||
console.log('No QR');
|
||||
//console.log('No QR')
|
||||
}
|
||||
};
|
||||
Content.prototype.display = function (data) {
|
||||
|
|
@ -122,7 +122,8 @@ var Content = /** @class */ (function () {
|
|||
};
|
||||
return Content;
|
||||
}());
|
||||
(function main() {
|
||||
function start() {
|
||||
new Content();
|
||||
})();
|
||||
}
|
||||
;
|
||||
//# sourceMappingURL=content.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"content.js","sourceRoot":"","sources":["content.ts"],"names":[],"mappings":"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"}
|
||||
{"version":3,"file":"content.js","sourceRoot":"","sources":["content.ts"],"names":[],"mappings":"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"}
|
||||
|
|
@ -23,8 +23,8 @@ class Content {
|
|||
|
||||
this.displayCanvas.height = this.height;
|
||||
this.displayCanvas.width = this.width;
|
||||
//
|
||||
this.videoCanvas = document.getElementById('video') as HTMLCanvasElement; //document.createElement('canvas') as HTMLCanvasElement;
|
||||
//document.getElementById('video') as HTMLCanvasElement;
|
||||
this.videoCanvas = document.createElement('canvas') as HTMLCanvasElement;
|
||||
this.videoCtx = this.videoCanvas.getContext('2d');
|
||||
|
||||
this.startCamera();
|
||||
|
|
@ -33,8 +33,8 @@ class Content {
|
|||
async startCamera () {
|
||||
const constraints : MediaStreamConstraints = {
|
||||
video : {
|
||||
width: { ideal: 4096 },
|
||||
height: { ideal: 2160 },
|
||||
width: { ideal: 640 },
|
||||
height: { ideal: 480 },
|
||||
facingMode: 'environment'
|
||||
},
|
||||
audio: false
|
||||
|
|
@ -81,11 +81,11 @@ class Content {
|
|||
}
|
||||
|
||||
if (code !== null && code.binaryData.length === 266) {
|
||||
(document.querySelector('#data') as HTMLDivElement).innerText = code.binaryData.toString();
|
||||
console.dir(code);
|
||||
//(document.querySelector('#data') as HTMLDivElement).innerText = code.binaryData.toString();
|
||||
//console.dir(code);
|
||||
this.display(code.binaryData);
|
||||
} else {
|
||||
console.log('No QR')
|
||||
//console.log('No QR')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -100,6 +100,6 @@ class Content {
|
|||
}
|
||||
}
|
||||
|
||||
(function main () {
|
||||
function start () {
|
||||
new Content();
|
||||
})();
|
||||
};
|
||||
Loading…
Reference in New Issue