Help with Embedding RTSP Stream and Capture Photo in WebApp using MediaMTX WebRTC

[rabion1234]

Question

Hello 👋

I am using the WebRTC feature of MediaMTX to stream an IP camera (RTSP) feed, and I am relatively new to coding. I'm working in Visual Studio, and I need help with the following:

Goal:
Display the RTSP camera stream in a custom HTML web page using WebRTC (currently visible at localhost when I run MediaMTX in terminal).

Add a "Capture Photo" button in the webpage to save a snapshot from the live stream.

Current Progress:
MediaMTX is successfully running in terminal.

I can view the stream using the MediaMTX web UI on localhost.

I’m stuck on how to embed that stream into my own HTML file and implement the capture feature.

Questions:
How can I embed the WebRTC stream into my HTML file (outside the default UI)?

Is there an example of how to implement a snapshot/capture button that saves a frame as an image?

Any examples, links, or suggestions will be greatly appreciated. Thank you in advance!

[aler9]

Hello, the documentation contains full instructions on how to embed a WebRTC stream into a web page:
https://mediamtx.org/docs/usage/embed-streams-in-a-website

Regarding screenshot generation, you have to avoid the i-frame based embedding method and use the reader.js method to load the WebRTC stream in a <video> tag in the page. After that, it's trivial:

// Get references to your video and create a canvas
const video = document.getElementById('myvideo');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Set canvas dimensions to match video
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;

// Draw the current video frame onto the canvas
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

// Convert canvas to image (data URL)
const screenshot = canvas.toDataURL('image/png');

// Now you can use the screenshot:
// - Display it in an <img> tag
const img = document.createElement('img');
img.src = screenshot;
document.body.appendChild(img);

// - Or download it
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = screenshot;
link.click();