Merge pull request #1000 from estebanrfp/master

added vanilla js version of video.html
2025-03-30 15:08:33 +00:00 · 2020-08-19 03:50:59 -07:00 · 2020-08-19 03:50:59 -07:00 · 35c8a75a00
commit 35c8a75a00
parent 5cbd5e3943 bf68704063
1 changed files with 83 additions and 0 deletions
--- a/examples/vanilla/video.html
+++ b/examples/vanilla/video.html
@ -0,0 +1,83 @@
+<!DOCTYPE html>
+
+<video id="video" width="100%" controls autoplay></video>
+<center>
+  <input id="pass" placeholder="password">
+  Record <button class="record">Camera</button> or <button class="screen">Screen</button>
+</center>
+
+<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
+
+<script>
+  const peers = [
+    `${window.location.origin}/gun`,
+    'https://gun-us.herokuapp.com/gun',
+    'https://gun-eu.herokuapp.com/gun'
+  ]
+
+  const gun = Gun({ localStorage: true, peers })
+
+  const pass = document.querySelector('#pass')
+  const video = document.querySelector('#video')
+  const camera = document.querySelector('.record')
+  const screen = document.querySelector('.screen')
+
+  gun.get('test').get('video').on(async data => {
+    if (pass.value) { data = await SEA.decrypt(data, pass.value) }
+    video.setAttribute('src', data)
+  })
+
+  function record(type) {
+    function load(media) {
+      const chunks = []
+      record.ing = new MediaRecorder(media)
+      record.ing.ondataavailable = eve => { chunks.push(eve.data) }
+      record.ing.onstop = eve => { record.save(new Blob(chunks)) }
+      record.ing.start()
+    }
+
+    function error(err) { console.log(err) }
+
+    if (type === 'Camera') {
+      navigator.getMedia({ video: true, audio: true }, load, error)
+    }
+    if (type === 'Screen') {
+      navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(load, error)
+    }
+  }
+
+  function act(e) {
+    if (record.ing) {
+      if (record.ing.stop) { record.ing.stop() }
+
+      e.target.textContent = record.type
+      record.ing = false
+      return
+    }
+
+    record(record.type = e.target.textContent)
+    e.target.textContent = 'end'
+  }
+
+  record.save = data => {
+    record.file = record.file || new FileReader()
+    record.file.readAsDataURL(data)
+    record.file.onloadend = async () => {
+      const b64 = record.file.result
+      let b64formated = `data:video/webm${b64.slice(b64.indexOf(';'))}`
+
+      video.setAttribute('src', b64formated)
+
+      if (pass.value) { b64formated = await SEA.encrypt(b64formated, pass.value) }
+      gun.get('test').get('video').put(b64formated)
+    }
+  }
+
+  camera.addEventListener('click', e => act(e))
+  screen.addEventListener('click', e => act(e))
+
+  navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia ||
+    navigator.mozGetUserMedia || navigator.msGetUserMedia)
+
+</script>