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/[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

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

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 Oct 11, 2024 •

edited

Loading