CasparCG
Bug: Animation Stuttering with WebM Playback in HTML
Observed Behavior
I'm experiencing an issue where text animations stutter or freeze while playing a WebM video in the background. This occurs specifically when using the HTML template with the following code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
body {
width: 1024px;
height: 576px;
margin: 0px auto;
padding: 0;
background: transparent;
overflow: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
#news {
position: absolute;
top: 14px;
left: 52px;
width: 885px;
height: 57px;
color: wheat;
font-size: 50px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
#inner {
position: absolute;
white-space: nowrap;
transform: scale(0);
will-change: transform;
/* animation: scale 4s linear infinite; */
}
#bg {
position: absolute;
top: 11px;
left: 35px;
width: 925px;
height: 62px;
object-fit: fill;
}
@keyframes scale {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
80% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
</style>
</head>
<body>
<video src="https://files.catbox.moe/a9v502.webm" width="100%" height="100%" id="bg" autoplay loop muted></video>
<div id="main">
<div id="news">
<span id="inner">MEDIATEK'S MOST POWERFUL FLAGSHIP ANDROID CHIP OFFICIALLY ANNOUNCED</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var tl = gsap.timeline({ repeat: -1 });
tl.to('#inner', { scale: 0.96, opacity: 1, duration: 0.5 }, 'label4')
.to('#inner', { scale: 1, duration: 8})
.to('#inner', { scale: 0, opacity: 0, duration: 0.6 })
.to('#inner', { scale: 0,duration: 2 });
});
function play() { }
function stop() { }
function update(str) { }
</script>
</body>
</html>
CasparCG Configuration:
<configuration>
<paths>
<media-path>Media\</media-path>
<log-path disable="false">log/</log-path>
<data-path>data/</data-path>
<template-path>templates\</template-path>
</paths>
<lock-clear-phrase>secret</lock-clear-phrase>
<html>
<remote-debugging-port>8081</remote-debugging-port>
<enable-gpu>true</enable-gpu>
<angle-backend>d3d11</angle-backend>
</html>
<channels>
<channel>
<video-mode>PAL</video-mode>
<channel-layout>stereo</channel-layout>
<consumers>
<decklink>
<device>1</device>
<key-device>1</key-device>
<embedded-audio>true</embedded-audio>
<latency>normal</latency>
<keyer>external</keyer>
<buffer-depth>4</buffer-depth>
</decklink>
</consumers>
</channel>
<channel>
<video-mode>PAL</video-mode>
<channel-layout>stereo</channel-layout>
<consumers>
<decklink>
<device>2</device>
<key-device>1</key-device>
<embedded-audio>true</embedded-audio>
<latency>normal</latency>
<keyer>external</keyer>
<buffer-depth>4</buffer-depth>
</decklink>
<ndi>
<name>ch2</name>
<allow-fields>true</allow-fields>
</ndi>
</consumers>
</channel>
</channels>
<controllers>
<tcp>
<port>5250</port>
<protocol>AMCP</protocol>
</tcp>
</controllers>
<amcp>
<media-server>
<host>localhost</host>
<port>8000</port>
</media-server>
</amcp>
</configuration>
WebM info:
General
Format : WebM
Format version : Version 2
File size : 238 KiB
Duration : 19 s 100 ms
Overall bit rate : 102 kb/s
Frame rate : 50.000 FPS
Writing application : Lavf59.16.100
Writing library : Lavf59.16.100
Video
ID : 1
Format : VP9
Format profile : 0
Codec ID : V_VP9
Duration : 19 s 100 ms
Bit rate : 91.0 kb/s
Width : 720 pixels
Height : 70 pixels
Display aspect ratio : 11.243
Frame rate mode : Constant
Frame rate : 50.000 FPS
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Bits/(Pixel*Frame) : 0.036
Time code of first frame : 00:00:00:00
Time code source : Matroska tags
Stream size : 212 KiB (89%)
Writing library : Lavc59.18.100 libvpx-vp9
Language : English
Default : Yes
Forced : No
Color range : Limited
VENDOR_ID : appl
I've tried disabling GPU acceleration in casparcg which slightly improve performance, but the issue persists.
Additional Observation:
When running the HTML template in CasparCG and enabling Frame Rendering Stats (shows frame per second FPS meter) in Chrome's remote debugging tools, the text animation plays smoothly. However, disabling Frame Rendering Stats causes the animation to stutter again. This observation might provide a clue to the underlying issue.
Expected behaviour
The text animation should play smoothly without any stuttering or freezing. The same HTML file plays smoothly in OBS v30.2.3 and Chrome browser. OBS is using Webgl verified by https://webglreport.com.
Steps to reproduce
- Start CasparCG.
- Load the HTML template containing the animation and WebM video.
- Observe the text animation's behavior.
Environment
- Commit: [Server 2.4.0 31a580f Dev]
- Server version: 2.4
- Operating system: windows 10
- CPU: Intel(R) Xeon(R) CPU E5-2660 v2 @ 2.20GHz 2.20 GHz (2 processors)
- GPU: NVIDIA Quadro K4000
- RAM: 64.0 GB
OBS users are reporting similar issues with CEF after updating obs from version 30.2.3 to 31.0. OBS believes the issue lies in an upstream CEF https://github.com/chromium/chromium/blob/main/media/capture/content/video_capture_oracle.cc#L190.
See related OBS issues: https://github.com/obsproject/obs-browser/issues/468 and https://github.com/obsproject/obs-browser/issues/470.
Similarly, we've encountered issues with CEF after updating CasparCG to version 2.4, which uses CEF 117. CEF functioned flawlessly in the previous versions of OBS v30.2.3 with CEF 103.0.5060. This suggests a potential regression in CEF versions 104 or higher.
it's unclear for me that from which branch this specific line in Chrome was introduced. However, given that OBS experienced no issues with CEF 103.0.5060, testing CasparCG with this specific CEF version as a temporary workaround might be beneficial. This could potentially mitigate the issues we're observing in CasparCG 2.4+ while we await a resolution to the upstream CEF bug.
Hi @Julusian, I'm writing to respectfully request consideration for including a resolution for this issue in the upcoming 2.5 release. This issue is currently blocking my progress and I believe a fix would be greatly appreciated by other users as well.
I'm not really sure what to do about this. Downgrading CEF is not an option, I know that will cause issues for many users as their templates expect a CEF newer than 103.
So if this does need to be fixed on the CEF/Chromium side, I don't know what can be done other than to wait or for someone to try and submit a fix there (building CEF is not a nice task)
I am wondering, does this still happen on the latest 2.5 beta?
What about if you remove the angle-backend?
Thanks for the reply!
I understand that downgrading CEF is not feasible. I've tested the latest 2.5 beta builds and the issue persists. I also tried removing the angle-backend, but unfortunately, the problem remains. As you can see in the videos below:
https://github.com/user-attachments/assets/99ae9e2c-3b5d-48e3-99c6-99bf6b6e8245
https://github.com/user-attachments/assets/4d445036-437c-42e5-ba15-c63eb6b8f7d3
The second video provides a clearer view of the issue. By playing this link, You can see that the video freezes at frames 337, 586, 698, and 947, and so on. This freezing behavior appears to be consistent across all CEF versions after version 103.
Let me know if there's anything else I can do to help troubleshoot or gather more information.
Thanks,
Downgrading CEF is not an option, I know that will cause issues for many users as their templates expect a CEF newer than 103.
@Julusian do you know what's lacking in CEF103 compared to 117?
No. Any discussion I had prior to #1499 will have been on a slack/Jira that I no longer have access to.
I'm subscribed to the various issues in obs/chromium linked here, so will keep an eye on those and once one of them figure out what to do, I shall try and do the same
@Julusian if I wanted to make a 2.4 version with CEF103 for my own use, would it be a lot of work to revert? We do very basic templates and for me smooth playback is much more important than a few missing features.
We do very basic templates and for me smooth playback is much more important than a few missing features.
Many people have been using 2.4 with its CEF117 with varying complexity of templates without issue. So you may well not have an issue.
if I wanted to make a 2.4 version with CEF103 for my own use, would it be a lot of work to revert?
Depends on if you need the shared-texture flow (only valid for windows). If you don't then it should be a case of dropping it in a fixing up a few api changes (the reverse of #1594 and #1499)
I have no idea if that would work well or smoothly, so make sure to test it well.
I'm subscribed to the various issues in obs/chromium linked here, so will keep an eye on those and once one of them figure out what to do, I shall try and do the same
Thank you @Julusian for keeping an eye on this! Much appreciated.
@dimitry-ishenko, if you are planning to build server for Windows, would you be willing to share it with me for testing purposes?
@dimitry-ishenko, if you are planning to build server for Windows, would you be willing to share it with me for testing purposes?
Sure thing.
Reito from OBS initially reported this problem on the Chromium issue tracker (https://issues.chromium.org/issues/391118566). They then developed a solution and submitted it for review (https://chromium-review.googlesource.com/c/chromium/src/+/6232721/4#message-e2de52940a83270a1c64f22b7a776901da0efe00). This fix has been approved and merged.
Wanted to drop by and say this as well, yes - the fix has also been backported to OBS's CEF fork which is still on 127 https://github.com/obsproject/cef/commit/2b7d20b8cdcba6e4e9507a1015b8262515a196c6
Hi, I'm writing to follow up on this issue. I've been a longtime user of CasparCG, and this is something I'm running into right now.
This is a really great and important project, and I understand that you must have a lot on your plate. I'm just checking in to see if there's any progress on this, or if you might have an estimate of when a fix might be available.
Thank you for all your hard work on CasparCG. Your efforts are much appreciated by the community.
Best regards,
I updated CEF to 142 yesterday, and it looks like the stutter issue has gone away.
Could some of you who have had this issue give it a quick test to confirm?
If that is the case, that is the last thing I had on my list to do before 2.5. So I can get it released (be aware there are a couple of changes in master which are being held back for 2.6, but you are unlikely to be using those)
First, thank you for your effort and hard work to resolve the stutter issue.
Unfortunately, the latest master build for Windows (downloaded from https://casparcg.com/builds/CasparCG%20Server/master/casparcg-server-eeeda4adc1d7963fd84e2df5b47b719fe3e08739-windows.zip) is crashing immediately on startup.
I attempted installing the latest Microsoft Visual C++ Redistributable package, but the issue persists.
Last Known Working Build is https://casparcg.com/builds/CasparCG%20Server/master/casparcg-server-f7dcc0322a716c396feb05ecaf1fadbdad9ff423-windows.zip i think which is f7dcc0322a716c396feb05ecaf1fadbdad9ff423 commit.
The server crashes starting from the build based on this commit and subsequent ones https://github.com/CasparCG/server/commit/c04143d7935992dd034c3f6d877a5ae36a993a6cc
Here are my system specifications:
- Operating System: Windows 10 v22H2
- CPU: Intel(R) Xeon(R) CPU E5-2660 v2 @ 2.20GHz (2 processors)
- GPU: NVIDIA Quadro K4000
- Decklink: v12.3
i have tested it on Laptop, i can confirm that the issue is resolved in the latest build.