Introducing MMM-YouTubeWebView Module

doctorwhen

I have released the initial version of the MMM-YouTubeWebView MagicMirror module at https://gitlab.com/doctorfree/MMM-YouTubeWebView

This module allows embedding of YouTube videos, either singly or as a list of YouTube video IDs, or as a public YouTube playlist ID. The module uses the Electron webview tag rather than an iframe in an attempt to avert YouTube blocking the requested video for any of several reasons.

The webview tag is used to embed ‘guest’ content in the MagicMirror Electron app. The guest content is contained within the webview container. An embedded page within MagicMirror controls how the guest content is laid out and rendered.

Unlike an iframe, the webview runs in a separate process than MagicMirror. It doesn’t have the same permissions and all interactions between MagicMirror and embedded content will be asynchronous. This keeps MagicMirror safe from the embedded content.

Under the hood webview is implemented with Out-of-Process iframes (OOPIFs).
The webview tag is essentially a custom element using shadow DOM to wrap an
iframe element inside it. So the behavior of webview is very similar to a
cross-domain iframe. As such, it can be used to safely avoid cross-domain
policy restrictions that may prevent access to web content.

This module is based upon both the MMM-WebView module and the MMM-EmbedYoutube module with added functionality. There are some limitations to embedding with webview. These are detailed in the README. There may be a better way to do what I have done here. Possibly I should be using the Electron BrowserView instead. I would be open to suggestion. However, this release does accomplish what I set out to do - I can play my YouTube playlists and lists of YouTube videos without YouTube telling me the video is unavailable which is what I was seeing when using an iframe.

This is the initial release so I expect there will be significant changes in the near term. I’ve thoroughly tested it but expect issues will arise. The module is a work-in-progress and in active development.

Any feedback will be greatly appreciated.

KristjanESPERANTO

Hi @doctorwhen! Thanks for this module! :-)

I tried to get it to run, but it just doesn’t. I don’t get an error message, just a black screen. I am using node version 18 and the latest version of MagicMirror.

Does the module work for you (or for someone else) with current versions?

That’s my config:

{
    module: "MMM-YouTubeWebView",
    position: "middle_center", 
    config: {
      video_id: "w3jLJU7DT5E", 
      video_list: [
        "CtVyl402W5s", 
        "wmUVy43tqw4",
        "J_TxPQKcG7w", 
        "avWZsKyuRVE",
        "IpkIGGJMHBA", 
        "B9zgwx6mhrk",
        "6KvTDeHlIfI"
      ],
      autoplay: true,
      controls: true,
      loop: true,
      modestbranding: true,
      width: "800px",
      height: "450px"
    }
  }

sdetweil

@KristjanESPERANTO if you open the developers window console tab view,
do you see any errors. this module is all in browser

KristjanESPERANTO

if you open the developers window console tab view, do you see any errors. this module is all in browser

Unfortunately, I can’t see any errors there.

Initializing MagicMirror².
translator.js:122 Loading core translation file: translations/en.json
VM4 sandbox_bundle:2 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
  Policy set or a policy with "unsafe-eval" enabled. This exposes users of
  this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
warnAboutInsecureCSP @ VM4 sandbox_bundle:2
translator.js:138 Loading core translation fallback file: translations/en.json
loader.js:165 Load script: modules/default/clock/clock.js
module.js:484 Module registered: clock
loader.js:138 Bootstrapping module: clock
loader.js:165 Load script: vendor/node_modules/moment/min/moment-with-locales.js
loader.js:165 Load script: vendor/node_modules/moment-timezone/builds/moment-timezone-with-data.js
loader.js:165 Load script: vendor/node_modules/suncalc/suncalc.js
loader.js:142 Scripts loaded for: clock
loader.js:180 Load stylesheet: modules/default/clock/clock_styles.css
loader.js:145 Styles loaded for: clock
loader.js:148 Translations loaded for: clock
loader.js:165 Load script: modules/MMM-YouTubeWebView/MMM-YouTubeWebView.js
module.js:484 Module registered: MMM-YouTubeWebView
loader.js:138 Bootstrapping module: MMM-YouTubeWebView
loader.js:142 Scripts loaded for: MMM-YouTubeWebView
loader.js:145 Styles loaded for: MMM-YouTubeWebView
loader.js:148 Translations loaded for: MMM-YouTubeWebView
loader.js:180 Load stylesheet: css/custom.css
clock.js:49 Starting module: clock
module.js:45 Starting module: MMM-YouTubeWebView
main.js:608 All modules started!