Bug: Animation Stuttering with WebM Playback in HTML #1583

oneisb · 2024-10-11T11:49:15Z

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/gsap@3.12.5/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

The text was updated successfully, but these errors were encountered:

oneisb · 2025-01-21T15:20:04Z

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: obsproject/obs-browser#468 and obsproject/obs-browser#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.

oneisb · 2025-01-24T11:34:29Z

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.

Julusian · 2025-01-24T11:57:28Z

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?

oneisb · 2025-01-24T12:53:36Z

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:

test.2.5.mp4

test.frames.mp4

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,

dimitry-ishenko · 2025-01-24T17:46:38Z

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?

Julusian · 2025-01-24T19:56:28Z

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

dimitry-ishenko · 2025-01-24T20:14:24Z

@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.

Julusian · 2025-01-24T20:38:20Z

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.

oneisb · 2025-01-25T10:24:17Z

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 · 2025-01-25T18:17:16Z

@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.

oneisb · 2025-02-11T10:51:51Z

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.

Lordmau5 · 2025-02-11T11:50:15Z

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
obsproject/cef@2b7d20b

oneisb added the type/bug label Oct 11, 2024

Julusian added the html label Jan 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug: Animation Stuttering with WebM Playback in HTML #1583

Bug: Animation Stuttering with WebM Playback in HTML #1583

oneisb commented Oct 11, 2024 •

edited

Loading

oneisb commented Jan 21, 2025

oneisb commented Jan 24, 2025

Julusian commented Jan 24, 2025

oneisb commented Jan 24, 2025 •

edited

Loading

dimitry-ishenko commented Jan 24, 2025

Julusian commented Jan 24, 2025

dimitry-ishenko commented Jan 24, 2025

Julusian commented Jan 24, 2025

oneisb commented Jan 25, 2025

dimitry-ishenko commented Jan 25, 2025

oneisb commented Feb 11, 2025

Lordmau5 commented Feb 11, 2025

Bug: Animation Stuttering with WebM Playback in HTML #1583

Bug: Animation Stuttering with WebM Playback in HTML #1583

Comments

oneisb commented Oct 11, 2024 • edited Loading

Observed Behavior

Additional Observation:

Expected behaviour

Steps to reproduce

Environment

oneisb commented Jan 21, 2025

oneisb commented Jan 24, 2025

Julusian commented Jan 24, 2025

oneisb commented Jan 24, 2025 • edited Loading

dimitry-ishenko commented Jan 24, 2025

Julusian commented Jan 24, 2025

dimitry-ishenko commented Jan 24, 2025

Julusian commented Jan 24, 2025

oneisb commented Jan 25, 2025

dimitry-ishenko commented Jan 25, 2025

oneisb commented Feb 11, 2025

Lordmau5 commented Feb 11, 2025

oneisb commented Oct 11, 2024 •

edited

Loading

oneisb commented Jan 24, 2025 •

edited

Loading