77 lines
2.6 KiB
HTML
77 lines
2.6 KiB
HTML
<!DOCTYPE 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>
|