Con el siguiente código, la calidad del video que proviene de la cámara de mi Mac y se muestra dentro <video> es excelente.
Sin embargo, la calidad del cuadro que capturo y muestro en el lienzo de p5 es bastante baja, oscura y granulada. ¿Por qué es eso y puedo arreglarlo?
function setup() { let canvas = createCanvas(canvasSize, canvasSize) canvas.elt.width = canvasSize canvas.elt.height = canvasSize video = createCapture(VIDEO) } let PAUSE = false async function draw() { if (video && video.loadedmetadata) { if (!PAUSE) { // the quality of this image is much lower than what is shown inside p5's <video> image(video.get(), 0, 0, canvasSize, canvasSize, x, y, canvasSize, canvasSize) PAUSE = true } } }Encontré cuál era el problema.
No se debió a que configuré canvas.elt.width y canvas.elt.height , aunque configurarlos es redundante.
Es porque en el código que se muestra en el OP estaba capturando el primer cuadro y esto es demasiado pronto , por lo que el primer cuadro todavía está oscuro y borroso. Aparentemente, los primeros fotogramas que salen de la cámara son así.
Si le doy a mi código un retraso de, por ejemplo, 5 segundos, el cuadro que captura es exactamente de la misma calidad que el que proviene del video.
let video let canvasWidth = 400 // set this to 10 on https://editor.p5js.org/ and you'll see the problem const DELAY = 5000 function setup() { let canvas = createCanvas(canvasWidth, canvasWidth) canvas.elt.width = canvasWidth // redundant canvas.elt.height = canvasWidth // redundant video = createCapture(VIDEO) } let PAUSE = false let start = Date.now() async function draw() { let delay = Date.now() - start if (video && video.loadedmetadata) { if (delay > DELAY && !PAUSE) { PAUSE = true let x = Math.round((video.width / 2) - (canvasWidth / 2)) let y = Math.round((video.height / 2) - (canvasWidth / 2)) // the quality of this image is now perfect image(video.get(), 0, 0, canvasWidth, canvasWidth, x, y, canvasWidth, canvasWidth) } } }No debe configurar el ancho/alto de esta manera. Eso estropeará el tamaño en pantallas de alto DPI y hará que su imagen se vea estirada y borrosa.
const canvasSize = 500; function setup() { let canvas = createCanvas(canvasSize, canvasSize) // Don't do this, it will mess up the sizing on high DPI displays: // canvas.elt.width = canvasSize // canvas.elt.height = canvasSize video = createCapture(VIDEO) } let PAUSE = false; function draw() { if (video && video.loadedmetadata) { if (!PAUSE) { // the quality of this image is much lower than what is shown inside p5's <video> image(video.get(), 0, 0, canvasSize, canvasSize, 0, 0, canvasSize, canvasSize) } } } function keyPressed() { if (key === 'p') { PAUSE = !PAUSE; } }Con este código, pausé el video que se estaba procesando en p5.js y luego tomé una captura de pantalla. La versión del video que se muestra en el lienzo p5.js no se distingue del video en vivo.