neale
/
convulse
mirror of https://github.com/nealey/convulse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

icon, okay to not allow camera or screengrab

This commit is contained in:
Neale Pickett 2020-03-07 19:44:54 -07:00
parent 6264503326
commit f69f2fc6fa
4 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
convulse.css
View File

@ -7,9 +7,6 @@ body {
canvas { canvas {
width: 100vw; width: 100vw;
} }
canvas.recording {
filter: initial;
}
.hidden { .hidden {
display: none; display: none;

1
convulse.html
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<title>Convulse</title> <title>Convulse</title>
<link rel="icon" href="convulse.png">
<link rel="stylesheet" href="convulse.css"> <link rel="stylesheet" href="convulse.css">
<script src="convulse.js"></script> <script src="convulse.js"></script>
</head> </head>

61
convulse.js
View File

@ -49,37 +49,42 @@ class Convulse {
document.querySelector("#desktop-pos").addEventListener("click", e => this.setDesktopPos(e)) document.querySelector("#desktop-pos").addEventListener("click", e => this.setDesktopPos(e))
this.desktopPos = localStorage.desktopPos || 0 this.desktopPos = localStorage.desktopPos || 0
this.init() this.recorder = {state: "unstarted"}
}
async init() {
this.webcamVideo.muted = true
this.webcamVideo.srcObject = await navigator.mediaDevices.getUserMedia({video: true, audio: true})
this.webcamVideo.play()
this.desktopVideo.srcObject = await navigator.mediaDevices.getDisplayMedia({video: {cursor: "always"}})
this.desktopVideo.play()
document.querySelector("#hello").classList.add("hidden")
this.mediaStream = new MediaStream() this.mediaStream = new MediaStream()
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(media => {
console.log(media)
document.querySelector("#hello").classList.add("hidden")
this.webcamVideo.muted = true
this.webcamVideo.srcObject = media
this.webcamVideo.play()
for (let at of media.getAudioTracks()) {
this.mediaStream.addTrack(at)
console.log("Adding audio track", at)
}
})
.catch(err => {
toast("Couldn't open camera!")
})
navigator.mediaDevices.getDisplayMedia({video: {cursor: "always"}})
.then(media => {
document.querySelector("#hello").classList.add("hidden")
this.desktopVideo.srcObject = media
this.desktopVideo.play()
})
.catch(err => {
toast("Couldn't open screen grabber!")
})
let canvasStream = this.canvas.captureStream(30) let canvasStream = this.canvas.captureStream(30)
for (let vt of canvasStream.getVideoTracks()) { for (let vt of canvasStream.getVideoTracks()) {
this.mediaStream.addTrack(vt) this.mediaStream.addTrack(vt)
console.log("Adding video track", vt) console.log("Adding video track", vt)
} }
for (let at of this.webcamVideo.srcObject.getAudioTracks()) {
this.mediaStream.addTrack(at)
console.log("Adding audio track", at)
}
this.recorder = new MediaRecorder(this.mediaStream, {mimeType: "video/webm"})
this.recorder.addEventListener("dataavailable", event => {
if (event.data && event.data.size > 0) {
this.chunks.push(event.data)
}
})
this.frame() this.frame()
toast("Click anywhere to start and stop recording") toast("Click anywhere to start and stop recording")
@ -114,14 +119,24 @@ class Convulse {
document.querySelector("#indicator").classList.add("hidden") document.querySelector("#indicator").classList.add("hidden")
button.textContent = "⏺️" button.textContent = "⏺️"
toast("Stopped") toast("Stopped")
document.title = "Convulse: stopped"
this.save() this.save()
} else { } else {
// Start // Start
this.chunks = []
this.recorder = new MediaRecorder(this.mediaStream, {mimeType: "video/webm"})
this.recorder.addEventListener("dataavailable", event => {
if (event.data && event.data.size > 0) {
this.chunks.push(event.data)
}
})
this.recorder.start(10) this.recorder.start(10)
this.canvas.classList.add("recording") this.canvas.classList.add("recording")
document.querySelector("#indicator").classList.remove("hidden") document.querySelector("#indicator").classList.remove("hidden")
button.textContent = "⏹️" button.textContent = "⏹️"
toast("Recording: click anywhere to stop") toast("Recording: click anywhere to stop")
document.title = "Convulse: recording"
} }
} }

BIN
convulse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB