[Webcam] Add an option to embed a webcam stream using iframe

[scmanjarrez]

Requested feature:

Add a new option in the webcam settings to create an iframe which just loads a URL with the streaming, shifting the cpu usage to the web browser instead of the mainsail host.

Solves the following problem:

I've been tinkering with go2rtc and achieved a no-delay stream (http://192.168.1.38:1984/stream.html?src=yicam), however when I try to add the stream to mainsail, the only options are mjpeg or ipcam which add around 5-15s of delay (using mp4 in go2rtc, webrtc don't work, and ipcam adds delay as well).

Additional information:

No response

[scmanjarrez]

PoC

2023-05-21.14-31-53.mp4

[meteyou]

i dont think that iframe is a good integration for that. pls checkout the last PRs about webcam clients.

[scmanjarrez]

To whoever interested in a workaround:

• Create a webcam in mainsail with the urls for stream and snapshot and choose HLS Stream. (This webcam won't load, but we need the node created in the webpage)
• Install a userscript addon in your browser: tampermonkey, greasemonkey, violentmonkey etc
• Create a userscript with the following content:

// ==UserScript==
// @name        Mainsail webcam
// @namespace   Violentmonkey Scripts
// @match       http://your_mainsail_machine_ip:7126/
// @grant       none
// @version     1.0
// @author      scmanjarrez
// @description 5/21/2023, 4:40:59 PM
// ==/UserScript==

(function() {
    'use strict';

    // Function to replace the video tag with an iframe
    function replaceVideoWithIframe() {
        var videoElement = document.querySelector('div[data-v-4abc3b36] video.webcamImage');

        if (videoElement) {
            var videoSrc = videoElement.src;
            var iframeElement = document.createElement('iframe');

            iframeElement.src = "http://your_go2rtc_machine_ip:1984/stream.html?src=your_cam_name";
            iframeElement.allow = 'autoplay';
            iframeElement.muted = true;
            iframeElement.style.transform = 'none';
            iframeElement.style.aspectRatio = '1.77778 / 1';
            iframeElement.style.maxHeight = '345px';
            iframeElement.style.width = '100%';
            iframeElement.classList.add('webcamImage');

            videoElement.parentNode.style.height = '300px';

            videoElement.parentNode.replaceChild(iframeElement, videoElement);
        }
    }

    // Wait for the DOM to be loaded
    window.addEventListener('DOMContentLoaded', function() {
        setTimeout(replaceVideoWithIframe, 5000);
    });
})();

Also, in your go2rtc.yaml configuration add the following setting to allow CORS policy:

api:
  origin: "*"

If you're using docker like me, mount a folder like this: -v $PWD/config:/config and then create
the file go2rtc.yaml in the folder config.

Don't forget to update your_mainsail_machine_ip in userscript @match and your_go2rtc_machine_ip
in iframe.src

If the iframe is not created, try to increase the timeout setTimeout(replaceVideoWithIframe, 5000);. I'm using 5 seconds, but increase it to something like 10.

PoC:

2023-05-21.17-39-36.mp4

[vajonam]

@scmanjarrez this works so much better than all the WebRTC options that are in mainsail at the moment for go2rtc
. Iframe removes the issues with CORS which is a pain to setup when dealing with reverse proxies.. so this is great!