MediaMTX WebRTC camera stream

Get Help Webcams
1

What is the problem?

I can't figure out how to set up OctoPrint's webcam functionality over WebRTC using MediaMTX on a Raspberry Pi 3 (B+) with a camera module.

What did you already try to solve it?

I've already gotten MediaMTX to work really nicely. It also works with Prusa Connect Camera. I've also read most of the following thread Low-Latency H264 Streaming Support w/ WebRTC, but no dice. Can't get the preview to appear.

Are there any examples as to what OctoPrint expects from WebRTC webcams or could I just <iframe> the camera stream somehow instead?

2

Yes you can add an iframe. I was able to create a simple Chrome content script extension that adds the element.

I am not sure what browser you use but I imagine it allows plugins to be developed. Anyways, the core of it is pretty simple:

Hierarchy:

octoprint-mediamtx-extension/
- manifest.json
- content.js
- icon.png

manifest.json:

{
  "manifest_version": 3,
  "name": "OctoPrint MediaMTX Stream Injector",
  "version": "1.0",
  "description": "Injects a MediaMTX WebRTC stream iframe into the OctoPrint webcam section.",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["http://octopi.local/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  "icons": {
    "128": "icon.png"
  }
}

content.js:

// Create and configure the iframe
const iframe = document.createElement('iframe');
iframe.src = 'http://octopi.local:8889/cam'; // Replace with your MediaMTX WebRTC URL
iframe.width = '640'; // Adjust size as needed
iframe.height = '360';
iframe.style.border = 'none';

// Inject the iframe into the webcam container
const targetElement = document.querySelector('#webcam_plugins_container');
targetElement.appendChild(iframe);

Not pretty but works.

3

My webcam iframe plugin wouldn't require injecting anything at all.