How to listen to RTSP endpoint in a browser setting??

[ceyxasm]

Question

I have created and published a stream to an RTSP endpoint using mediamtx and ffmpeg.
I am also able to listen to it and capture frames and save them locally via:
ffmpeg -rtsp_transport tcp -i rtsp://localhost:8554/mystream -frames:v 1 output.jpg
But when I try to do the same in a browser environment; websocket connection is refused.

Here I am trying to just validate an RTSP EP

  async validateRTSPConnection() {
    try {
      const ffmpeg = createFFmpeg({
        corePath: "https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js", // Updated core path
        log: true
      });
  
      // Add a timeout for loading
      const loadTimeout = new Promise((_, reject) => 
        setTimeout(() => reject(new Error('FFmpeg load timeout')), 10000)
      );
  
      await Promise.race([ffmpeg.load(), loadTimeout]);
      console.log('Loading successful');
  
      const ffmpegCommand = [
        "-rtsp_transport", "tcp",
        "-i", "rtsp://127.0.0.1:8554/mystream",
        "-t", "5",
        "-f", "null",
        "-"
      ];
  
      await ffmpeg.run(...ffmpegCommand);
      console.log('Command run successful');
      return true;
    } catch (error) {
      console.error('Detailed Error:', {
        message: error.message,
        stack: error.stack,
        name: error.name
      });
      return false;
    }
  }

And while the function returns true

If I proceed to take snapshots, I get null

[asturl]

Unless that FAQ is outdated and you're going by some working example, I don't see how

https://ffmpegwasm.netlify.app/docs/faq/#is-rtsp-supported-by-ffmpegwasm