title: face-api and tensorflow.js not working in browser
body: <p>I'm trying to run this example in the browser</p>
  <p><a href="https://justadudewhohacks.github.io/face-api.js/docs/index.html#getting-started-browser" rel="nofollow noreferrer">https://justadudewhohacks.github.io/face-api.js/docs/index.html#getting-started-browser</a></p>
  <p>Specifically this code here</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script src=&quot;assets/face-api.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/commons.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/faceDetectionControls.js&quot;&gt;&lt;/script&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;assets/styles.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-2.1.1.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;navbar&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;center-content page-container&quot;&gt;
  
      &lt;div class=&quot;progress&quot; id=&quot;loader&quot;&gt;
        &lt;div class=&quot;indeterminate&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style=&quot;position: relative&quot; class=&quot;margin&quot;&gt;
        &lt;video onloadedmetadata=&quot;onPlay(this)&quot; id=&quot;inputVideo&quot; autoplay muted playsinline&gt;&lt;/video&gt;
        &lt;canvas id=&quot;overlay&quot; /&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;row side-by-side&quot;&gt;
  
        &lt;!-- face_detector_selection_control --&gt;
        &lt;div id=&quot;face_detector_selection_control&quot; class=&quot;row input-field&quot; style=&quot;margin-right: 20px;&quot;&gt;
          &lt;select id=&quot;selectFaceDetector&quot;&gt;
            &lt;option value=&quot;ssd_mobilenetv1&quot;&gt;SSD Mobilenet V1&lt;/option&gt;
            &lt;option value=&quot;tiny_face_detector&quot;&gt;Tiny Face Detector&lt;/option&gt;
          &lt;/select&gt;
          &lt;label&gt;Select Face Detector&lt;/label&gt;
        &lt;/div&gt;
        &lt;!-- face_detector_selection_control --&gt;
  
        &lt;!-- check boxes --&gt;
        &lt;div class=&quot;row&quot; style=&quot;width: 220px;&quot;&gt;
          &lt;input type=&quot;checkbox&quot; id=&quot;hideBoundingBoxesCheckbox&quot; onchange=&quot;onChangeHideBoundingBoxes(event)&quot; /&gt;
          &lt;label for=&quot;hideBoundingBoxesCheckbox&quot;&gt;Hide Bounding Boxes&lt;/label&gt;
        &lt;/div&gt;
        &lt;!-- check boxes --&gt;
  
        &lt;!-- fps_meter --&gt;
        &lt;div id=&quot;fps_meter&quot; class=&quot;row side-by-side&quot;&gt;
          &lt;div&gt;
            &lt;label for=&quot;time&quot;&gt;Time:&lt;/label&gt;
            &lt;input disabled value=&quot;-&quot; id=&quot;time&quot; type=&quot;text&quot; class=&quot;bold&quot;&gt;
            &lt;label for=&quot;fps&quot;&gt;Estimated Fps:&lt;/label&gt;
            &lt;input disabled value=&quot;-&quot; id=&quot;fps&quot; type=&quot;text&quot; class=&quot;bold&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- fps_meter --&gt;
  
      &lt;/div&gt;
  
  
      &lt;!-- ssd_mobilenetv1_controls --&gt;
      &lt;span id=&quot;ssd_mobilenetv1_controls&quot;&gt;
        &lt;div class=&quot;row side-by-side&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;label for=&quot;minConfidence&quot;&gt;Min Confidence:&lt;/label&gt;
            &lt;input disabled value=&quot;0.5&quot; id=&quot;minConfidence&quot; type=&quot;text&quot; class=&quot;bold&quot;&gt;
          &lt;/div&gt;
          &lt;button
            class=&quot;waves-effect waves-light btn&quot;
            onclick=&quot;onDecreaseMinConfidence()&quot;
          &gt;
            &lt;i class=&quot;material-icons left&quot;&gt;-&lt;/i&gt;
          &lt;/button&gt;
          &lt;button
            class=&quot;waves-effect waves-light btn&quot;
            onclick=&quot;onIncreaseMinConfidence()&quot;
          &gt;
            &lt;i class=&quot;material-icons left&quot;&gt;+&lt;/i&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/span&gt;
      &lt;!-- ssd_mobilenetv1_controls --&gt;
  
      &lt;!-- tiny_face_detector_controls --&gt;
      &lt;span id=&quot;tiny_face_detector_controls&quot;&gt;
        &lt;div class=&quot;row side-by-side&quot;&gt;
          &lt;div class=&quot;row input-field&quot; style=&quot;margin-right: 20px;&quot;&gt;
            &lt;select id=&quot;inputSize&quot;&gt;
              &lt;option value=&quot;&quot; disabled selected&gt;Input Size:&lt;/option&gt;
              &lt;option value=&quot;128&quot;&gt;128 x 128&lt;/option&gt;
              &lt;option value=&quot;160&quot;&gt;160 x 160&lt;/option&gt;
              &lt;option value=&quot;224&quot;&gt;224 x 224&lt;/option&gt;
              &lt;option value=&quot;320&quot;&gt;320 x 320&lt;/option&gt;
              &lt;option value=&quot;416&quot;&gt;416 x 416&lt;/option&gt;
              &lt;option value=&quot;512&quot;&gt;512 x 512&lt;/option&gt;
              &lt;option value=&quot;608&quot;&gt;608 x 608&lt;/option&gt;
            &lt;/select&gt;
            &lt;label&gt;Input Size&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;label for=&quot;scoreThreshold&quot;&gt;Score Threshold:&lt;/label&gt;
            &lt;input disabled value=&quot;0.5&quot; id=&quot;scoreThreshold&quot; type=&quot;text&quot; class=&quot;bold&quot;&gt;
          &lt;/div&gt;
          &lt;button
            class=&quot;waves-effect waves-light btn&quot;
            onclick=&quot;onDecreaseScoreThreshold()&quot;
          &gt;
            &lt;i class=&quot;material-icons left&quot;&gt;-&lt;/i&gt;
          &lt;/button&gt;
          &lt;button
            class=&quot;waves-effect waves-light btn&quot;
            onclick=&quot;onIncreaseScoreThreshold()&quot;
          &gt;
            &lt;i class=&quot;material-icons left&quot;&gt;+&lt;/i&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/span&gt;
      &lt;!-- tiny_face_detector_controls --&gt;
  
    &lt;/body&gt;
  
    &lt;script&gt;
      let forwardTimes = []
      let withBoxes = true
  
      function onChangeHideBoundingBoxes(e) {
        withBoxes = !$(e.target).prop('checked')
      }
  
      function updateTimeStats(timeInMs) {
        forwardTimes = [timeInMs].concat(forwardTimes).slice(0, 30)
        const avgTimeInMs = forwardTimes.reduce((total, t) =&gt; total + t) / forwardTimes.length
        $('#time').val(`${Math.round(avgTimeInMs)} ms`)
        $('#fps').val(`${faceapi.utils.round(1000 / avgTimeInMs)}`)
      }
  
      async function onPlay() {
        const videoEl = $('#inputVideo').get(0)
  
        if(videoEl.paused || videoEl.ended || !isFaceDetectionModelLoaded())
          return setTimeout(() =&gt; onPlay())
  
  
        const options = getFaceDetectorOptions()
  
        const ts = Date.now()
  
        const result = await faceapi.detectSingleFace(videoEl, options).withFaceExpressions()
  
        updateTimeStats(Date.now() - ts)
  
        if (result) {
          const canvas = $('#overlay').get(0)
          const dims = faceapi.matchDimensions(canvas, videoEl, true)
  
          const resizedResult = faceapi.resizeResults(result, dims)
          const minConfidence = 0.05
          if (withBoxes) {
            faceapi.draw.drawDetections(canvas, resizedResult)
          }
          faceapi.draw.drawFaceExpressions(canvas, resizedResult, minConfidence)
        }
  
        setTimeout(() =&gt; onPlay())
      }
  
      async function run() {
        // load face detection and face expression recognition models
        await changeFaceDetector(TINY_FACE_DETECTOR)
        await faceapi.loadFaceExpressionModel('/')
        changeInputSize(224)
  
        // try to access users webcam and stream the images
        // to the video element
        const stream = await navigator.mediaDevices.getUserMedia({ video: {} })
        const videoEl = $('#inputVideo').get(0)
        videoEl.srcObject = stream
      }
  
      function updateResults() {}
  
      $(document).ready(function() {
        renderNavBar('#navbar', 'webcam_face_expression_recognition')
        initFaceDetectionControls()
        run()
      })
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Unfortunately this is not working ( I have loaded the associated libraries into assets, i.e., <a href="https://github.com/justadudewhohacks/face-api.js/tree/master/dist" rel="nofollow noreferrer">https://github.com/justadudewhohacks/face-api.js/tree/master/dist</a> and moving the other files from this example here</p>
  <p><a href="https://github.com/justadudewhohacks/face-api.js/tree/master/examples/examples-browser" rel="nofollow noreferrer">https://github.com/justadudewhohacks/face-api.js/tree/master/examples/examples-browser</a></p>
  <p>What am i doing wrong? I am loading this on a page on my site here</p>
  <p><a href="https://moodmap.app/webcamFaceExpressionRecognition.html" rel="nofollow noreferrer">https://moodmap.app/webcamFaceExpressionRecognition.html</a> in case you want to see what's happening in the browser.</p>
  <h3>Based on changes below,</h3>
  <p>Here is the node server where I am setting where things are held - is it possible to just change this instead? As it is coming up with a separate issue with the shard needed in the model as well now when making the changes suggested below.</p>
  <p>Thanks!</p>
  <pre><code>const config = require('../../config');
  
  const express = require('express');
  const app = express();
  const server = require('http').createServer(app);
  const io = require('socket.io')(server, { wsEngine: 'ws' });
  const mysql = require('mysql');
  const expressSession = require('express-session');
  const ExpressMysqlSessionStore = require('express-mysql-session')(expressSession);
  const sharedsession = require('express-socket.io-session');
  const path = require('path');
  
  const utils = require('./utils');
  
  // remove from header &quot;X-Powered-By: Express&quot;
  app.disable('x-powered-by');
  
  server.listen(config.serverParams.port, config.serverParams.address, () =&gt; {
      console.log(`Server running at http://${server.address().address}:${server.address().port}`);
  });
  
  /* DATABASE */
  global.db = mysql.createConnection(config.db);
  db.connect();
  /* DATABASE */
  
  /* SESSION */
  const sessionStore = new ExpressMysqlSessionStore(config.sessionStore, db);
  const session = expressSession({
      ...config.session,
      store: sessionStore,
  });
  app.use(session);
  /* SESSION */
  
  app.use(express.static(config.frontendDir));
  app.use(express.static(path.join(__dirname, './src/assets')))
  app.use(express.static(path.join(__dirname, './src/assets/weights')))
  
  app.use((req,res,next)=&gt;{
      //can reaplce * with website we want to allow access
      res.header('Access-Control-Allow-Origin', '*');
    next();
    });
  
  app.get([
      '/signup',
      '/stats',
      '/pay',
  ], (req, res) =&gt; res.sendFile(path.join(`${config.frontendDir}${req.path}.html`)));
  
  io.use(sharedsession(session, {
      autoSave: true
  }));
  
  io.on('connection', socket =&gt; {
  
      socket.use((packet, next) =&gt; {
          if (packet[0]) {
              console.log('METHOD:', packet[0]);
              const sessionData = socket.handshake.session.user;
              const noSessionNeed = [ 'login', 'signup', 'checkAuth' ].includes(packet[0]);
              let error;
              if ( ! sessionData &amp;&amp; ! noSessionNeed) error = { code: -1, message: 'You need to login in extension!' };
              if (error) return next(new Error(JSON.stringify(error)));
              else next();
          }
      });
  
      const auth = require('./auth')(socket);
      socket.on('checkAuth', auth.checkAuth);
      socket.on('login', auth.login);
      socket.on('signup', auth.signup);
      socket.on('logout', auth.logout);
  
      const users = require('./users')(socket);
      socket.on('users.get', users.get);
  
      const sentiment = require('./sentiment')(socket);
      socket.on('sentiment.get', sentiment.get);
      socket.on('sentiment.set', sentiment.set);
  
      socket.on('disconnect', () =&gt; {
  
      });
  
  });
  </code></pre>
  <p>Reason being still getting an error for some reason as below,?</p>
  <pre><code>fetchOrThrow.ts:11 Uncaught (in promise) Error: failed to fetch: (404) , from url: https://moodmap.app/assets/tiny_face_detector_model-weights_manifest.json
      at fetchOrThrow.ts:11
      at step (drawContour.ts:28)
      at Object.next (drawContour.ts:28)
      at fulfilled (drawContour.ts:28)
  (anonymous) @   fetchOrThrow.ts:11
  step    @   drawContour.ts:28
  (anonymous) @   drawContour.ts:28
  fulfilled   @   drawContour.ts:28
  async function (async)      
  run @   webcamFaceExpressionRecognition.html:142
  (anonymous) @   webcamFaceExpressionRecognition.html:158
  j   @   jquery-2.1.1.min.js:2
  fireWith    @   jquery-2.1.1.min.js:2
  ready   @   jquery-2.1.1.min.js:2
  I   @   jquery-2.1.1.min.js:2
  </code></pre>
  <p>Thanks in advance!</p>