Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Animation Stuttering with WebM Playback in HTML #1583

Open
oneisb opened this issue Oct 11, 2024 · 0 comments
Open

Bug: Animation Stuttering with WebM Playback in HTML #1583

oneisb opened this issue Oct 11, 2024 · 0 comments
Labels
type/bug

Comments

@oneisb
Copy link

oneisb commented Oct 11, 2024 •
edited
Loading

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

  1. Start CasparCG.
  2. Load the HTML template containing the animation and WebM video.
  3. 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type/bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@oneisb