streamsaver
Version:
StreamSaver writes stream to the filesystem directly - asynchronous
77 lines (68 loc) • 2.65 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
This will use the userMedia audio and or video to get a stream. <br>
It will then use mediaRecorder to "pipe" the data to StreamSaver (aka hard drive)
</p>
<p>
Note: This is only allowed in
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/isSecureContext">secure web context</a>
</p>
<label><input id="$vid" type="checkbox"> Use Webcam</label>
<label><input id="$aud" type="checkbox"> Use Microphone</label>
<button id="$start">Start</button>
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web-streams-polyfill@2.0.2/dist/ponyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jimmywarting/browser-su@master/build/permissions.js"></script>
<script src="../StreamSaver.js"></script>
<script>
$vid.disabled = $aud.disabled = $start.disabled = !window.isSecureContext
$start.onclick = () => {
permission = { name: 'userMedia', video: $vid.checked, audio: $aud.checked }
su.request(permission).then(stream => {
let fr = new FileReader()
let mediaRecorder = new MediaRecorder(stream)
let chunks = Promise.resolve()
mediaRecorder.start()
$close.onclick = event => {
stopStream(stream)
mediaRecorder.stop()
setTimeout(()=>{
chunks.then(evt => {
fileStream.close()
})
}, 1000)
}
mediaRecorder.ondataavailable = evt => {
let blob = evt.data
chunks = chunks.then(() => new Promise(resolve => {
fr.onload = () => {
// Should we let the serviceWorker be able to accept
// anything other then uint8array? ReadableStream don't seems
// so happy with anything else... but could load of some work
// of the main thread +1
let uint8array = new Uint8Array(fr.result)
myFile.write(uint8array)
resolve()
}
fr.readAsArrayBuffer(blob)
}))
}
})
}
function stopStream (stream) {
let tracks = [
...stream.getAudioTracks(),
...stream.getVideoTracks()
]
for(let track of tracks)
track.stop()
}
</script>
</body>
</html>