ar drone with browser face detection

client.js

const socket = io.connect();

const detector = new FaceDetector();

let face;
//deal with raw png data.
socket.on('png', function (packet) {
  if(packet.data) {
    const dataUrl = 'data:image/png;base64,' + packet.data;
    const img = new Image();
    img.src = dataUrl;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext("2d");

    console.log('img', packet.data.length);
    img.onload = () => {
      canvas.height = img.height;
      canvas.width = img.width;
      ctx.drawImage(img, 0, 0);
      detector.detect(img)
        .then((faces) => {
          console.log('faces', faces);
          faces.forEach((detectedFace) => {
            face = detectedFace.boundingBox;
            console.log()
          })
        })

      if(face) {
        ctx.strokeStyle = "#FFFF00";
        ctx.fillStyle = "#FFFF00";
        ctx.strokeRect(face.x, face.y, face.width, face.height);
        // ctx.stroke();
      }

    };
    
    //document.body.appendChild(img);
  }

});

server.js

const express = require('express');
const path = require('path');
const favicon = require('static-favicon');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const socketIo = require('socket.io');
const arDrone = require('ar-drone');

const routes = require('./routes/index');
const users = require('./routes/users');

const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

/// catch 404 and forward to error handler
app.use(function(req, res, next) {
    const err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

app.set('port', process.env.PORT || 3000);

const server = app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + server.address().port);
});
const io = socketIo(server);

const client  = arDrone.createClient({frameRate: 2});
const pngStream = client.getPngStream();

io.on('connection', function (socket) {
    pngStream.on('data', function(data) {
        if(data) {
            console.log('stream data', data.length)
            socket.emit('png', {data: data.toString('base64')});
        }
 
    });
  });