Skip to content

Webcam configuration

Jump to bottom
Christian Würthner edited this page Jan 26, 2025 · 11 revisions

OctoApp supports a wide range of webcam configurations. All webcam settings are picked up from OctoPrint, Mainsail and Fluidd. There are no webcam settings in OctoApp (except the little settings icon above the webcam view in the app where you can change some visual things).

Tip

You can configure as many webcams as you want and use the "switch" button in the lower left of OctoApp's camera image to switch between the webcams.

Note

The WearOS app only shows single snapshots in a 5s interval. This is due to hardware limitations of the watch.

MJPEG

MJPEG (moving JPEG) is a series of JPEG images. It's the most common and basic way a printer webcam works. You can configure the webcam in OctoPrint/Mainsail/Fluidd, nothing special to be done. Make sure to not mix up the "stream" and "snapshot" URLs!

Caution

MJPEG has very high bandwidth requirement and can drain your phones battery when used with high resolutions. A 1080p image typically requires up to or exceeding 1 MB per frame, with 30 FPS you are trying to transfer around 30MB/s over WiFi. This can saturate your WiFi and cause connection issues to your printer or even for other devices on the WiFi. Naturally, on mobile you can easily burn through your data plan.

Tip

A maximum resolution of 720p and 15 FPS is recommended, requiring around 2MB/s. Make use of OctoApp's data saver option in the settings icon above the webcam.

Platform Supported
Android ✅
iOS ✅

WebRTC

WebRTC offers a real time image with high quality and low latency. It uses less bandwidth than MJPEG due to H.264 encoding (typically). WebRTC is natively supported by Mainsail and Fluidd and using the Camera-Streamer Control plugin on OctoPrint.

Supported WebRTC servers

WebRTC does not have a standardized handshake to begin the connection, so OctoApp needs to support the specific WebRTC server.

  • camerastreamer: via crowsnest on Moonraker and Fluidd, configure with webcam type "WebRTC (camerastreamer)". Via Camera-Streamer Control on OctoPrint, select WebRTC in the plugin settings.
  • go2rtc: Configure in Moonraker and Fluidd with webcam type "go2rtc"
  • Janus: Configure in Moonraker with webcam type "Janus"

camerastreamer with Mainsail or Fluidd

  • Install the latest crowsnest
  • In your crowsnest.conf ensure the mode of your camera is set as mode: camera-streamer
  • Configure your camera in the Mainsail / Fluidd settings as "WebRTC (camerastreamer)"

camerastreamer with OctoPi

  • Requires a OctoPi with "the new camera stack" image, not compatible with other OctoPi images
  • Install the latest Camera-Streamer Control
  • After installation, activate WebRTC mode in the plugin settings

go2rtc with Mainsail or Fluidd

  • Install Install go2rtc and configure your webcam
  • Configure your camera in the Mainsail / Fluidd settings as "WebRTC (go2rtc)"

go2rtc with generic OctoPrint

  • Install go2rtc and configure your webcam
  • Install the Webcam iframe plugin
  • Point the webcam iframe to the go2rtc WebRTC HTML page. Append ?octoAppGo2Rtc to the end of the URL.
  • You now see the go2rtc WebRTC webcam in OctoPrint as embedded webpage (iframe) and in OctoApp

MediaMtx with Mainsail or Fluidd (since 2.2.26)

  • Install Install MediaMtx and configure your webcam
  • Configure your camera in the Mainsail / Fluidd settings as "WebRTC (MediaMtx)"

MediaMtx with generic OctoPrint (since 2.2.26)

  • Install MediaMtx and configure your webcam
  • Install the Webcam iframe plugin
  • Point the webcam iframe to the go2rtc WebRTC HTML page. Append ?octoAppMediaMtx to the end of the URL.
  • You now see the MediaMtx WebRTC webcam in OctoPrint as embedded webpage (iframe) and in OctoApp

