screen.html
1.81 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<video id="video" width="100%"></video>
<center>
<button id="record">Record</button>
<button id="play">Play</button>
</center>
<script src="../../../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>