Add experimental Media Performance Workloads - #582
Open
SyedAbuTalib wants to merge 2 commits into
Open
Conversation
✅ Deploy Preview for webkit-speedometer-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…ocessing throughput of modern web media APIs. --- Tests standard video playback initialization latency via Media Source Extensions (MSE) to simulate typical streaming user journeys on platforms like YouTube or Vimeo. The time measured is from the `play` button clicked to the first video frame painted on the screen. We use `requestVideoFrameCallback` to ensure that the video is painted on the screen. Measures the latency of performing a quick skip-ahead action within an already loaded media stream. This simulates a common user interaction, such as scrubbing through a video timeline or double-tapping right to skip forward on a streaming platform. The time measured is from the `seek` button clicked to the first video frame painted on the screen after seeking. We use `requestVideoFrameCallback` to ensure that the video is painted on the screen after seeking. --- Tests real-time video encoding and decoding pipelines using WebCodecs. While the UI simulates a Video Chat call, WebRTC is not tested; the focus is purely on measuring VideoEncoder and VideoDecoder throughput. The time measured is from the `video-benchmark` button clicked until all video frames have been encoded, decoded, and the session is torn down. Tests real-time audio encoding, decoding using WebCodecs and audio routing and effects processing using WebAudio. It measures the browser's efficiency in processing audio streams and applying standard audio nodes. The time measured is from the `voice-benchmark` button clicked until all audio frames have been encoded/decoded and the WebAudio offline rendering completes.
SyedAbuTalib
force-pushed
the
add-media-performance-workloads
branch
from
August 10, 2026 21:30
9dc7045 to
c0c708e
Compare
Contributor
|
The media-streaming workload does not seem to work on safari: 
Could we figure out a mode that makes it possible to work out of the box there too? |
| }), | ||
| new BenchmarkTestStep("VoiceChat", async (page) => { | ||
| page.querySelector("#voice-benchmark").click(); | ||
| await page.waitForElement("#voice-benchmark.completed"); |
Contributor
There was a problem hiding this comment.
waitForElement does not work in the measured phase of the benchmark :/ since it's doing the work with requestAnimationFrame which means we get at most framerate timing resolution (and framerate dependendent measurement which we try to avoid).
- You have to to do something like new
await page.callAsyncBlocking(...)method or so (sorry this is not very fleshed out yet)
Author
There was a problem hiding this comment.
Created new callAsyncBlocking() method. Let me know if you agree.
| else | ||
| video.requestVideoFrameCallback(checkFrame); | ||
| }; | ||
| video.requestVideoFrameCallback(checkFrame); |
Contributor
There was a problem hiding this comment.
If I interpret this correctly, requestVideoFrameCallback is likey display refresh-rate bound? [1]
One thing to bear in mind is that requestVideoFrameCallback() does not offer any strict guarantees that the output from your callback will remain in sync with the video frame rate. It may end up being fired one vertical synchronization (v-sync) later than when the new video frame was presented. (V-sync is a graphics technology that synchronizes the frame rate of a video with the refresh rate of a monitor.)
If this is the case we need to find another way to measure this. Speedometer is menat to be refresh-rate agnositc for the measurement part.
[1] https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestVideoFrameCallback
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This benchmark suite measures the performance, responsiveness, and processing throughput of modern web media APIs.
1. Media-Streaming (
streaming.html/streaming.js)InitialPlayback
Tests standard video playback initialization latency via Media Source Extensions (MSE) to simulate typical streaming user journeys on platforms like YouTube or Vimeo. The time measured is from the
playbutton clicked to the first video frame painted on the screen. We userequestVideoFrameCallbackto ensure that the video is painted on the screen.Seek
Measures the latency of performing a quick skip-ahead action within an already loaded media stream. This simulates a common user interaction, such as scrubbing through a video timeline or double-tapping right to skip forward on a streaming platform. The time measured is from the
seekbutton clicked to the first video frame painted on the screen after seeking. We userequestVideoFrameCallbackto ensure that the video is painted on the screen after seeking.2. Media-Conferencing (
conferencing.html/conferencing.js)VideoChat
Tests real-time video encoding and decoding pipelines using WebCodecs. While the UI simulates a Video Chat call, WebRTC is not tested; the focus is purely on measuring VideoEncoder and VideoDecoder throughput. The time measured is from the
video-benchmarkbutton clicked until all video frames have been encoded, decoded, and the session is torn down.VoiceChat
Tests real-time audio encoding, decoding using WebCodecs and audio routing and effects processing using WebAudio. It measures the browser's efficiency in processing audio streams and applying standard audio nodes. The time measured is from the
voice-benchmarkbutton clicked until all audio frames have been encoded/decoded and the WebAudio offline rendering completes.