🐞 - VRCDN preview tile stealing RAM even when not playing

[M1XZG]

Doras Username

wildwanderer_vr

What happened?

On my profile page I have my VRCDN live stream preview setup. This doesn't autoplay so one would assume it's doing nothing, but after couple of hours I notice that in chrome the tab is consuming a huge amount of RAM.

Here you can watch it increase in size in real time

2024-11-29_14-15-27.mp4

Replication Steps

Nothing, just have VRCDN loaded in the profile as a tile.

User or Brand related

My acconut

What browsers are you seeing the problem on?

Chrome (or chrome based like Brave, Arc, etc)

[doras-to-admin]

Thank you for making Doras a better place 🚀

This has been added to our Public Project Board and our team will triage and action accordingly.

[tommerty]

The embeds source code on our end:

<video controls>
  <source
    src={`https://stream.vrcdn.live/live/${blockUpdate.url}.live.mp4`}
    type="video/mp4"
    />
</video>

Where ${blockUpdate.url} is the input of the VRCDN Username

The recommendation from @jazzy348 sent over from @M1XZG was:

<video autoplay muted>
  <source src="https://stream.vrcdn.live/live/${streamName}.mp4" type="video/mp4"/>
</video>

[jazzy348]

What's most likely happening here is the video embed is writing the recevied stream data to the buffer rather then discarding it after showing it.

[tommerty]

Seems we need to implement some buffer management. After a very brief search, something like HLS.js can help.

Example:

const hls = new Hls({
  maxBufferSize: 0, // Prevent storing large amounts of data
  maxBufferLength: 1, // Keep only 1 second of forward buffer
  backBufferLength: 0, // Don't store any previous segments
  liveSyncDurationCount: 1, // Sync with only 1 segment of live stream
  enableWorker: false // Disable web worker to reduce memory usage
});

// Attach to video element
hls.loadSource(streamUrl);
hls.attachMedia(video);

// Force garbage collection of old segments
hls.on(Hls.Events.FRAG_LOADED, () => {
  hls.trigger(Hls.Events.BUFFER_FLUSHING);
});

@trent-001

[tommerty]

Think I have a solution with VideoJS:

    const videoRef = React.useRef<HTMLVideoElement>(null);
    const playerRef = React.useRef<any>(null);

    React.useEffect(() => {
        // Wait for next tick to ensure DOM is ready
        const timer = setTimeout(() => {
            const videoElement = videoRef.current;
            if (!videoElement || !blockUpdate.url) return;

            const player = videojs(videoElement, {
                controls: true,
                fluid: true,
                preload: "none",
                liveui: true,
                liveTracker: false,
                controlBar: {
                    progressControl: false,
                },
                html5: {
                    nativeVideoTracks: true,
                    nativeAudioTracks: true,
                    nativeTextTracks: true,
                    vhs: {
                        overrideNative: true,
                        bufferSize: 1, // Minimal buffer size
                        maxBufferLength: 1, // Only buffer 1 second
                        // Add periodic buffer cleanup
                        cleanupBuffer: true,
                        cleanupBufferInterval: 30, // seconds
                    },
                },
            });

            playerRef.current = player;
        }, 0);

        return () => {
            clearTimeout(timer);
            if (playerRef.current) {
                playerRef.current.reset();
                playerRef.current.dispose();
                playerRef.current = null;
            }
        };
    }, [blockUpdate.url]);

...

<div data-vjs-player className="h-full w-full ">
<video
  ref={videoRef}
  className="video-js vjs-live vjs-live-display h-full w-full"
  playsInline
>
   <source
      src={`https://stream.vrcdn.live/live/${blockUpdate.url}.live.mp4`}
      type="video/mp4"
   />
</video>
</div>

Yes the code is ass, yes it could likely be better, but to get to this point took a good few hours of trying to understand VideoJS 😅

[tommerty]

Merged into staging and will release with Doras v.0.3.4