foscam streaming

client.html

<canvas height="720" width="1280" id="canvas"></canvas>
<button id="snapshotBtn">snapshot</button>

<script>
    var fragments = [];
    var frames = [];
    var ws = new WebSocket('ws://192.168.1.3:4001');
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var reader = new FileReader();

    ws.binaryType = 'arraybuffer';

    ws.onmessage = function(data) {
      fragments.push(data.data);

      if (
        fragments.length > 2 &&
        data.data.byteLength !== fragments[fragments.length - 2].byteLength
      ) {
        draw();
        fragments = [];
      }
    }

    reader.onload = function(e) {
      var image = new Image();
      image.src = e.target.result;
      image.onload = function() {
        try {
          ctx.drawImage(image, 0, 0);
        } catch(e) {
          console.log('bad image');
        }
      }
    }

    function draw() {
      var bytes = fragments.map(function(f) { return new Uint8Array(f).buffer; });
      var blob = new Blob(bytes, { type: 'image/jpg' });

      frames.push(blob);
      reader.readAsDataURL(blob);
    }

    var snapshotBtn = document.getElementById('snapshotBtn');
    snapshotBtn.addEventListener('click', function() {
      var a = document.createElement('a');
      var lastFrame = frames[frames.length - 1];
      var url = window.URL.createObjectURL(lastFrame);

      a.href = url;
      a.download = 'snapshot.jpg';
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
    });
  </script>

package.json

{
  "name": "streamer",
  "version": "1.0.0",
  "description": "Example streamer for ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ws": "^2.2.2"
  }
}

server.js

const ws = require('ws');
const child_process = require('child_process');

const wsServer = new ws.Server({
  port: 4001,
});

const ffmpeg = child_process.spawn('ffmpeg', [
  '-i', 'rtsp://user:[email protected]:88/videoMain',
  '-f', 'image2pipe',
  '-vf', 'fps=1',
  '-qscale:v', '2',
  '-',
], { detached: false });

ffmpeg.stdout.on('data', data => {
  wsServer.clients.forEach(client => {
    client.send(data, { binary: true });
  });
});

ffmpeg.stderr.on('data', data => {
  console.log(data.toString());
});

ffmpeg.on('error', e => {
  console.log(e);
});

wsServer.on('connection', () => {
  console.log('new connection');
});