Skip to content

Commit

Permalink
Merge pull request #3 from aras-digital/feature/iframe-added
Browse files Browse the repository at this point in the history 
iframe added
  • Loading branch information
@sefakeremkocakoglu
sefakeremkocakoglu authored Jun 4, 2024
2 parents 39087bb + 5ad4d29 commit 341d64f
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 120 deletions.
16 changes: 16 additions & 0 deletions test.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Page</title>
</head>
<body>
<h1>Ana Sayfa</h1>
<iframe src="zbar-wasm/index.html" style="width: 600px; height: 400px;"></iframe>
<script>
window.addEventListener('message', (event) => {
alert(`İframe'den gelen mesaj: ${event.data.value}`);
}, false);
</script>
</body>
</html>
153 changes: 88 additions & 65 deletions zbar-wasm/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,96 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=0.9">
<style>
.container {
margin-top: 1em;
}
h5, p {
margin-top: 0.5em;
}
label {
display: inline-block;
}
.viewport {
display: inline-block;
position: relative;
width: 100%;
}
img, video {
max-width: 100%;
height: auto;
}
#canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
pre {
font-size: 1.35rem;
white-space: pre-wrap;
word-wrap: break-word;
margin-top: 0;
}
#timing.visible {
display: block;
}
#timing {
display: none;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=0.9">
<style>
.container {
margin-top: 1em;
}

h5,
p {
margin-top: 0.5em;
}

label {
display: inline-block;
}

.viewport {
display: inline-block;
position: relative;
}

img,
video,
#note,
#timing {
max-width: 100%;
}

#imgUrl {
width: 25em;
max-width: 100%;
}

#imgUrl.active {
color: #ffffff;
background-color: #33C3F0;
}

#imgUrl.active~.viewport>#img,
#imgUrl.active~#note,
#imgBtn.button-primary~.viewport>#img,
#videoBtn.button-primary~.viewport>#video,
#timing.visible {
display: block;
}

#canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

#encoding {
margin-right: 1em;
}

pre {
font-size: 1.35rem;
white-space: pre-wrap;
word-wrap: break-word;
margin-top: 0;
}
</style>
</head>

<body>
<div class="container">
<div class="viewport">
<canvas id="canvas"></canvas>
<img id="img" crossorigin="anonymous" style="display:none;">
<video id="video" muted autoplay playsinline></video>
</div>
<h5>Result</h5>
<div class="row">
<pre id="result" class="six columns"></pre>
<div class="six columns">
<div id="timing">
Using <code>OffscreenCanvas</code> for image transfer: <span id="usingOffscreenCanvas"></span><br>
Time since previous scan: <span id="waitingTime"></span> ms<br>
<code>drawImage()</code>: <span id="drawImageTime"></span> ms<br>
<code>getImageData()</code>: <span id="getImageDataTime"></span> ms<br>
<code>scanImageData()</code>: <span id="scanImageDataTime"></span> ms
</div>
</div>
<div class="container">
<div class="viewport">
<canvas id="canvas" style="width: 100%;"></canvas>
<img id="img" crossorigin="anonymous">
<video id="video" muted autoplay playsinline></video>
</div>
<div class="row">
<pre id="result" class="six columns"></pre>

<div class="six columns">
<div id="timing">

</div>
</div>
</div>

<script type="module" src="js/utils.js"></script>
<script type="module" src="js/scanner.js"></script>
<script type="module" src="js/app.js"></script>
</div>

<script src="dist/index.js"></script>
<script src="js/main.js"></script>

</body>
</html>

</html>
130 changes: 75 additions & 55 deletions zbar-wasm/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ let
afterPreviousCallFinished,
requestId = null;

el.usingOffscreenCanvas.innerText = usingOffscreenCanvas ? 'yes' : 'no'


