From 14a5f477deabc9bf3bc3d2bdf4ec19cee069dd8d Mon Sep 17 00:00:00 2001 From: Frederik Wouters Date: Wed, 1 Mar 2023 13:51:54 +0100 Subject: [PATCH 1/5] add video capture to take reas scribbles --- pages/index.js | 127 ++++++++++++++++++++++++++++++++++++++++++++- styles/globals.css | 3 ++ 2 files changed, 129 insertions(+), 1 deletion(-) diff --git a/pages/index.js b/pages/index.js index b1cca3e..4488735 100644 --- a/pages/index.js +++ b/pages/index.js @@ -85,6 +85,118 @@ export default function Home() { setIsProcessing(false); }; + function contrastImage(imageData, contrast) { // contrast input as percent; range [-1..1] + var data = imageData.data; // Note: original dataset modified directly! + contrast *= 255; + var factor = (contrast + 255) / (255.01 - contrast); //add .1 to avoid /0 error. + + for(var i=0;i= thresh) { + val = 255; + } else { + val = 0; + } + pixels[i] = pixels[i + 1] = pixels[i + 2] = val; + } +}; +function _toPixels (canvas) { + if (canvas instanceof ImageData) { + return canvas.data; + } else { + if (canvas.getContext('2d')) { + return canvas + .getContext('2d') + .getImageData(0, 0, canvas.width, canvas.height).data; + } else if (canvas.getContext('webgl')) { + const gl = canvas.getContext('webgl'); + const len = gl.drawingBufferWidth * gl.drawingBufferHeight * 4; + const data = new Uint8Array(len); + gl.readPixels( + 0, + 0, + canvas.width, + canvas.height, + gl.RGBA, + gl.UNSIGNED_BYTE, + data + ); + return data; + } + } +}; + + + const takePicture = async() => { + let click_button = document.querySelector("#click-photo"); + let dataurl = document.querySelector("#dataurl"); + let contrastcanvas = document.querySelector("#contrastcanvas"); + let dataurl_container = document.querySelector("#dataurl-container"); + + console.log('take pic'); + canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); + + // start transform + var ctxOrig = canvas.getContext("2d"); + var ctxOrigcontrasted = contrastcanvas.getContext("2d"); + var origBits = ctxOrig.getImageData(0, 0,canvas.width, canvas.height); + treshold(origBits, 0.58); + ctxOrigcontrasted.putImageData(origBits, 0, 0); + + // end contrast + let image_data_url = canvas.toDataURL('image/jpeg'); + console.log('image_data_url'); + + dataurl.value = image_data_url; + dataurl_container.style.display = 'block'; + video.style.display = 'none'; + contrastcanvas.style.display = 'block'; + //click_button.style.display = 'none'; + } + const openCamera = async () => { + console.log('Open camera'); + let video = document.querySelector("#video"); + let click_button = document.querySelector("#click-photo"); + let canvas = document.querySelector("#canvas"); + let stream = null; + try { + stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false }); + } + catch(error) { + alert(error.message); + return; + } + + video.srcObject = stream; + video.style.display = 'block'; + // hide campera button + video.style.display = 'block'; + click_button.style.display = 'block'; + canvas.style.display = 'block'; + + }; + + return (
@@ -95,6 +207,7 @@ export default function Home() { property="og:image" content={`${HOST}/og-b7xwc4g4wrdrtneilxnbngzvti.png`} /> + {pkg.appName}s
@@ -108,12 +221,23 @@ export default function Home() {

+ + +
+ + +
Image Data URL
+ +
+
+ +
- +