fix canvas scaling nightmare - webgbcam - [fork] gameboy webcam
HTML git clone git://src.adamsgaard.dk/webgbcam
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
DIR commit 27a712f55eeacc65ffc232ea1641c733b734440b
DIR parent 648ef8ba8f3dbe99f78c15e63b59f57753349a69
HTML Author: Erin Pinheiro <hello@mynameiser.in>
Date: Sat, 24 Oct 2020 21:58:00 -0300
fix canvas scaling nightmare
Diffstat:
M app.js | 83 +++++++++++++++----------------
M index.html | 12 +++++++-----
2 files changed, 47 insertions(+), 48 deletions(-)
---
DIR diff --git a/app.js b/app.js
@@ -186,7 +186,6 @@ var amountOfCameras = 0;
var currentFacingMode = 'user';
var appScale;
var frameDrawing;
-var windowResizing;
// global settings for gbcamera
var renderWidth = 160,
@@ -514,15 +513,15 @@ document.addEventListener('DOMContentLoaded', function (event) {
}
});
-function resizedw(){
- initCameraStream();
- initCameraUI();
+function restartCamera() {
+ setTimeout(function() {
+ initCameraUI();
+ initCameraDrawing();
+ }, 300);
}
-window.onresize = function() {
- clearTimeout(windowResizing);
- windowResizing = setTimeout(resizedw, 500);
-};
+window.onorientationchange = restartCamera;
+window.onresize = restartCamera;
function initCameraUI() {
// figure out max integer render scale for window
@@ -628,47 +627,45 @@ function initCameraStream() {
window.stream = stream; // make stream available to browser console
cameraStream.srcObject = stream;
- const track = window.stream.getVideoTracks()[0];
- let settings = track.getSettings();
- let str = JSON.stringify(settings, null, 4);
- console.log('settings ' + str);
-
- if(screenIsPortrait()) {
- let width = settings.width;
- settings.width = settings.height;
- settings.height = width;
- }
+ setTimeout(initCameraDrawing, 500);
+ }
- // calculate scale and offset to render camera stream to camera view canvas
- if(settings.width >= settings.height) {
- // horizontal
- cameraVars.yScale = cameraVars.height;
- cameraVars.xScale = (cameraVars.height / settings.height) * settings.width;
- cameraVars.yOffset = 0;
- cameraVars.xOffset = -((cameraVars.xScale - cameraVars.width) / 2);
- } else {
- //vertical
- cameraVars.xScale = cameraVars.width;
- cameraVars.yScale = (cameraVars.width / settings.width) * settings.height;
- cameraVars.xOffset = 0;
- cameraVars.yOffset = -((cameraVars.yScale - cameraVars.height) / 2);
- }
+ function handleError(error) {
+ console.error('getUserMedia() error: ', error);
+ }
+}
- // canvas starts flipped for user facing camera
- cameraView.getContext('2d').setTransform(1, 0, 0, 1, 0, 0);
- if(settings.facingMode != 'environment') {
- cameraView.getContext('2d').scale(-1,1);
- cameraVars.xOffset *= -1;
- cameraVars.xScale *= -1;
- }
+function initCameraDrawing() {
+ const track = window.stream.getVideoTracks()[0];
+ let settings = track.getSettings();
+ let str = JSON.stringify(settings, null, 4);
+ console.log('settings ' + str);
- clearInterval(frameDrawing)
- frameDrawing = setInterval(drawFrame, 100);
+ // calculate scale and offset to render camera stream to camera view canvas
+ if(cameraStream.videoWidth >= cameraStream.videoHeight) {
+ // horizontal
+ cameraVars.yScale = cameraVars.height;
+ cameraVars.xScale = (cameraVars.height / cameraStream.videoHeight) * cameraStream.videoWidth;
+ cameraVars.yOffset = 0;
+ cameraVars.xOffset = -((cameraVars.xScale - cameraVars.width) / 2);
+ } else {
+ //vertical
+ cameraVars.xScale = cameraVars.width;
+ cameraVars.yScale = (cameraVars.width / cameraStream.videoWidth) * cameraStream.videoHeight;
+ cameraVars.xOffset = 0;
+ cameraVars.yOffset = -((cameraVars.yScale - cameraVars.height) / 2);
}
- function handleError(error) {
- console.error('getUserMedia() error: ', error);
+ // canvas starts flipped for user facing camera
+ cameraView.getContext('2d').setTransform(1, 0, 0, 1, 0, 0);
+ if(settings.facingMode != 'environment') {
+ cameraView.getContext('2d').scale(-1,1);
+ cameraVars.xOffset *= -1;
+ cameraVars.xScale *= -1;
}
+
+ clearInterval(frameDrawing)
+ frameDrawing = setInterval(drawFrame, 100);
}
function drawFrame() {
DIR diff --git a/index.html b/index.html
@@ -15,11 +15,13 @@
</head>
<body>
- <div id="camera" class="maple-window">
- <canvas id="app-view"></canvas>
- <canvas id="camera-view"></canvas>
- <canvas id="camera-output"></canvas>
- <video id="camera-stream" autoplay playsinline></video>
+ <div class="maple-window">
+ <div id="camera">
+ <canvas id="app-view"></canvas>
+ <canvas id="camera-view"></canvas>
+ <canvas id="camera-output"></canvas>
+ <video id="camera-stream" autoplay playsinline></video>
+ </div>
</div>
<div class="maple-window centered">