Giter VIP home page Giter VIP logo

mmm-iframe's Introduction

ko-fi

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:[email protected]/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

mmm-iframe's People

Contributors

alberttwong avatar marcobiedermann avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.