Merge pull request #924 from estebanrfp/patch-1

Create screen.html - vanilla javascript version
2025-03-30 15:08:33 +00:00 · 2020-04-06 21:36:36 -07:00 · 2020-04-06 21:36:36 -07:00 · ce78d7a4c9
commit ce78d7a4c9
parent 2f34d8cb4e 31abc3eaa0
1 changed files with 66 additions and 0 deletions
--- a/examples/vanilla/screen.html
+++ b/examples/vanilla/screen.html
@ -0,0 +1,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>