wip

src/index.html

@@ -130,6 +130,14 @@ <h3>Encoder settings</h3>
  <button id="run-benchmark" type="button" class="btn btn-primary">Run Benchmark</button>
  </div>
 
+ <div class="mb-3">
+ <div>Input video loading progress:</div>
+
+ <div class="progress">
+ <div id="loading-progress" class="progress-bar" role="progressbar" style="width: 0%" aria-label="loading progress"></div>
+ </div>
+ </div>
+
  <div class="m3-b">
  <div>Export time (seconds): <span id="export-time">0</span></div>
  </div>

src/index.ts

@@ -4,24 +4,14 @@ import { Mp4Demuxer } from './decoder/mp4-demuxer';
 import { H264Decoder } from './decoder/h264-decoder';
 import { H264Encoder } from './encoder/h264-encoder';
 import { EncoderResolution, H264Profile } from './encoder/interfaces';
+import { loadInputFile } from './shared/input-files';
 
 const DEFAULT_FRAMERATE = 30;
-
-async function loadInputFile(inputFileName: string): Promise<File> {
- const response = await fetch(`resources/videos/${inputFileName}`);
-
- if (!response.ok) {
- throw new Error(`Cannot load input file: HTTP/${response.status}`);
- }
-
- const blob = await response.blob();
-
- return new File([blob], inputFileName)
-}
-
 const TOTAL_TIME_MICROS = 596380000; 
 
 const encoderProgressControl = $('#encoder-progress');
+const loadingProgressControl = $('#loading-progress');
+
 const exportTimeText = $('#export-time');
 const outputSizeText = $('#output-size');
 
@@ -35,6 +25,8 @@ $('button#run-benchmark').click(async () => {
  $('button#run-benchmark').attr('disabled', 'disabled');
  $('select').attr('disabled', 'disabled');
  $('input').attr('disabled', 'disabled');
+ loadingProgressControl.css('width', `0%`);
+ encoderProgressControl.css('width', `0%`);
 
  const inputFileName = $('select#input-file').val() as string;
  const decoderAcceleration = $('select#decoder-acceleration').val() as HardwareAcceleration;
@@ -53,7 +45,9 @@ $('button#run-benchmark').click(async () => {
  exportTimeText.val('Loading video.');
  outputSizeText.text('0');
 
- const inputFile = await loadInputFile(inputFileName);
+ const inputFile = await loadInputFile(inputFileName, readProgress => {
+ loadingProgressControl.css('width', `${(readProgress * 100).toFixed(1)}%`);
+ });
  exportTimeText.val('Running...');
 
  const startTimeMillis = performance.now();
@@ -103,4 +97,6 @@ $('button#run-benchmark').click(async () => {
  $('button#run-benchmark').removeAttr('disabled');
  $('select').removeAttr('disabled');
  $('input').removeAttr('disabled');
+
+ loadingProgressControl.css('width', `0%`);
 });

src/shared/input-files.ts

@@ -0,0 +1,45 @@
+const AZURE_BLOBSTORE_ENDPOINT = 'https://exportperformance.blob.core.windows.net';
+const AZURE_BLOBSTORE_CONTAINER = 'videos';
+
+const CACHED_VIDEO_FILES: { [ fileName: string]: File } = {};
+
+export async function loadInputFile(inputFileName: string, progressCallback?: (progress: number) => void): Promise<File> {
+ if (inputFileName in CACHED_VIDEO_FILES) {
+ if (progressCallback !== undefined) {
+ progressCallback(1);
+ }
+ return CACHED_VIDEO_FILES[inputFileName];
+ }
+
+ const response = await fetch(`${AZURE_BLOBSTORE_ENDPOINT}/${AZURE_BLOBSTORE_CONTAINER}/${inputFileName}`);
+
+ if (!response.ok) {
+ throw new Error(`Cannot load input file: HTTP/${response.status}`);
+ }
+
+ if (response.body === null) {
+ throw new Error(`HTTP response from Azure blob store has no body`);
+ }
+
+ const fileSize = Number.parseInt(response.headers.get('Content-Length')!);
+
+ const reader = response.body.getReader();
+
+ const chunks: Uint8Array[] = [];
+ let length = 0;
+
+ for (let { done, value } = await reader.read(); !done; { done, value } = await reader.read()) {
+ if (value !== undefined) {
+ length += value.byteLength;
+ chunks.push(value);
+
+ if (progressCallback !== undefined) {
+ progressCallback(length / fileSize);
+ }
+ }
+ }
+
+ const file = new File(chunks, inputFileName, { type: response.headers.get('Content-Type') ?? 'video/mp4' });
+ CACHED_VIDEO_FILES[inputFileName] = file;
+ return file;
+}