@pyrosmiley I converted the M4V to .webm using ffmpeg (incredible tool btw). Unfortunately, it’s still super choppy. @Nystro0m in a later post suggested converting it to the native resolution, so that will be the next step. That’ll be my last attempt before I stick with the semi-transparent OMXPlayer. My kid is only 11 months old, so I’ve got a couple years before it needs to be “perfect” to scare the hell out of him.

You guys have been awesome. Thanks for all the continued help.

@pyrosmiley said in Ghost Overlay / OMXPlayerTransparency:

@Reotch2 I actually just was dealing with something similar trying to get that module to work as a background!

Right now I have just a picture instead, but it should be the same idea. Put the video file somewhere on the MagicMirror directory - my image is in the CSS file but it doesn’t matter where. That way it’s included in what’s accessible on MM’s webserver that it starts. That way, in the config, you can specify the URL for the file! On mine, the picture bg.jpg is in the CSS folder, so my file listed in the config is "http://127.0.0.1:8080/css/bg.jpg".

The biggest issue with this is that AFAIK it’s liable to get erased in updates to the MagicMirror framework, since I’m pretty sure the only two files that don’t get touched are config.js and custom.css. I’m also pretty sure that someone smarter than I has figured out a great way to get around that. BUt, since it’s just for halloween it’s probably temporary anyways so hopefully this gets you up and going.
PS that is a cool as hell idea!

@pyrosmiley This was the fix. You and @Nystro0m nailed it. Unfortunately after all that work, the video gets choppy when run within MM. I’m going to toy with some of my RPI-3 overclock settings, but if that doesn’t work, I’m just going to stick with OMXPlayer and dimmed modules. :(

Thanks for the help.

@cowboysdude I’d really love to, and in my younger/bolder days it’d probably already be posted; unfortunately it’s not worth risking the Copyright issues. Sorry man.

@Nystro0m This finally worked. Unfortunately, it turns out running the video as a module within electron is super “clunky” on my RPI-3. OMXplayer seemed to play the video flawlessly.

It’s really unfortunate, because although it was choppy, it was BEAUTIFUL. Are there any overclocking options or MM tweaks that may improve embedded video quality? (yes… now I’m getting greedy).

Also, as an amateur mirror-ist(?), how would I have found the MMM-htmlvideo since it wasn’t published on the module page?

Really appreciate the help

@jasondreher Running a pi3, no overclock.

@Nystro0m said in Ghost Overlay / OMXPlayerTransparency:

@Reotch2 Have you tried to make the position of the module behind the modules, or play it as a background? So the other modules is on top?
In that case you dont need any alpha.
Position the module with OMXPlayer:
fullscreen_below

Also this module may help with that, if you could trigger the module with PIR:
https://github.com/brobergp/MMM-htmlvideo

@Nystro0m Is there a workaround to reference a local file? I’m running the same issue I did with MMM-Podcast.

@Nystro0m I’ll definitely give this a shot. I’m using a local file and previously had issues because of JS sandboxing. Not sure how I missed this module, this may be what I’ve been looking for. I’ll report back if it works.

@nobita @jasondreher So… I’m not what they call a “coder”… haha. I wish I knew how to write javascript, but the best I can do is re-purpose everyone else’s modules. Put simply, I looked into using an I-Frame, or MMM-Podcast, but had trouble referencing a local video file. After having NO success adding a video player module, I decided to run a transparent full-screen video on–top of the magic mirror page, which actually worked better than I hoped. Although the black portions of the video dim the modules slightly, the way the white portions interact with the modules beneath it adds a certain cool-factor.

After some trial and error… I did the following:

1. Bought the “Ghostly Apparitions” DVD at a local thrift shop. Amazon link
2. Combined the highest resolution vertical scenes into a single m4v.
3. Edited the node_player.js for MMM-PIR-Sensor to include omxplayer. This ensures that when the screen is activated, the video is played with the appropriate flags.
   exec(“/opt/vc/bin/tvservice --preferred && chvt 6 && chvt 7”, null); exec(“omxplayer ~/Videos/Ghost.m4v --alpha 80”)
4. Alternatively, you can just modify the start script to continuously loop the ghost video of your choosing.

If you need any further details, feel free to ask. But again, I’m a tinkerer… and I’m sure there are 1000 better ways to do this, but this works for me.

-Rich

@Nystro0m No luck so far. I appreciate you taking the time with the test videos. Looks like OMXPlayer’s layer and alpha functionality can’t recognize an actual alpha layer. I think OMXPlayer treats alpha as a generic term for the player’s overall transparency. I’ll do a little more digging. In the meantime, I’ve dropped the transparency to about 80/255 (31%-ish), and it’s a good enough balance between “ghostly” and keeping the modules functional.

Sorry it took so long to post the image. This is what I’m trying to do; however, the Black background of the black/white “Ghost” video, dims all of the modules even at alpha 100.

Any help would be appreciated,
Rich

Larger Video

Hey all,

I’m trying to find a better solution for a halloween “ghost overlay”. My current setup is activated by modifying the MMM-PIR-Sensor node_helper to exec(“omxplayer /Videos/Ghost.m4v” --alpha 100") when the screen is activated. This works… BUT… obviously dims the other modules since the video is on top. Any thoughts on how to better show a full-screen M4V without losing module brightness? Any successes with transparent backgrounds overlaid ON-TOP of videos?

Video of current setup attached.

Thanks ahead of time.
-Rich

@nagaculun

Try using @FredSWG fix above. The custom.css works great for me.

@Reotch2 So… I’m an idiot. The static link for SimpleLogo worked fantastic… AFTER… I mod’d the SetInterval function to have a “&” instead of the “?”. now the camera works perfectly. Put simply… use SimpleLogo… use the Foscam static link above to pull a JPEG… update the MMM-SimpleLogo.js Start Function as follows.

start: function() {
if (this.config.refreshInterval > 0) {
var self = this;
setInterval(function() {
img = document.querySelector(‘.simple-logo__container img’);
img.setAttribute(‘src’, self.config.fileUrl + ‘&’ + Date.now());
}, this.config.refreshInterval);
}
},

After purchasing a FOSCAM R2, I dug further into the forum and discovered it’s not supported by the IP-Cam module. Even though I’m unable to stream realtime video, I’ve discovered I can use a “Snap” static link to get a realtime JPEG.

http://ip address:port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=admin&pwd=xxx

With a static link and interval updates, Simple-Logo is the perfect module for the job. Unfortunately, after the initial load, the SimpleLogo code returns a broken image link icon. After placing an “self.updateDom()” command in the start function section and removing the timestamp code, I’ve gotten the SimpleLogo code to work, but only when viewing it remotely through the (Remote) module. In other words, the picture updates at the appropriate interval on my phone. BUT, not on the mirror running MM through electron. On the mirror, the image is static and doesn’t update.

ANY help would be greatly appreciated. The modified SimpleLogo Start: Function() is below.

start: function() {
if (this.config.refreshInterval > 0) {
var self = this;
setInterval(function() {
var img = document.querySelector(‘.simple-logo__container’);
img.setAttribute(‘src’, this.config.fileUrl);
self.updateDom();
}, this.config.refreshInterval);

    }
},

Thanks ahead of time.