search

CasparCG / server

CasparCG Server is a Windows and Linux software used to play out professional graphics, audio and video to multiple outputs. It has been in 24/7 broadcast production since 2006. Ready-to-use downloads are available under the Releases tab https://casparcg.com.
GNU General Public License v3.0
914 stars 269 forks source link

Bug: Animation Stuttering with WebM Playback in HTML #1583

Open oneisb opened 1 month ago

oneisb commented 1 month ago

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