Skip to content

Commit 9dc7045

Browse files
SyedAbuTalibSyedAbuTalib
committed
# Media Performance Workloads
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 `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. ### 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 `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. --- ## 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-benchmark` button 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-benchmark` button clicked until all audio frames have been encoded/decoded and the WebAudio offline rendering completes.
1 parent 6cd6735 commit 9dc7045

10 files changed

Lines changed: 748 additions & 0 deletions

File tree

‎experimental/media-performance/LICENSE.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Media Asset Attributions
2+
3+
## bigbuckbunny-video.webm and bigbuckbunny-audio.webm
4+
5+
Excerpt from "Big Buck Bunny" (https://peach.blender.org/), © 2008 Blender
6+
Foundation. Licensed under the Creative Commons Attribution 3.0 Unported
7+
License (https://creativecommons.org/licenses/by/3.0/).
8+
9+
The assets are bundled here solely as deterministic input for the
10+
Media-Streaming workload. The original source file (`bbb_sunflower_1080p_60fps_normal.mp4.zip`) was obtained from the official [Blender Foundation repository](https://peach.blender.org/download/). It was re-encoded using FFmpeg 8.1.2 (specifically Lavc 62.28.102 / Lavf 62.12.102) into separate single-track WebM representations (VP9 video and Opus audio, DASH streaming architecture):
11+
12+
```bash
13+
# Pass 1: VP9 Video Stream
14+
ffmpeg -y -i bbb_sunflower_1080p_60fps_normal.mp4 -c:v libvpx-vp9 \
15+
-b:v 4M -minrate 1.5M -maxrate 8.8M -crf 31 \
16+
-g 300 -keyint_min 0 \
17+
-tile-columns 2 -threads 8 -speed 4 \
18+
-auto-alt-ref 1 -arnr_max_frames 7 -arnr_strength 5 -arnr_type 3 \
19+
-rc_lookahead 24 -enable-tpl 1 \
20+
-pass 1 -an -f null /dev/null
21+
22+
# Pass 2: VP9 Video Stream
23+
ffmpeg -y -i bbb_sunflower_1080p_60fps_normal.mp4 -c:v libvpx-vp9 \
24+
-b:v 4M -minrate 1.5M -maxrate 8.8M -crf 31 \
25+
-g 300 -keyint_min 0 \
26+
-tile-columns 2 -threads 8 -speed 2 \
27+
-auto-alt-ref 1 -arnr_max_frames 7 -arnr_strength 5 -arnr_type 3 \
28+
-rc_lookahead 24 -enable-tpl 1 \
29+
-pass 2 -an \
30+
bigbuckbunny-video.webm
31+
32+
# Extract Opus Audio Stream
33+
ffmpeg -y -i bbb_sunflower_1080p_60fps_normal.mp4 -vn \
34+
-c:a libopus -b:a 128k -ac 2 \
35+
bigbuckbunny-audio.webm
36+
```
37+
38+
This delivers a 2-pass VP9 video stream (1080p, 60fps) with alternate reference frames (`-auto-alt-ref 1`), a 5-second keyframe interval (`-g 300`), and ~4 Mbps bitrate for decoder stress testing, paired with a separate Opus audio stream (stereo, 128k) in dedicated WebM containers.

‎experimental/media-performance/README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Media Performance Workloads
2+
3+
This benchmark suite measures the performance, responsiveness, and processing throughput of modern web media APIs.
4+
5+
---
6+
7+
## 1. Media-Streaming (`streaming.html` / `streaming.js`)
8+
9+
### InitialPlayback
10+
11+
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.
12+
13+
### Seek
14+
15+
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.
16+
17+
---
18+
19+
## 2. Media-Conferencing (`conferencing.html` / `conferencing.js`)
20+
21+
### VideoChat
22+
23+
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.
24+
25+
### VoiceChat
26+
27+
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 two stages run sequentially in a simulated media pipeline: audio routing and effects processing complete via WebAudio, and the resulting rendered audio buffer is directly encoded and decoded via WebCodecs. The time measured is from the `voice-benchmark` button clicked until all audio frames have been encoded/decoded and the WebAudio offline rendering completes.
28+
29+
---
30+
31+
## Notes & Troubleshooting
32+
33+
### Safari & Low Power Mode
34+
35+
When running these workloads in Safari on macOS or iOS, verify that **Low Power Mode** is disabled. Low Power Mode completely restricts programmatic media playback (`video.play()` and automated media pipelines) regardless of muted state, which will cause tests to fail with a `NotAllowedError`.

‎experimental/media-performance/bigbuckbunny-audio.webm‎

163 KB
Binary file not shown.

‎experimental/media-performance/bigbuckbunny-video.webm‎

4.39 MB
Binary file not shown.

‎experimental/media-performance/conferencing.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Media Conferencing Workload</title>
6+
<link rel="stylesheet" href="style.css" />
7+
</head>
8+
<body>
9+
<div class="controls">
10+
<button id="video-benchmark">Video Chat</button>
11+
<button id="voice-benchmark">Voice Chat</button>
12+
</div>
13+
<div class="stage">
14+
<div class="canvas-grid">
15+
<div class="canvas-cell">
16+
<h4>Local Preview</h4>
17+
<canvas id="local-canvas" width="1920" height="1080"></canvas>
18+
</div>
19+
<div class="canvas-cell">
20+
<h4>Remote Preview</h4>
21+
<canvas id="remote-canvas" width="1920" height="1080"></canvas>
22+
</div>
23+
</div>
24+
<div class="status">
25+
<span id="status">Idle</span>
26+
</div>
27+
</div>
28+
<script src="conferencing.js"></script>
29+
</body>
30+
</html>

0 commit comments

Comments
 (0)