arcs / arcs.js

Go to a project
Toggle navigation Toggle navigation pinning
Jean-Yves Didier
4a234dd5 1 parent 4dcf440e

update on qrdetectors to use native API if needed

Inline Side-by-side
Showing 10 changed files with 122 additions and 52 deletions
......@@ -12,8 +12,8 @@
<link rel="stylesheet" href="arcs.css">
</head>
<body>
<video id="video" width=640 height=480 autoplay="true"></video>
<body style="margin: 0;">
<video id="video" width=640 height=480 autoplay="true" style="width: 100vw; height: 100vh;"></video>
<div id="contents">
<a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
</div>
......
......@@ -9,7 +9,6 @@
"video" : { "type": "LiveSource", "value": { "video": "video", "facingMode": "environment" }},
"viewer" : { "type": "XRViewer", "value": {
"sessionConfig": {
"requiredFeatures": [ "camera-access"],
"optionalFeatures": [ "local-floor", "dom-overlay" ],
"domOverlay" : { "root": "#container"}
}
......@@ -62,6 +61,7 @@
"init" : {
"preconnections" : [],
"postconnections" : [
{ "destination": "video", "slot": "start", "value": []},
{ "destination": "viewer", "slot": "start", "value": []}
],
"connections" : [
......
......@@ -2,7 +2,8 @@
/**
* Bootstrap for the ARCS engine in a browser environment.
* It relies on require.js to get the job done.
* @file
* @fileaa
*
*/
"use strict";
......
import ARCS from '../build/arcs.js';
let FullscreenManager ;
FullscreenManager = ARCS.Component.create(
function() {
},
[],
[]
);
export default { FullscreenManager: FullscreenManager };
......@@ -3,43 +3,61 @@ import ARCS from '../build/arcs.js';
let QRCodeDetector;
QRCodeDetector = ARCS.Component.create(
function() {
let busy = false;
let dataCache = null;
//let jsqrUrl = new URL('../deps/jsqr/jsQR.js');
const code = `
//import jsQR from '../deps/jsQR.js';
//importScripts('sources/arcs.js/deps/jsqr/jsQR.js');
let jsQR = await import('../deps/jsQR.js');
self.addEventListener("message", e => {
const obj = e.data;
const qrData = jsQR(obj.data, obj.width, obj.height);
self.postMessage(qrData);
});
`;
//const blob = new Blob([code], {type: 'application/javascript'});
//const worker = new Worker(URL.createObjectURL(blob),{type: "module"});
//
const worker = new Worker('../../deps/jsqr/worker.js');
worker.addEventListener("message", ((data) => {
busy = false;
dataCache = data.data;
}));
let self = this;
this.detect= function(imageData) {
if (!busy) {
busy = true;
worker.postMessage(imageData);
}
if (dataCache !== null) {
console.log("qrdata", dataCache);
this.emit('onQRCode', dataCache);
}
};
let makeFromJSQR = function(code) {
return {
id: code.data,
corners: [
code.location.topLeftCorner,
code.location.topRightCorner,
code.location.bottomRightCorner,
code.location.bottomLeftCorner
]
};
};
let makeFromBarcodeReader = function(code) {
return {
id: code.rawValue,
corners: code.cornerPoints
};
};
if (window.BarcodeDetector) {
let detector = new BarcodeDetector();
this.detect= async function(imageData) {
let codes = await detector.detect(imageData);
for(const code of codes) {
if (code.format === 'qr_code') {
console.log(makeFromBarcodeReader(code));
this.emit('onQRCode', makeFromBarcodeReader(code));
}
}
};
} else {
let busy = false;
let dataCache = null;
const worker = new Worker('../../deps/jsqr/worker.js');
worker.addEventListener("message", ((data) => {
busy = false;
dataCache = data.data;
}));
this.detect= function(imageData) {
if (!busy) {
busy = true;
worker.postMessage(imageData);
}
if (dataCache !== null) {
console.log("qrdata", makeFromJSQR(dataCache));
this.emit('onQRCode', makeFromJSQR(dataCache));
}
};
}
},
['detect'],
['onQRCode']
......
......@@ -101,7 +101,19 @@ UIMapper = ARCS.Component.create(
let signalName = s;
let signalDescr = osignals[s];
let domElt = document.querySelector(signalDescr.selector);
let domElt;
switch(signalDescr.selector) {
case "document":
domElt = document;
break;
case "window":
domElt = window;
break;
default:
domElt = document.querySelector(signalDescr.selector);
}
if (domElt) {
domElt.addEventListener(signalDescr.event, self => {
return e => self.emit(s, e)
......
......@@ -22,7 +22,7 @@ var LiveSource, VideoSource;
LiveSource = ARCS.Component.create(
/** @lends LiveSource.prototype */
function (config) {
let context, canvas, video;
let context, canvas, video, imageData;
let _config = config ||{};
let defaultWidth = _config.width || 320;
let defaultHeight = _config.height || 240;
......@@ -58,10 +58,11 @@ LiveSource = ARCS.Component.create(
video.srcObject = stream;
stream.addEventListener('ended', e => console.log('video ended', e));
video.load();
video.onloadedmetadata = e => video.play();
video.onerror = e => console.log('video error', e);
/*video.videoWidth=defaultWidth;
video.videoHeight=defaultHeight;*/
console.log("video started");
self.emit("onReady");
};
......@@ -77,12 +78,28 @@ LiveSource = ARCS.Component.create(
* @emits onReady
*/
this.start = function() {
console.log("call to start");
if (video.srcObject && video.srcObject.active) {
this.stop();
}
/*navigator.mediaDevices.enumerateDevices().
then((devices) => {
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
});
});*/
navigator.mediaDevices.getUserMedia({video: {facingMode: _config.facingMode, width: defaultWidth, height: defaultHeight}})
//navigator.mediaDevices.getUserMedia({video: {facingMode: _config.facingMode}})
.then(handleMediaStream)
.catch(errorMediaStream);
};
this.stop = function() {
video.srcObject.getTracks().forEach(track => track.stop);
};
this.continue = function() {
if (video) {
video.play();
......@@ -114,13 +131,14 @@ LiveSource = ARCS.Component.create(
if (video.readyState === video.HAVE_ENOUGH_DATA) {
console.log('grab');
//console.log('grab :', video.readyState);
context.drawImage(video, 0, 0, canvas.width, canvas.height);
this.emit("onImage",context.getImageData(0, 0, canvas.width, canvas.height));
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
this.emit("onImage",imageData);
}
};
},
['start', 'grabFrame'],
['start','stop','grabFrame'],
['onReady','onImage']
);
......@@ -152,15 +170,17 @@ VideoSource = ARCS.Component.create(
let defaultHeight = _config.height || 240;
if (!_config.video) video = document.querySelector(_config.video);
if (!_config.canvas) canvas = document.querySelector(_config.canvas);
if (!_config.canvas) {
canvas = document.querySelector(_config.canvas);
canvas.style.width = defaultWidth + "px";
canvas.style.height = defaultHeight + "px";
}
video = video|| document.createElement("video");
canvas = canvas || document.createElement("canvas");
canvas.width = video.width = defaultWidth;
canvas.height = video.height = defaultHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
let shadow = document.body;
......
......@@ -146,7 +146,7 @@ XRViewer = ARCS.Component.create(
//console.log(JSON.stringify(renderer.xr.getCamera().position));
let pose = frame.getViewerPose(renderer.xr.getReferenceSpace());
console.log(pose);
//console.log(pose);
/*for (let xrView of pose.views) {
if (xrView.camera) {
console.log("I can see a camera");
......
......@@ -44,5 +44,9 @@
"eslint-webpack-plugin": "^3.0.1",
"jsdoc-webpack-plugin": "^0.3.0",
"val-loader": "^4.0.0"
},
"scripts": {
"build": "webpack --config-name core",
"doc": "webpack --config-name doc"
}
}
......
......@@ -2,7 +2,8 @@
/**
* Bootstrap for the ARCS engine in a browser environment.
* It relies on require.js to get the job done.
* @file
* @fileaa
*
*/
"use strict";
......