gun
Version:
A realtime, decentralized, offline-first, graph data synchronization engine.
77 lines (65 loc) • 2.13 kB
HTML
<html>
<head>
<title>Think</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
</head>
<body>
<video id="video" width="100%"></video>
<center>
<button id="record">Record</button>
<button id="play">Play</button>
</center>
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script>
const gun = Gun(`${window.location.origin}/gun`)
const record = { recorder: null, recording: false }
const video = document.querySelector('#video')
const playButton = document.querySelector('#play')
const recordButton = document.querySelector('#record')
recordButton.addEventListener('click', () => {
console.log(record)
if (!record.ing) {
return record.stream()
}
recordButton.innerText = 'Record'
if (record.ing.stop) { record.ing.stop() }
record.ing = false
}, false)
record.stream = () => {
navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
const chunks = [] // we have a stream, we can record it
record.ing = new MediaRecorder(stream)
record.ing.ondataavailable = eve => chunks.push(eve.data)
record.ing.onstop = () => record.save(new Blob(chunks))
record.ing.start()
recordButton.innerText = 'End'
}, err => { console.log(err) })
}
record.save = data => {
record.file = record.file || new FileReader()
record.file.readAsDataURL(data)
record.file.onloadend = () => {
let b64 = record.file.result
b64 = `data:video/webm${b64.slice(b64.indexOf(';'))}`
gun.get('test').get('screen').put(b64)
}
}
playButton.addEventListener('click', () => {
if (record.playing) {
playButton.innerText = 'Play'
video.pause()
record.playing = false
return
}
playButton.innerText = 'Stop'
record.playing = true
gun.get('test').get('screen').once(data => {
if (!data) { return }
video.src = data
video.play()
})
}, false)
</script>
</body>
</html>