mirror of
https://github.com/arcodange-org/mediabunny.git
synced 2026-09-27 10:53:50 +02:00
Add HLS transcoding example
This commit is contained in:
Vanilagy
@@ -0,0 +1,272 @@
|
||||
import {
|
||||
Input,
|
||||
ALL_FORMATS,
|
||||
BlobSource,
|
||||
UrlSource,
|
||||
Output,
|
||||
PathedTarget,
|
||||
BufferTarget,
|
||||
HlsOutputFormat,
|
||||
MpegTsOutputFormat,
|
||||
Conversion,
|
||||
QUALITY_VERY_HIGH,
|
||||
QUALITY_HIGH,
|
||||
QUALITY_MEDIUM,
|
||||
QUALITY_LOW,
|
||||
QUALITY_VERY_LOW,
|
||||
} from 'mediabunny';
|
||||
|
||||
import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4';
|
||||
(document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
showDirectoryPicker(options: { mode: 'readwrite' }): Promise<FileSystemDirectoryHandle>;
|
||||
}
|
||||
}
|
||||
|
||||
const selectDirectoryButton = document.querySelector('#select-directory') as HTMLButtonElement;
|
||||
const directoryNameElement = document.querySelector('#directory-name') as HTMLParagraphElement;
|
||||
const selectMediaButton = document.querySelector('#select-file') as HTMLButtonElement;
|
||||
const loadSampleButton = document.querySelector('#load-sample') as HTMLButtonElement;
|
||||
const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
|
||||
const dashboard = document.querySelector('#dashboard') as HTMLDivElement;
|
||||
const statusElement = document.querySelector('#status') as HTMLParagraphElement;
|
||||
const progressBar = document.querySelector('#progress-bar') as HTMLDivElement;
|
||||
const percentIndicator = document.querySelector('#percent-indicator') as HTMLParagraphElement;
|
||||
const speedometer = document.querySelector('#speedometer') as HTMLParagraphElement;
|
||||
const bytesWrittenElement = document.querySelector('#bytes-written') as HTMLParagraphElement;
|
||||
const filesCreatedElement = document.querySelector('#files-created') as HTMLParagraphElement;
|
||||
const latestFileElement = document.querySelector('#latest-file') as HTMLParagraphElement;
|
||||
const errorElement = document.querySelector('#error-element') as HTMLParagraphElement;
|
||||
|
||||
let currentConversion: Conversion | null = null;
|
||||
let directoryHandle: FileSystemDirectoryHandle | null = null;
|
||||
let progress = 0;
|
||||
let processedTime = 0;
|
||||
let startTime: number | null = null;
|
||||
let bytesWritten = 0;
|
||||
let filesCreated = 0;
|
||||
let latestFile = '-';
|
||||
let status = 'Waiting for directory';
|
||||
let fileName = '';
|
||||
let directoryName = '';
|
||||
let errorMessage = '';
|
||||
let renderIntervalId = -1;
|
||||
const filePromises: Promise<void>[] = [];
|
||||
|
||||
const convertToHls = async (resource: File | string) => {
|
||||
await currentConversion?.cancel();
|
||||
|
||||
resetDashboard();
|
||||
fileName = resource instanceof File ? resource.name : resource;
|
||||
updateFileUi();
|
||||
|
||||
clearInterval(renderIntervalId);
|
||||
renderIntervalId = window.setInterval(render, 1000 / 60);
|
||||
render();
|
||||
|
||||
try {
|
||||
// Load the input
|
||||
const source = resource instanceof File
|
||||
? new BlobSource(resource)
|
||||
: new UrlSource(resource);
|
||||
const input = new Input({
|
||||
source,
|
||||
formats: ALL_FORMATS,
|
||||
});
|
||||
|
||||
const output = new Output({
|
||||
// Define the output format (HLS with MPEG-TS segments)
|
||||
format: new HlsOutputFormat({
|
||||
segmentFormat: new MpegTsOutputFormat(),
|
||||
}),
|
||||
// Describe where the files will be written
|
||||
target: new PathedTarget(
|
||||
'master.m3u8',
|
||||
({ path }) => createFileTarget(path),
|
||||
),
|
||||
onFinalize: () => Promise.all(filePromises),
|
||||
});
|
||||
|
||||
currentConversion = await Conversion.init({
|
||||
input,
|
||||
output,
|
||||
tracks: 'primary', // Use only the primary video and audio tracks of the input
|
||||
video: [
|
||||
{ codec: 'avc', height: 1080, bitrate: QUALITY_VERY_HIGH },
|
||||
{ codec: 'avc', height: 720, bitrate: QUALITY_HIGH },
|
||||
{ codec: 'avc', height: 480, bitrate: QUALITY_MEDIUM },
|
||||
{ codec: 'avc', height: 360, bitrate: QUALITY_LOW },
|
||||
{ codec: 'avc', height: 240, bitrate: QUALITY_VERY_LOW },
|
||||
],
|
||||
audio: [
|
||||
{ codec: 'aac', bitrate: QUALITY_HIGH },
|
||||
],
|
||||
});
|
||||
|
||||
if (!currentConversion.isValid) {
|
||||
console.info(currentConversion.discardedTracks);
|
||||
throw new Error('Conversion is invalid and cannot be executed; see the console for more.');
|
||||
}
|
||||
|
||||
currentConversion.onProgress = (newProgress, newProcessedTime) => {
|
||||
progress = newProgress;
|
||||
processedTime = newProcessedTime;
|
||||
startTime ??= performance.now();
|
||||
};
|
||||
|
||||
status = 'Encoding renditions and writing HLS files';
|
||||
|
||||
await currentConversion.execute();
|
||||
|
||||
progress = 1;
|
||||
status = 'HLS manifest complete';
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
await currentConversion?.cancel();
|
||||
status = 'Conversion failed';
|
||||
errorMessage = String(error);
|
||||
updateFileUi();
|
||||
} finally {
|
||||
clearInterval(renderIntervalId);
|
||||
renderIntervalId = -1;
|
||||
render();
|
||||
}
|
||||
};
|
||||
|
||||
const formatBytes = (bytes: number) => {
|
||||
if (bytes < 1000) {
|
||||
return `${bytes} B`;
|
||||
}
|
||||
|
||||
const units = ['kB', 'MB', 'GB', 'TB'];
|
||||
let size = bytes / 1000;
|
||||
let unitIndex = 0;
|
||||
while (size >= 1000) {
|
||||
size /= 1000;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${+size.toFixed(2)} ${units[unitIndex]}`;
|
||||
};
|
||||
|
||||
const render = () => {
|
||||
const percentage = Math.floor(progress * 100);
|
||||
const displayedPercentage = status === 'HLS manifest complete' ? 100 : Math.min(percentage, 99);
|
||||
progressBar.style.width = `${displayedPercentage}%`;
|
||||
percentIndicator.textContent = `${displayedPercentage}%`;
|
||||
bytesWrittenElement.textContent = formatBytes(bytesWritten);
|
||||
filesCreatedElement.textContent = filesCreated.toString();
|
||||
latestFileElement.textContent = latestFile;
|
||||
statusElement.textContent = status;
|
||||
|
||||
if (startTime !== null) {
|
||||
const elapsedSeconds = (performance.now() - startTime) / 1000;
|
||||
const factor = processedTime / elapsedSeconds;
|
||||
speedometer.textContent = `${factor.toPrecision(3)}x`;
|
||||
} else {
|
||||
speedometer.textContent = '-';
|
||||
}
|
||||
};
|
||||
|
||||
const updateFileUi = () => {
|
||||
directoryNameElement.textContent = directoryName;
|
||||
fileNameElement.textContent = fileName;
|
||||
errorElement.textContent = errorMessage;
|
||||
};
|
||||
|
||||
const resetDashboard = () => {
|
||||
progress = 0;
|
||||
processedTime = 0;
|
||||
startTime = null;
|
||||
bytesWritten = 0;
|
||||
filesCreated = 0;
|
||||
latestFile = '-';
|
||||
status = 'Preparing HLS output';
|
||||
errorMessage = '';
|
||||
filePromises.length = 0;
|
||||
dashboard.classList.remove('opacity-50');
|
||||
updateFileUi();
|
||||
};
|
||||
|
||||
const createFileTarget = async (path: string) => {
|
||||
const target = new BufferTarget({
|
||||
onFinalize: (buffer) => {
|
||||
filePromises.push((async () => {
|
||||
const handle = await directoryHandle!.getFileHandle(path, { create: true });
|
||||
const writable = await handle.createWritable();
|
||||
await writable.write(buffer);
|
||||
await writable.close();
|
||||
})());
|
||||
},
|
||||
});
|
||||
|
||||
let fileBytes = 0;
|
||||
|
||||
filesCreated++;
|
||||
latestFile = path;
|
||||
|
||||
target.on('write', ({ end }) => {
|
||||
const newFileBytes = Math.max(fileBytes, end);
|
||||
bytesWritten += newFileBytes - fileBytes;
|
||||
fileBytes = newFileBytes;
|
||||
});
|
||||
|
||||
return target;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||
selectDirectoryButton.addEventListener('click', async () => {
|
||||
directoryHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
|
||||
directoryName = `Selected directory: ${directoryHandle.name}`;
|
||||
status = 'Waiting for source video';
|
||||
selectDirectoryButton.style.display = 'none';
|
||||
selectMediaButton.disabled = false;
|
||||
loadSampleButton.disabled = false;
|
||||
directoryNameElement.style.display = '';
|
||||
directoryNameElement.textContent = directoryName;
|
||||
statusElement.textContent = status;
|
||||
});
|
||||
|
||||
selectMediaButton.addEventListener('click', () => {
|
||||
const fileInput = document.createElement('input');
|
||||
fileInput.type = 'file';
|
||||
fileInput.accept = 'video/*,video/x-matroska,video/mp2t,.ts';
|
||||
fileInput.addEventListener('change', () => {
|
||||
const file = fileInput.files![0];
|
||||
if (file) {
|
||||
void convertToHls(file);
|
||||
}
|
||||
});
|
||||
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
loadSampleButton.addEventListener('click', () => {
|
||||
const url = prompt(
|
||||
'Please enter a URL of a media file. Note that it must be HTTPS and support cross-origin requests, so have the'
|
||||
+ ' right CORS headers set.',
|
||||
'https://remotion.media/BigBuckBunny.mp4',
|
||||
);
|
||||
if (!url) {
|
||||
return;
|
||||
}
|
||||
|
||||
void convertToHls(url);
|
||||
});
|
||||
|
||||
document.addEventListener('dragover', (event) => {
|
||||
event.preventDefault();
|
||||
event.dataTransfer!.dropEffect = 'copy';
|
||||
});
|
||||
|
||||
document.addEventListener('drop', (event) => {
|
||||
event.preventDefault();
|
||||
const files = event.dataTransfer!.files;
|
||||
const file = files[0];
|
||||
if (file) {
|
||||
void convertToHls(file);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" translate="no">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HLS transcoding example | Mediabunny</title>
|
||||
<script type="module" src="../base.ts"></script>
|
||||
<script type="module" src="./hls-transcoding.ts"></script>
|
||||
<link rel="stylesheet" href="../base.css">
|
||||
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col items-center bg-zinc-50 px-2 py-10 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200">
|
||||
<h1 class="text-center text-3xl font-bold text-cyan-500">HLS transcoding example</h1>
|
||||
<p class="max-w-2xl text-center">
|
||||
Select a directory, then a video. Mediabunny will create a complete HLS VOD package with five video renditions and one audio track.
|
||||
</p>
|
||||
|
||||
<div class="mt-5 flex flex-col items-center gap-1">
|
||||
<div class="flex flex-wrap justify-center gap-2">
|
||||
<button id="select-directory" class="rounded-lg bg-cyan-500 px-5 py-2 font-medium text-white hover:bg-cyan-600">
|
||||
Select directory
|
||||
</button>
|
||||
|
||||
<button id="select-file" disabled class="rounded-lg bg-zinc-200 px-5 py-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-750 dark:hover:bg-zinc-700 hover:bg-zinc-300">
|
||||
Select local file
|
||||
</button>
|
||||
|
||||
<button id="load-sample" disabled class="rounded-lg bg-zinc-200 px-5 py-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-750 dark:hover:bg-zinc-700 hover:bg-zinc-300">
|
||||
Load remote URL
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="text-xs opacity-50 hover:opacity-70 hover:underline">
|
||||
Download sample file
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p id="directory-name" class="mt-3 max-w-[36rem] text-center text-xs opacity-60" style="display: none;"></p>
|
||||
<p id="file-name" class="min-h-5 max-w-[36rem] text-center text-xs opacity-60"></p>
|
||||
<p id="error-element" class="mx-auto mt-2 max-w-[36rem] text-center text-red-500"></p>
|
||||
|
||||
<hr class="my-4 w-full max-w-4xl border-zinc-300 dark:border-zinc-700">
|
||||
|
||||
<div class="grid w-full max-w-4xl gap-4 md:grid-cols-2">
|
||||
<section class="rounded-xl bg-zinc-200 p-5 dark:bg-zinc-750">
|
||||
<h2 class="text-lg font-bold text-cyan-500">Renditions</h2>
|
||||
<div class="mt-3 grid gap-2 text-sm">
|
||||
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
||||
<p class="font-bold">1080p</p>
|
||||
<p class="opacity-70">AVC video</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
||||
<p class="font-bold">720p</p>
|
||||
<p class="opacity-70">AVC video</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
||||
<p class="font-bold">480p</p>
|
||||
<p class="opacity-70">AVC video</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
||||
<p class="font-bold">360p</p>
|
||||
<p class="opacity-70">AVC video</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
||||
<p class="font-bold">240p</p>
|
||||
<p class="opacity-70">AVC video</p>
|
||||
</div>
|
||||
<hr class="my-1 border-zinc-300 dark:border-zinc-700">
|
||||
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
||||
<p class="font-bold">Audio</p>
|
||||
<p class="opacity-70">AAC audio</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="dashboard" class="rounded-xl bg-zinc-200 p-5 opacity-50 transition-opacity dark:bg-zinc-750">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-cyan-500">Progress</h2>
|
||||
<p id="status" class="mt-1 text-sm opacity-70">Waiting for directory</p>
|
||||
</div>
|
||||
<p id="percent-indicator" class="text-4xl font-bold tabular-nums text-cyan-500">0%</p>
|
||||
</div>
|
||||
|
||||
<div id="progress-bar-container" class="mt-4 h-3 overflow-hidden rounded-full bg-zinc-300 dark:bg-zinc-900">
|
||||
<div id="progress-bar" class="h-full w-0 bg-emerald-500 transition-[width] duration-150"></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-2 gap-2 text-sm">
|
||||
<div class="rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800">
|
||||
<p class="text-xs opacity-60">Real-time speed</p>
|
||||
<p id="speedometer" class="mt-1 text-lg font-bold tabular-nums">-</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800">
|
||||
<p class="text-xs opacity-60">Bytes written</p>
|
||||
<p id="bytes-written" class="mt-1 text-lg font-bold tabular-nums">0 B</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800">
|
||||
<p class="text-xs opacity-60">Files created</p>
|
||||
<p id="files-created" class="mt-1 text-lg font-bold tabular-nums">0</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800">
|
||||
<p class="text-xs opacity-60">Latest file</p>
|
||||
<p id="latest-file" class="mt-1 truncate text-lg font-bold tabular-nums">-</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<a href="/" class="fixed left-0 top-0 flex items-center gap-2 px-5 py-2">
|
||||
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
||||
<p class="text-sm font-medium">Mediabunny</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/hls-transcoding"
|
||||
target="_blank"
|
||||
class="fixed right-0 top-0 flex items-center gap-2 rounded-bl-xl bg-zinc-200 px-5 py-2 hover:bg-zinc-300 dark:bg-zinc-750 dark:hover:bg-zinc-700"
|
||||
>
|
||||
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
|
||||
<p>View source code</p>
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user