Web Browser Capture

I’m trying to use the Web Browser capture source with simple Stream Elements overlays and it’s creating huge CPU spikes and occasional crashes. Adding the source to a layer skyrockets the CPU (from about 70% to about 170%) even if the layer is turned off. Deleting it from the layer (without removing the source itself) solves the CPU issue (though of course then I can’t use the source). Am I doing something wrong or is this a known bug?

What framerate does the project have and on what framerate is your monitor configured? I‘m not sure, but I think that the framerate of the WebSource is analogue to your monitor‘s frame rate. Maybe there are none-necessary renderings/scalings also?

Yes, the WebSource is like a ProRes-4444-Video and needs lots of performance.

Framerate for the project is 29.97 and I have no idea what my monitor framerate is … it’s a 27" iMac 2017 with Retina 5K monitor, and Display is set to “Default for Display.”

I think it‘s flickering on 60hz. So, the result has to be converted to 29.97fps. Do you produce for TV? If not, consider to produce in 30 FPS, less render power necessary: it‘s way more easy to drop every second frame instead of mix-calculating every frame. What are the dimensions of your browser capture window? Is it set to 1080p or any other format? The browser source itself: which source-render-dimensions are set? Project size? The Source-window should be set to true dimmensions, also it‘s render dimensions. Try to set everything to 60fps and then bring everything to 30 FPS to explore the differences.

Thanks - that definitely helped in general though the web browser is still pushing mimolive close to crashing. Without the web browser capture in a layer it runs between 69%-115%; as soon as I add a web capture layer that number doubles.

No I don’t do TV and a lot of this stuff is new to me. I’m a DJ streaming over Twitch. I think the reason I put that framerate is I’m using a BlackMagic ATEM capture device for my main camera, and it is hardwired to only use that framerate. Do you know of any guide to best practices for minimizing CPU usage with cameras/video/etc?

Update: I just tested with a different web page and got the same result. CPU spiking from about 150% to about 270%. This is after setting the document framerate to 30.

You didn’t write anything about the window size of your web source, nor anything about the render dimensions of the source. = window size of the browser window.

It is a heay task for any Mac to capture a browser window. Also window-capture is nothing being done so light weight. I strongly suggest to keep the window as tiny as possible.

1 Like

Sorry - I answered that on the other discussion page. My bad for posting in two places about this lol… The browser window is 1920x1080 and unfortunately if I change it to 720p or smaller everything disappears. It’s an overlay window with some dynamically updated information (this is the URL StreamElements). But I had the same problem when I put a different URL in.

Sorry, I missed that. Good, it’s a static layout which is not responsive. So, you’re currently stuck on 1080p, 60fps and a high CPU usage. At least currently, At Source-performance monitor you can see details.

I used it to have a HTML-overlay, which showed a live amount of stars for pupils’ training success. It was very static, but a nice solution.

Hmm is there a link to this? I googled “source performance monitor” but I’m not sure what I’m looking for here.

I’ve actually got everything set to 30fps rather than 60.

It is in mimoLive at the main menu. You have render performance monitor, also source performance monitor and some other stuff. :blush:

Wow I never noticed these; thanks! how did it help you with making an html overlay?


So this is what I see under the source performance monitor when I select the browser capture in a layer. (This is without the layer being “live”). The number “70” in the pic is the number of dropped frames, and it keeps increasing about 3-4 per second (it’s now at about 420 in the time it took to write this).

Are the dropped frames a mimolive issue or is that normal for browser rendering? The image on the browser is static (tho when I am streaming there is chat that appears, so it does update continuously). I guess part of what I don’t understand is why loading an overlay from a browser page is so resource intensive when I can have something like firefox open with 50 tabs open routinely without an issue.

It helped through fine tuning while resizing the window. No, the image isn’t static. It’s a dynamic source which could change every frame and could have a bunch of changing pixels. It’s just not a responsive design and with static dimensions. But resizing does not help you, because your overlay is static in dimensions.

So, you get only a few FPS. It seems to be that your device is in not very powerful in total. mimoLive needs lots of performance between RAM, GPU, CPU and hard drive input/outputs. High CPU and GPU load is typical, especial while capturing dynamic content from inside an invisible window. It’s less performance intensive to capture an area from the desktop, but you’d loose transparency.

Hmmm… Tipps?
Uninstall all software which affects RAM, CPU, GPU and hard drive IOs while running mimoLive. Bottlenecks can be a killer for your projects. Do not use external hard drives. Close remote connections to a NAS or something like that.

Is there something wrong with it?
Hmmmm…. no. It’s rendering live. Try to live render a few 1080p videos in several formats on top of each other in final cut, without using proxy media.

The machine is in iMac with 4.2 GHz Quad-Core i7 and 40Gb of ram, so it should be able to handle this. And when I stream I do a cold restart, and only run the programs I need going, none of which seem processor-intensive. (Mostly sound stuff like LoopBack and Audio Hijack from Rogue Amoeba, an icecast server, VLC (only playing audio stream), butt, and a web browser (Firefox) usually with only 3-4 tabs open. I do have an external HD but mimolive does not access it; everything it needs is located on the internal drive.

It’s funny you ask about rendering videos – I actually have been using the mimoLive source input “Media Playlist” with a folder of short videos. When I use the playlist in a layer it also spikes the CPU, but not as much as the web browser capture seems to. I was actually going to post another topic here asking for best practices with regard to video playlists (e.g. do they all need to be the same length etc. for most efficient display). There are also tons of dropped frames.

Another significant difference with the videos is that they only spike the CPU when they are actually “live” in a layer whereas the web browser capture spikes it even when it is not being displayed. I guess it’s rendering in the background.

Do you have NDI tools installed?
Try capturing safari or chrome website via scan converted and ingest it to your document

Well… then force your machine to things it’s not able to do. You could add an endless amount of isolated recordings too, just for fun. :man_shrugging:t2: And then, there is a bottle neck, suddenly.

@JMVBMW, does it support transparency?

I don’t know what exactly “transparency” means in a website…

Would have to try… can you post an example?

He asked because of a webbased stream overlay with twich comments and a transparent body of the “website”. Alpha channel is no issue, but for the user it results in a heavy CPU usage, also in a low frame rate.

I asked you, because I have no idea how to capture the alpha channel with your suggested solution.

The example is already posted: Web Browser Capture - #7 by bernardo.attias

1 Like

opera

Chrome

Safari

Mimolive window

Can’t see nothing