screen.html 1.81 KB
<!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>