Janus

  • Install Janus
  • When using Mainsail make sure to select "WebRTC (Janus)" as webcam type and enter the URL. For OctoPrint enter the URL as the normal Webcam and append ?octoAppJanus to the end of the URL. For Fluidd, configure the URL as any webcam type and also append ?octoAppJanus to the URL.
  • You now see the Janus WebRTC webcam in OctoApp, but there is no support for it in OctoPrint and Fluidd. Consider hosting a HTML webpage to display the Janus WebRTC webcam and configure it using the Webcam iframe plugin
Platform Supported Comment
Android ✅ Since app version 2.1
iOS ✅ Since app version 2.1

iFrame webcam

OctoApp supports showing a webpage in the app that contains the webcam image. This allows you to basically use any webcam solution that can be viewed in a browser. You can configure the webcam as any webcam type in OctoPrint, Mainsail or Fluidd. The URL should point to a HTML document that shows the webcam covering the entire webpage. Make sure to append ?octoAppIframe&octoAppVideoWidth=1280&octoAppVideoHeight=720 to the URL. Replace the values for width and height to allow OctoApp to poperly lay out the webcam in the app's UI. The absolute numbers don't matter, but the aspect ratio must be correct.

Platform Supported Comment
Android ✅ Since app version 2.1
iOS ✅ Since app version 2.1

HLS

HLS is a usually H.264 based live streaming protocol. Compared to MJPEG, HLS offers better picture quality and lower bandwidth consumption. It works by sending video segments to the app which are usually 5 to 10 seconds long. This means there will always be a significant delay in the video. You can configure HLS in OctoPrint/Mainsail/Fluidd by entering a Webcam URL that ends with .m3u8 or .m3u, but there is no native support in the web interfaces. HLS is not supported via OctoEverywhere or ngrok, but you can enable the "Data saver" option in OctoApp which will tell the app to load snapshots from the snapshot URL instead of the video when you are connected via a mobile network and not Wifi.

Note

HLS support might be retired in the future in favor of WebRTC

Platform Supported Comment
Android ✅
iOS ✅ Since app version 2.2.34

RTSP

RTSP is a usually H.264 based live streaming protocol and offers live video without a noticable delay. It is not supported via OctoEverywhere or ngrok, but you can enable the "Data saver" option in OctoApp which will tell the app to load snapshots from the snapshot URL instead of the video when you are connected via a mobile network and not Wifi. To make use of RTSP, enter a URL in the OctoPrint/Mainsail/Fluidd webcam settings that starts with rtsp:// instead of http://.

Note

RTSP support might be retired in the future in favor of WebRTC

Platform Supported Comment
Android ✅
iOS ❌ Not planned

How OctoApp handles webcam URLs and paths

OctoApp reads the webcam URL or path from your Mainsail, Fluidd or OctoPrint settings. As these are webinterfaces running in a browser, OctoApp mirrors the behavior of browsers closely when it comes to resolving a webcam URL.

For the following examples, we assume OctoApp uses http://printer.local:7777/printer to communicate with your printer. The webcam URL can be configured in following ways.

Example A: http://mywebcam.local:8080/mjpeg

In this case, OctoApp identifies the webcam URL to be fully qualified and will use it as given, no modifications are made

Example B: http://localhost:8080/mjpeg

OctoApp assumes that localhost or 127.0.0.1 is not actually localhost (your phone) but the localhost of the printer. OctoApp will replace the host with the host of the URL used to communicate with your printer, in this example the resulting URL would be http://printer.local:8080/mjpeg

Example C: /webcam/?action=stream

This is an incomplete URL and OctoApp will use the parts from the URL that is used to communicate with your printer to complete it. In our example this results in http://printer.local:7777/webcam/?action=stream. Note that the /printer/ part of the URL used to communicate with your printer was removed because the webcam URL starts with a /, so it's treated as an absolute path from the server root.

Example D: webcam/?action=stream

Similar to example C, the URL used to communicate with your printer is used to complete the URL. The webcam URL doesn't start with a /, so it's treated as a relative path to the path of the URL used to communicate with your printer. This results in http://printer.local:7777/printer/webcam/?action=stream

Get OctoApp on the AppStore and Google Play!

Clone this wiki locally