diff --git a/hydra-server/app/src/menu.js b/hydra-server/app/src/menu.js index e7423743b..61253c54c 100644 --- a/hydra-server/app/src/menu.js +++ b/hydra-server/app/src/menu.js @@ -6,14 +6,20 @@ class Menu { this.sketches = obj.sketches this.editor = obj.editor this.hydra = obj.hydra + this.recorder = undefined + this.recordingStartTime = undefined + this.recordingInterval = undefined // variables related to popup window this.closeButton = document.getElementById("close-icon") this.clearButton = document.getElementById("clear-icon") this.shareButton = document.getElementById("share-icon") + this.recordingTime = document.getElementById("recording-time") + this.recorderButton = document.getElementById("recorder-icon") this.shuffleButton = document.getElementById("shuffle-icon") this.editorText = document.getElementsByClassName('CodeMirror-scroll')[0] + this.recorderButton.onclick = this.recordSketch.bind(this) this.shuffleButton.onclick = this.shuffleSketches.bind(this) this.shareButton.onclick = this.shareSketch.bind(this) this.clearButton.onclick = this.clearAll.bind(this) @@ -47,6 +53,45 @@ class Menu { }) } + downloadRecording (e) { + var videoData = [ e.data ] + var blob = new Blob(videoData, {'type': 'video/webm'}) + var videoURL = URL.createObjectURL(blob) + var link = document.createElement('a') + link.href = videoURL + link.download = "file.webm" + link.click() + } + + setTime () { + let timeSinceStart = new Date().getTime() - this.recordingStartTime + let minutes = ""+Math.floor((timeSinceStart % (1000 * 60 * 60)) / (1000 * 60)) + let seconds = ""+Math.floor((timeSinceStart % (1000 * 60)) / 1000) + this.recordingTime.innerText = minutes.padStart(2,"0") + + ":" + seconds.padStart(2, "0") + } + + recordSketch (){ + if (this.recordingStartTime) { + this.recordingStartTime = false + this.recorderButton.className = "far fa-dot-circle icon" + this.recorderButton.style = "" + this.recordingTime.innerText = "" + clearInterval(this.recordingInterval) + this.recorder.stop() + } else { + this.recordingStartTime = new Date().getTime() + this.recordingInterval = setInterval(this.setTime.bind(this),1) + this.recorderButton.className = "fas fa-dot-circle icon" + this.recorderButton.style = "color:red" + let canvas = document.querySelector("canvas") + let canvasStream = canvas.captureStream(30) + this.recorder = new MediaRecorder(canvasStream, {'mimeType': 'video/webm', 'videoBitsPerSecond': 2500000}) + this.recorder.ondataavailable = this.downloadRecording + this.recorder.start() + } + } + showConfirmation(successCallback, terminateCallback) { var c = prompt("Pressing OK will share this sketch to \nhttps://twitter.com/hydra_patterns.\n\nInclude your name or twitter handle (optional):") console.log('confirm value', c) diff --git a/hydra-server/public/bundle.js b/hydra-server/public/bundle.js index 52f1429fd..d2e3e4bea 100644 --- a/hydra-server/public/bundle.js +++ b/hydra-server/public/bundle.js @@ -571,14 +571,20 @@ class Menu { this.sketches = obj.sketches this.editor = obj.editor this.hydra = obj.hydra + this.recorder = undefined + this.recordingStartTime = false + this.recordingInterval = false // variables related to popup window this.closeButton = document.getElementById("close-icon") this.clearButton = document.getElementById("clear-icon") this.shareButton = document.getElementById("share-icon") + this.recordingTime = document.getElementById("recording-time") + this.recorderButton = document.getElementById("recorder-icon") this.shuffleButton = document.getElementById("shuffle-icon") this.editorText = document.getElementsByClassName('CodeMirror-scroll')[0] + this.recorderButton.onclick = this.recordSketch.bind(this) this.shuffleButton.onclick = this.shuffleSketches.bind(this) this.shareButton.onclick = this.shareSketch.bind(this) this.clearButton.onclick = this.clearAll.bind(this) @@ -612,6 +618,50 @@ class Menu { }) } + downloadRecording (e) { + var videoData = [ e.data ] + var blob = new Blob(videoData, {'type': 'video/webm'}) + var videoURL = URL.createObjectURL(blob) + var link = document.createElement('a') + link.href = videoURL + link.download = "file.webm" + link.click() + } + + setTime () { + console.log("time!") + let timeSinceStart = new Date().getTime() - this.recordingStartTime + let minutes = ""+Math.floor((timeSinceStart % (1000 * 60 * 60)) / (1000 * 60)) + let seconds = ""+Math.floor((timeSinceStart % (1000 * 60)) / 1000) + this.recordingTime.innerText = minutes.padStart(2,"0") + ":" + seconds.padStart(2, "0") + } + + recordSketch (){ + if (this.recordingStartTime) { + console.log("stop recording") + this.recordingStartTime = false + this.recorderButton.className = "far fa-dot-circle icon" + this.recorderButton.style = "" + this.recordingTime.innerText = "" + clearInterval(this.recordingInterval) + this.recorder.stop() + } else { + console.log("start recording") + this.recordingStartTime = new Date().getTime() + this.recordingInterval = setInterval(this.setTime.bind(this),1) + this.recorderButton.className = "fas fa-dot-circle icon" + this.recorderButton.style = "color:red" + let canvas = document.querySelector("canvas") + let canvasStream = canvas.captureStream(30) + this.recorder = new MediaRecorder(canvasStream, {'mimeType': 'video/webm', 'videoBitsPerSecond': 2500000}) + // this.recorder.setVideoSize(canvas.width, canvas.height) + // this.recorder.setVideoFrameRate(30) + // this.recorder.setVideoEncoder(MediaRecorder.VideoEncoder.H264) + this.recorder.ondataavailable = this.downloadRecording + this.recorder.start() + } + } + showConfirmation(successCallback, terminateCallback) { var c = prompt("Pressing OK will share this sketch to \nhttps://twitter.com/hydra_patterns.\n\nInclude your name or twitter handle (optional):") console.log('confirm value', c) diff --git a/hydra-server/public/index.html b/hydra-server/public/index.html index 846a87e27..90a68a3a0 100755 --- a/hydra-server/public/index.html +++ b/hydra-server/public/index.html @@ -37,6 +37,8 @@