after being able to get my canvas called, now it seems like clearRect function does not work. After 3 hours of investigation , i still didin’t find any solution yet.
Please Help, Please
Here is the code
JS
function getCanvas(){
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');
return overlayCC;
}
window.onload = function(){
'use strict';
var overlay = document.getElementById('overlay');
var localVid = document.getElementById('video');
var localVidW = overlay.width;
var localVidH = overlay.height;
var canv = getCanvas();
drawLoop(localVidW, localVidH, overlay, canv);
}
function drawLoop(w, h, overlay, overlayCC){
requestAnimFrame(drawLoop);
overlayCC.clearRect(0, 0, w, h);
if (track.getCurrentPosition()) {
track.draw(overlay);
}
var currentParam = track.getCurrentParameters();
var err = ec.meanPredict(currentParam);
if (err) {
updateData(err);
for (var i=0; i<err.length; i++){
if (err[i].value > 0.4) {
document.getElementById('icon'+(i+1)).style.visibility = 'visible';
}
else {
document.getElementById('icon'+(i+1)).style.visibility = 'hidden';
}
}
}
}```
HTML
It’s indeed not a Meteor question, that is just JS/HTML.
With that said, the line requestAnimFrame(drawLoop); is calling recursively the drawLoop function with no parameters before every next paint so you’re getting undefined errors.
Perhaps you can try something like
window.onload = function(){
'use strict';
var overlay = document.getElementById('overlay');
var localVid = document.getElementById('video');
var localVidW = overlay.width;
var localVidH = overlay.height;
var canv = getCanvas();
requestAnimationFrame(()=> {drawLoop(localVidW,localVidH,overlay, canv)});
}
And remove requestAnimFrame(drawLoop); from the drawLoop method. Also use requestAnimationFrame instead of requestAnimFrame because it’s the actual standard.
Also you won’t get far posting in the forum every syntax issue, you really need to have good handle of the basics before attempting something more advanced.
Meteor is a web framework with built-in real-time capabilities, DB accounts among other things, the main goal is to get your ideas out there quickly so you don’t have to glue many pieces yourself.
But tracking faces is certainly out of the scope of Meteor however there is nothing holding you from using any third-party library or NPM package. The one you’re suggesting look like it’s well maintained, so you can just put the JS in the public folder or you can use something like scriptjs to load the file async. Once you get the facial features/emotions captured then you can use Meteor methods or pub/sub to store/broadcast the data. For example, you can build a simple a chatroom that communicates the emotional state of participants real-time with pub/sub. Something that is relatively easy to do with Meteor and would require more leg work to get it going with other frameworks.
