Drawing and Taking Snapshots from an RTSP Stream in Node.js using node-rtsp-stream and canvas

Question

I'm working on a Node.js project where I need to draw images from an RTSP stream on a canvas and take snapshots from the drawn canvas. I'm using the node-rtsp-stream library to handle the RTSP stream and the canvas library to create and manipulate the canvas.

I would like to achieve the following tasks in my Node.js project:

Drawing the image from the rtsp stream to the canvas and taking snapshots from the drawn canvas.

Not I got snapshot using '/snapshot' endpoint but it returns me a blank png.

Here is my code

const express = require('express');
const {createCanvas, loadImage} = require('canvas');
const fs = require('fs');
const path = require('path');
const RtspStream = require('node-rtsp-stream');

const app = express();
const port = 3000;

// RTSP stream URL
const rtspUrl =
  'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov';

// Create canvas
const canvas = createCanvas(640, 480);
const ctx = canvas.getContext('2d');

// Function to get snapshot from canvas
function getSnapshot() {
  const snapshotPath = path.join(__dirname, 'snapshots');
  if (!fs.existsSync(snapshotPath)) {
    fs.mkdirSync(snapshotPath);
  }

  const snapshotName = `snapshot_${Date.now()}.png`;
  const snapshotFilePath = path.join(snapshotPath, snapshotName);

  const out = fs.createWriteStream(snapshotFilePath);
  const stream = canvas.createPNGStream();
  stream.pipe(out);

  out.on('finish', () => {
    console.log('Snapshot saved:', snapshotFilePath);
  });

  return snapshotFilePath;
}

// Start RTSP stream and get snapshots
function startRTSPStream() {
  const stream = new RtspStream({
    name: 'rtsp-stream',
    streamUrl: rtspUrl,
    wsPort: 9999, 
  });

  stream.on('data', data => {
    const img = new Image();

    img.onload = () => {
      ctx.drawImage(img, 0, 0, 640, 480);
      const snapshotPath = getSnapshot();
      console.log('Snapshot saved:', snapshotPath);
    };

    img.onerror = err => {
      console.error('Error loading image:', err);
    };

    img.src = data;
  });

  stream.on('error', err => {
    console.error('RTSP stream error:', err);
  });
}

app.get('/snapshot', (req, res) => {
  const snapshotPath = getSnapshot();
  res.json({snapshotPath});
});

startRTSPStream();

app.listen(port, () =>
  console.log(`Server running on http://localhost:${port}`)
);

This part is not working to draw image on canvas:

stream.on('data', data => {
    console.log('Here ->> 2');

    try {
      const img = new Image();

      img.onload = () => {
        console.log('Here ->> 3');

        ctx.drawImage(img, 0, 0, 640, 480);
        const snapshotPath = getSnapshot();
        console.log('Snapshot saved:', snapshotPath);
      };

      img.onerror = err => {
        console.error('Error loading image:', err);
      };

      img.src = data;
    } catch (err) {
      console.error('Error processing image data:', err);
    }
  });

  stream.on('error', err => {
    console.error('RTSP stream error:', err);
  });
}

Could anyone please help me identify the problem and suggest the correct approach to draw the RTSP stream images on the canvas and take snapshots from it?

Any help or guidance would be highly appreciated. Thank you in advance!

Drawing and Taking Snapshots from an RTSP Stream in Node.js using node-rtsp-stream and canvas

0 Answers0