Graphics Generated in Loopic and Video Is Laggy and Freezes

I generated a crawl in Loopic and the lower weather section comes out fine but the alert crawl comes out super laggy and freezes occasionally. Why on earth would it do this? When I preview the crawl in Loopic, it displays fine. I used a video from my church as an example of what it does and how progressively worse it gets in the rendering. The video should be attached in the link below (I tried to upload it here but it said it was too big, so it is uploaded to OneDrive). The resolution is 1080p at 60 fps. I do have a graphics card and an I7 processor so my computer is more than capable of doing the job.

UPDATE: I was able to view a stream in ffmpeg. Whenever an HTML template rendering is introduced over a video, the program/stream starts lagging severely.

UPDATE 2: I found out when the lower third plays, its fine. The alert crawl however, with a video or not or if the lower third is displaying or not, the crawl causes Caspar’s renderer to have a fit.

2024-05-20 19-41-47.mp4

What do you use to combine the graphics and the cameras? It looks like it is something PC based like vMix. That sometimes can come to a point, where it is not capable of keeping up with all data (inputs) that you trough at it. If you would use a “standard” video mixer, like an ATEM, that would not happen.

It looks like this is all coming from Caspar from the window border. vMix doesn’t tend to manifest resource overload in this way but I agree it looks like the renderer isn’t able to keep up.

So a simple crawl is too much for the Caspar renderer? The alert crawl basically has two data points. The title and the text.

Another thing I found out is that it snaps out of it when I hit clear and it scrolls normally for half a second then clears.

No, normally not, it depends how you programmed it. The rendering in Caspar is somewhat different, than in a standard browser.

What I really would like to know is, how your workflow is. What is the output used in Caspar? What is the system, that puts the graphic over the video? What is the type of input you use for the graphics and the cameras etc. - Currently thinking about a cause for this is like digging in the dark, as we have no knowledge about the stuff envolved.

@didikunz I totally understand. So here is the workflow. I am using CasparCG to render graphics and send those graphics (and any videos, audio, etc) to a video over IP stream. I will send the commands to it to render graphics with weather data using element keys. The video you guys saw, I was using caspar to play a video and then overlay the weather on top of it. I generated the HTML templates using Loopic. The end result is going to be like how The Weather Channel displays local weather.

If you guys would like the config for my Caspar server, I can get that later today.

Let me know if you need any additional information. Thanks!

Now I understand. Using Caspar to play video and crawl and at the same time use it to render a web-stream is sure too much. That explains also, why it worked with lower thirds, because these are not using that much resources and also do not move constantly, what makes the stream renderer having less work. - Keep in mind, that the video play-out and the stream encoding is done using FFMPEG, that AFAIK only uses the CPU to do it’s stuff.

What I would do for your Weather channel is separate the two: Use Caspar to play the video and the graphics, preferable to a Decklink SDI output and on a second machine take the SDI in and do the stream. - That is why in broadcasting we use multiple machines each for a different task. Sometimes also dedicated hardware like vision mixers etc.

@didikunz Another thing to is that if I did just the crawl, it still would mess up. So if I didn’t have a video playing and I brought the ticker up, it would still have the same effects (only I would see the crawl go a like a low FPS or something like that). When it gets rendered into the preview on loopic, its fine.

That is another story. - By the way: What version of Caspar do you use?

Have you tried outputting to a Decklink or a screen consumer? Does it work then? I still think the encoding is the problem.

@didikunz I did watch it on the output popup that comes up when the caspar server starts and it did show the same issue.

Yes, but you must get rid of the streaming output, to be able to see, if it works without it.

@didikunz I tried it without the stream output and it still did the same exact thing. Even having just the crawl and no background video or any other and it still lagged along. Here is the config file:

<?xml version="1.0" encoding="utf-8"?>

        <log-path disable="false">log/</log-path>
                <screen />
                <system-audio />

@didikunz I have tried a couple things and have noticed that any animations longer than a few frames boggs it down whether a short animation (such as a quick fade in) is fine. I did a test where I had two elements fade (made in loopic), I had the fade interval set to a very long fade in of 1000 (total animation was 1600). With that test, I got it to bog down. Then I changed the fade time to 26 and no matter how many items I had cued it even with audio, video, other html elements going, I couldn’t get it to bog down even with a IP stream going. A weather alert crawl is going to have over 1400 frames because its going to have the full alert text from the National Weather Service.

Hmm, what hardware specs do you have? Do you have a descent GPU and does Caspsr use that? - On startup it lists the devices it uses. Sometimes there is a problem and Caspar uses not the good GPU.

@didikunz I am running a GeForce GTX 1660 graphics card with a Intel I7-8700k processor with 16gb of ram. In my config file it does say enable GPU is set to true with a angle backend of d3d11.

Would you mind answering all of my questions? - every sentence ending with a question mark is a question. :smile:

@didikunz My bad. The GPU is a good one. I am able to play games and stuff without any issues. It should be set to use it per the enable gpu setting being set to true.

Hope that got all of the questions this time. :smile:

I did figure out that there was a bunch of errors that were being thrown in the javascript of the Loopic’s custom code. I fixed that thinking it would correct the rendering. It didn’t. I did notice that in OBS, it runs just fine but any Chrome based browser, the rendering glitches. For some reason, it doesn’t like Chrome at all. From what I have seen, I’m wondering if its a chrome/loopic compatibility issue rather than a Caspar issue?

Here is the OneDrive link to my Loopic file: LocalCastAlertCrawl.loo

I got the basic code from the Loopic crawler example. I did modify it so the background would stay. Crawler | Loopic Documentation

I honestly dont understand the workflow, but from what I understand I agree with Didi, dont stream with CasparCG.
What we use at in daily productions are

  • 1 PC (usually HP Z4 with A400 and NO Decklink) that outputs as NDI CasparCG graphics (1 or more channels)
  • 1 PC as streamer/mixer with vMix or OBS and a decklink-card (HP Z4 with min A4000). This PC combines the videos with CasparCG NDI as “overlays” and streams it to necessery palces or output it as a SDI-signal.
    OBS is the most used streaming-software in the world for a reason and its open source…
    If the problem is the having 2 machines change the CasparCG-pc to for example a RPi4 and install SPX on that and input the SPX as a browser-input(html) in OBS. Usually its not a big job to convert CasparCG graphics to SPX and Loopic can export to SPX-format.