NOTE: THIS MAY NOT WORK WITH THE LATEST MAGICMIRRIOR CODE. This is an open source project. That means you have the code to fix issues and that the code, this module, is unsupported. If you need/want help, pay for my time.

Module: MMM-iFrame

The MMM-iFrame module is for MagicMirror. It is a simple way to add an iFrame of any web content to your MagicMirror. Please note that not all websites support being in a iFrame.

Use case examples

Nest Camera streaming

As of right now, Nest Camera only support streaming to iFrame when the camera feed is set to public. When you set it to public, you'll get a live URL and a iFrame embedded URL (should look like https://video.nest.com/embedded/live/wSbs3mRsOF?autoplay=1). Put that url into the config.url[]. For more info, check out this thread https://nestdevelopers.io/t/is-there-a-way-to-get-nest-camera-streams-in-an-iframe/813.

D-Link Camera streaming

D-Link cameras streams can be easily embedded into an iFrame. Some cameras require a username and password. You can construct a URL that looks like this http://admin:password@10.0.1.7/mjpeg.cgi and put it in the config.url[]. For mroe info, check out http://forums.dlink.com/index.php?PHPSESSID=ag1ne0jgnnl7uft3s1ssts14p4&topic=59173.0.

Twitch.tv streaming

Just go to the channel you want and click on share and cut and paste the embed src URL (eg. https://player.twitch.tv/?channel=feedbias_int). For more info, check out https://dev.twitch.tv/docs/v5/guides/embed-video/

Youtube streaming

Just got to the video you want. Click share and embed and pull out the url and add the autoplay parameter (eg. https://www.youtube.com/embed/yw_nqzVfxFQ?autoplay=1).

Using the module

To use this module, add it to the modules array in the config/config.js file:

modules: [
    {
        module: 'MMM-iFrame',
        position: 'bottom_bar', // This can be any of the regions.
        config: {
            // See 'Configuration options' for more information.
                url: ["ENTER IN URL", "ENTER IN URL2"],  // as many URLs you want or you can just ["ENTER IN URL"] if single URL.
                updateInterval: 0.5 * 60 * 1000, // rotate URLs every 30 seconds
                width: "1280", // width of iframe
                height: "720", // height of iframe
                frameWidth: "400" // width of embedded iframe, height is beeing calculated by aspect ratio of iframe
            }
        }
    }
]

Configuration options

The following properties can be configured:

Option	Description
`url`	the URL(s) in the iFrame Example:`["http://example.com/", "http://example2.com", "http://example3.com"]` Default value: `["http://magicmirror.builders/"]`
`updateInterval`	the update internal for the iFrame. Example for 30 seconds:`0.5 * 60 * 1000` Default value: `"0.5 * 60 * 1000"`
`width`	the width of the iFrame Example:`"100%"` Example:`"200px"` Default value: `"100%"`
`height`	the width of the iFrame Example:`"100%"` Example:`"300px"` Default value: `"100px"`

This is an open source project

That means you have the code to fix issues and that the code, this module, is unsupported. If you'd like issues to be fixed, please sponsor fixes using https://issuehunt.io/repos/93804431

alberttwong / MMM-iFrame

readme