apps/streamana
1
0
Fork 0
mirror of https://github.com/davedoesdev/streamana.git synced 2025-11-03 03:03:17 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix rotated locked portrait

Browse Source
This commit is contained in:
David Halls
2021-07-24 08:17:45 +01:00
parent b86acdf4b5
commit 05724ed49e
3 changed files with 4550 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
site/example.js
View File

@@ -172,9 +172,9 @@ async function start() {
} else { } else {
if (lock_portrait_el.checked) { if (lock_portrait_el.checked) {
lock_portrait = true; lock_portrait = true;
//canvas_el.classList.add('rotate'); canvas_el.classList.add('rotate');
//canvas_el.classList.remove('mw-100', 'mh-100'); canvas_el.classList.remove('mw-100', 'mh-100');
//canvas_el_parent.classList.remove('mx-auto'); canvas_el_parent.classList.remove('mx-auto');
try { try {
await screen.orientation.lock('portrait'); await screen.orientation.lock('portrait');
} catch (ex) { } catch (ex) {
@@ -192,7 +192,8 @@ async function start() {
canvas_el.height = this.videoWidth; canvas_el.height = this.videoWidth;
} }
gl_canvas.setUniform('u_rotate', lock_portrait); gl_canvas.setUniform('u_rotate', lock_portrait);
const ar_canvas = canvas_el.width / canvas_el.height; const ar_canvas = lock_portrait ? canvas_el.height / canvas_el.width :
canvas_el.width / canvas_el.height;
// start the camera video // start the camera video
this.play(); this.play();
@@ -212,24 +213,29 @@ async function start() {
function update() { function update() {
// update the canvas // update the canvas
if (gl_canvas.onLoop()) { if (gl_canvas.onLoop()) {
// Note: we need to use canvas_el_parent.parentNode.offsetWidth
// to take into account margins
const ar_parent = canvas_el_parent.parentNode.offsetWidth /
canvas_el_parent.offsetHeight;
if (lock_portrait) { if (lock_portrait) {
//canvas_el.style.height = canvas_el_parent.clientWidth;
} else {
// Note: we need to use canvas_el_parent.parentNode.offsetWidth
// to take into account margins
const ar_parent = canvas_el_parent.parentNode.offsetWidth /
canvas_el_parent.offsetHeight;
if (ar_parent >= ar_canvas) { if (ar_parent >= ar_canvas) {
canvas_el.style.width = canvas_el_parent.offsetHeight * ar_canvas; canvas_el.style.width = canvas_el_parent.offsetHeight;
canvas_el.style.height = canvas_el_parent.offsetHeight; canvas_el.style.height = canvas_el_parent.offsetHeight * ar_canvas;
} else { } else {
canvas_el.style.width = canvas_el_parent.parentNode.offsetWidth; canvas_el.style.width = canvas_el_parent.parentNode.offsetWidth / ar_canvas;
canvas_el.style.height = canvas_el_paretn.parentNode.offsetWidth / ar_canvas; canvas_el.style.height = canvas_el_parent.parentNode.offsetWidth;
} }
} else if (ar_parent >= ar_canvas) {
canvas_el.style.width = canvas_el_parent.offsetHeight * ar_canvas;
canvas_el.style.height = canvas_el_parent.offsetHeight;
} else {
canvas_el.style.width = canvas_el_parent.parentNode.offsetWidth;
canvas_el.style.height = canvas_el_parent.parentNode.offsetWidth / ar_canvas;
} }
// TODO: response top section // TODO: response including top section
// fix locked portrait: rotate // can we zoom in unlocked portrait if device is in portrait orientation?
// can we zoom in locked + unlocked portrait if device is in portrait orientation? // consolidate shader
// windows, android, iOS, find a mac to test
} }
} }

4529
site/glsl-canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
site/glsl-canvas.min.js.map
View File

File diff suppressed because one or more lines are too long