Files
mediabunny/dev/live.html
T
Vanilagy d38ad22559 Big realtime playback refactor
- Added Worker- or AudioContext-based fallbacks in case MediaStreamTrackProcessor is not available
- Fixed fMP4-streamed files not playing in Safari
- Added better error handling for MediaStream sources
- Improved the live recording example to be more robust
2025-07-27 12:13:03 +02:00

58 lines
1.8 KiB
HTML

<button>Go</button>
<script src="../dist/bundles/mediabunny.cjs"></script>
<script type="module">
function download(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
const button = document.querySelector('button');
button.addEventListener('click', async () => {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
const videoTrack = stream.getVideoTracks()[0];
const audioTrack = stream.getAudioTracks()[0];
const output = new Mediabunny.Output({
target: new Mediabunny.BufferTarget(),
format: new Mediabunny.Mp4OutputFormat(),
});
if (videoTrack) {
const source = new Mediabunny.MediaStreamVideoTrackSource(videoTrack, {
codec: 'avc',
bitrate: Mediabunny.QUALITY_MEDIUM
});
source.errorPromise.catch((d) => console.log("Hello?????", d));
output.addVideoTrack(source);
}
if (audioTrack) {
const source = new Mediabunny.MediaStreamAudioTrackSource(audioTrack, {
codec: 'aac',
bitrate: Mediabunny.QUALITY_MEDIUM
});
source.errorPromise.catch((d) => console.log("Hello!!???", d));
output.addAudioTrack(source);
}
await output.start();
await new Promise(resolve => setTimeout(resolve, 5000));
await output.finalize();
console.log(output.target.buffer);
download(new Blob([output.target.buffer]), 'livetest' + output.format.fileExtension);
videoTrack?.stop();
audioTrack?.stop();
});
</script>