function isOffscreenCanvasWorking() {
Expand All @@ -32,40 +31,70 @@ function formatNumber(number, fractionDigits = 1) {


function detect(source) {
const afterFunctionCalled = performance.now(),
canvas = el.canvas,
ctx = canvas.getContext('2d');
const
afterFunctionCalled = performance.now(),
canvas = el.canvas,
ctx = canvas.getContext('2d');

function getOffCtx2d(width, height) {
if (usingOffscreenCanvas) {
if (!offCanvas || (offCanvas.width !== width) || (offCanvas.height !== height)) {
// Only resizing the canvas caused Chromium to become progressively slower
offCanvas = new OffscreenCanvas(width, height)
}

return offCanvas.getContext('2d')
}
}

canvas.width = source.naturalWidth || source.videoWidth || source.width;
canvas.height = source.naturalHeight || source.videoHeight || source.height;
canvas.width = source.naturalWidth || source.videoWidth || source.width
canvas.height = source.naturalHeight || source.videoHeight || source.height

if (canvas.height && canvas.width) {
const offCtx = getOffCtx2d(canvas.width, canvas.height) || ctx;
const offCtx = getOffCtx2d(canvas.width, canvas.height) || ctx

offCtx.drawImage(source, 0, 0);
offCtx.drawImage(source, 0, 0)

const afterDrawImage = performance.now(),
imageData = offCtx.getImageData(0, 0, canvas.width, canvas.height),
afterGetImageData = performance.now();
const
afterDrawImage = performance.now(),
imageData = offCtx.getImageData(0, 0, canvas.width, canvas.height),
afterGetImageData = performance.now();

zbarWasm.scanImageData(imageData)
return zbarWasm
.scanImageData(imageData)
.then(symbols => {
const afterScanImageData = performance.now();

if (symbols.length > 0) {
const barcodeData = symbols.map(symbol => `${symbol.typeName}: ${symbol.decode()}`).join(', ');
sendBarcodeData(barcodeData); // Taranan barkod verisini Angular uygulamasına gönder
const afterScanImageData = performance.now()

symbols.forEach(symbol => {
const lastPoint = symbol.points[symbol.points.length - 1]
ctx.moveTo(lastPoint.x, lastPoint.y)
symbol.points.forEach(point => ctx.lineTo(point.x, point.y))

ctx.lineWidth = Math.max(Math.min(canvas.height, canvas.width) / 100, 1)
ctx.strokeStyle = '#00e00060'
ctx.stroke()
})

// el.result.innerText = JSON.stringify(symbols, null, 2)
if (symbols[0]?.typeName) {
const decodedValue = symbols[0]?.decode();
//alert(decodedValue)

stopStream()
setTimeout(()=>{
parent.postMessage({ type: 'decodedValue', value: decodedValue }, '*');
window.history.go(-1);
}, 500);
}

updateUI(symbols, afterFunctionCalled, afterDrawImage, afterGetImageData, afterScanImageData, ctx); // UI güncelleme işlemleri
}).catch(error => {
console.error('Error scanning image data:', error);
el.result.innerText = 'Error scanning barcode';
});

afterPreviousCallFinished = performance.now()
})

} else {
el.result.innerText = 'Source not ready';
el.timing.className = '';
return Promise.resolve();

return Promise.resolve()
}
}

Expand All @@ -83,45 +112,36 @@ function detectVideo(active) {
}

function startStream() {
const videoElement = document.getElementById('video');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(function(stream) {
videoElement.srcObject = stream;
videoElement.play();
initBarcodeScanner(videoElement);
if (!requestId) {
navigator.mediaDevices.getUserMedia({
audio: false, video: {
facingMode: 'environment', focusMode: "continuous", width: { ideal: 1280 },
height: { ideal: 720 },
}
})
.catch(function(error) {
console.error("Kamera erişimi sağlanamadı:", error);
});
.then(stream => {
el.video.srcObject = stream
detectVideo(true)
})
.catch(error => {
el.result.innerText = JSON.stringify(error)
el.timing.className = ''
})

} else {
console.error("Bu tarayıcı medya cihazlarına erişimi desteklemiyor.");
detectVideo(false)
}
}

function initBarcodeScanner(video) {
const zbar = new ZBarScanner({
video: video,
onDetected: function(result) {
console.log("Taranan barkod:", result);
alert('Barkod bulundu: ' + result);
// Tarayıcıyı durdur ve gerekiyorsa başka işlemler yap
}
});
zbar.start();
}
document.addEventListener("DOMContentLoaded", function (event) {

document.addEventListener("DOMContentLoaded", function () {
startStream();
startStream()
});
function stopStream() {
cancelAnimationFrame(requestId)
requestId = null;

}
function sendBarcodeData(barcodeData) {
window.parent.postMessage({
type: 'barcode',
data: barcodeData
}, '*');
}
// window.addEventListener('resize', () => {

// });

0 comments on commit 341d64f

Please sign in to comment.