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

Work better with only one video source

This commit is contained in:
Neale Pickett 2020-03-07 19:53:19 -07:00
parent f69f2fc6fa
commit 5b578d532f
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
convulse.html
View File

@ -39,7 +39,7 @@
</div> </div>
<div id="webcam-controls"> <div id="webcam-controls">
UR FACE UR FACE
<input id="webcam-size" type="range" min="0.05" max="1.0" step="0.01" value="0.2"> <input id="webcam-size" type="range" min="0" max="1" step="0.01" value="0.2">
<button id="webcam-pos">Move</button> <button id="webcam-pos">Move</button>
</div> </div>

8
convulse.js
View File

@ -55,7 +55,6 @@ class Convulse {
navigator.mediaDevices.getUserMedia({video: true, audio: true}) navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(media => { .then(media => {
console.log(media)
document.querySelector("#hello").classList.add("hidden") document.querySelector("#hello").classList.add("hidden")
this.webcamVideo.muted = true this.webcamVideo.muted = true
this.webcamVideo.srcObject = media this.webcamVideo.srcObject = media
@ -161,7 +160,7 @@ class Convulse {
} }
frame(timestamp) { frame(timestamp) {
if (this.webcamVideo.videoWidth > 0) { if (this.desktopVideo.videoWidth > 0) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
let desktopAR = this.desktopVideo.videoWidth / this.desktopVideo.videoHeight let desktopAR = this.desktopVideo.videoWidth / this.desktopVideo.videoHeight
@ -174,7 +173,9 @@ class Convulse {
desktopX, desktopY, desktopX, desktopY,
desktopWidth, desktopHeight desktopWidth, desktopHeight
) )
}
if (this.webcamVideo.videoWidth > 0) {
let webcamAR = this.webcamVideo.videoWidth / this.webcamVideo.videoHeight let webcamAR = this.webcamVideo.videoWidth / this.webcamVideo.videoHeight
let webcamHeight = this.canvas.height * this.webcamSize let webcamHeight = this.canvas.height * this.webcamSize
let webcamWidth = webcamHeight * webcamAR let webcamWidth = webcamHeight * webcamAR
@ -185,6 +186,7 @@ class Convulse {
webcamX, webcamY, webcamX, webcamY,
webcamWidth, webcamHeight webcamWidth, webcamHeight
) )
console.log(webcamAR)
} }
requestAnimationFrame(ts => this.frame(ts)) requestAnimationFrame(ts => this.frame(ts))