UnknownObject/quaggaJS
1
0
Fork 0
mirror of https://github.com/serratus/quaggaJS.git synced 2026-08-12 21:21:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added CanvasSource

Browse Source
This commit is contained in:
Christoph Oberhofer
2017-03-20 16:13:27 +01:00
parent 1494ae62ae
commit e9b14d12f3
1 changed files with 109 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/image-source.html
+109 -25
View File
@@ -28,13 +28,20 @@
<video autoplay></video>
<canvas id="input"></canvas>
<canvas id="output"></canvas>
<canvas id="canvasSourceOutput"></canvas>
<script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
<script>
var imageCapture;
var cameraSource;
var output = {
canvas: document.querySelector('#output'),
ctx: document.querySelector('#output').getContext('2d'),
'CAMERA': {
canvas: document.querySelector('#output'),
ctx: document.querySelector('#output').getContext('2d'),
},
'CANVAS': {
canvas: document.querySelector('#canvasSourceOutput'),
ctx: document.querySelector('#canvasSourceOutput').getContext('2d'),
}
}
// import {fromCamera, fromImage, fromVideo, fromCanvas, fromStream} from 'quagga';
@@ -85,12 +92,39 @@ function determineOrientation() {
});
}
function waitForCanvas(canvas) {
return new Promise((resolve, reject) => {
let attempts = 20;
function checkCanvas() {
if (attempts > 0) {
if (canvas.width > 10 && canvas.height > 10) {
console.log(canvas.width + "px x " + canvas.height + "px");
resolve();
} else {
window.setTimeout(checkCanvas, 200);
}
} else {
reject('Unable to find content on canvas!');
}
attempts--;
}
checkCanvas();
});
}
function printVideoStatistics(video) {
document.querySelector('#videoStatistics').innerHTML = `
<span>${video.videoWidth}</span><span>x</span><span>${video.videoHeight}</span>
`;
}
function printCanvasStatistics(canvas) {
document.querySelector('#videoStatistics').innerHTML = `
<span>${canvas.width}</span><span>x</span><span>${canvas.height}</span>
`;
}
var Source = {
fromCamera: function(constraints) {
if (!constraints) {
@@ -166,6 +200,42 @@ function determineOrientation() {
}
});
});
},
fromCanvas: function(input) {
var $canvas = null;
if (typeof input === 'string') {
$canvas = document.querySelector(input);
} else if (input instanceof HTMLCanvasElement) {
$canvas = input;
} else {
return Promise.reject("fromCanvas needs a selector or HTMLCanvasElement");
}
return waitForCanvas($canvas)
.then(printCanvasStatistics.bind(null, $canvas))
.then(function() {
return {
type: "CANVAS",
getWidth: function() {
return $canvas.width;
},
getHeight: function() {
return $canvas.height;
},
getDrawable: function() {
return $canvas;
},
getLabel: function() {
return $canvas.getAttribute('id');
},
getConstraints: function() {
return {};
},
applyConstraints: function() {
console.log('CanvasSource.applyConstraints not implemented');
}
}
});
}
}
@@ -203,6 +273,11 @@ function determineOrientation() {
ctx = canvas.getContext('2d');
}
if (drawable instanceof HTMLCanvasElement) {
canvas = drawable;
ctx = drawable.getContext('2d');
}
function nextAvailableBuffer() {
var i;
var buffer;
@@ -248,7 +323,9 @@ function determineOrientation() {
console.log('canvas not initialized. Waiting 100ms and then continuing');
return sleep(100).then(grabFrameData);
}
ctx.drawImage(drawable, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
if (!(drawable instanceof HTMLCanvasElement)) {
ctx.drawImage(drawable, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
}
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
var buffer = nextAvailableBuffer();
computeGray(imageData, buffer);
@@ -257,6 +334,9 @@ function determineOrientation() {
height: canvas.height,
data: buffer,
});
},
getSource: function() {
return source;
}
}
}
@@ -286,10 +366,11 @@ function determineOrientation() {
}
function start(pixelCapturer) {
const source = pixelCapturer.getSource();
return pixelCapturer.grabFrameData()
.then(bitmap => {
adjustCanvasSize(bitmap, output.canvas);
drawImage(bitmap, output.ctx);
adjustCanvasSize(bitmap, output[source.type].canvas);
drawImage(bitmap, output[source.type].ctx);
console.log(bitmap.width, bitmap.height, bitmap.data.length);
})
.then(sleep.bind(null, 200))
@@ -342,27 +423,20 @@ function determineOrientation() {
// user code
document.querySelector('#hdReady').addEventListener('click', function(e) {
cameraSource.applyConstraints({width: {ideal: 1280}, height: {ideal: 1280}, facingMode: 'environment'});
});
async function initCameraSource() {
cameraSource = await Source.fromCamera();
const pixelCapturer = PixelCapture.fromSource(cameraSource);
updateVideoDeviceSelection(cameraSource);
start(pixelCapturer);
}
document.querySelector('#camera').addEventListener('click', function(e) {
var constraints = cameraSource.getConstraints();
constraints.facingMode = 'user';
cameraSource.applyConstraints(constraints);
});
Source
.fromCamera()
.then((source) => {
cameraSource = source;
var pixelCapturer = PixelCapture.fromSource(cameraSource);
start(pixelCapturer);
return {source, pixelCapturer};
})
.then(function(opts) {
updateVideoDeviceSelection(opts.source);
});
async function initCanvasSource() {
await initCameraSource();
const canvasSource = await Source.fromCanvas('#input');
const pixelCapturer = PixelCapture.fromSource(canvasSource);
start(pixelCapturer);
}
initCanvasSource();
document.querySelector('#cameraSelect').addEventListener('change', function(e) {
var selectedDeviceId = e.target.value;
@@ -377,6 +451,16 @@ function determineOrientation() {
cameraSource.applyConstraints(oldConstraints);
});
document.querySelector('#hdReady').addEventListener('click', function(e) {
cameraSource.applyConstraints({width: {ideal: 1280}, height: {ideal: 1280}, facingMode: 'environment'});
});
document.querySelector('#camera').addEventListener('click', function(e) {
var constraints = cameraSource.getConstraints();
constraints.facingMode = 'user';
cameraSource.applyConstraints(constraints);
});
// https://www.w3.org/TR/mediacapture-streams/#widl-ConstrainablePattern-getSettings-Settings