mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-24 08:19:51 +00:00
Apply new code format standard (#217)
This commit is contained in:
Chenlei Hu
@@ -1,140 +1,140 @@
|
||||
import { app } from "../../scripts/app";
|
||||
import { api } from "../../scripts/api";
|
||||
import { app } from '../../scripts/app'
|
||||
import { api } from '../../scripts/api'
|
||||
|
||||
const WEBCAM_READY = Symbol();
|
||||
const WEBCAM_READY = Symbol()
|
||||
|
||||
app.registerExtension({
|
||||
name: "Comfy.WebcamCapture",
|
||||
name: 'Comfy.WebcamCapture',
|
||||
getCustomWidgets(app) {
|
||||
return {
|
||||
WEBCAM(node, inputName) {
|
||||
let res;
|
||||
node[WEBCAM_READY] = new Promise((resolve) => (res = resolve));
|
||||
let res
|
||||
node[WEBCAM_READY] = new Promise((resolve) => (res = resolve))
|
||||
|
||||
const container = document.createElement("div");
|
||||
container.style.background = "rgba(0,0,0,0.25)";
|
||||
container.style.textAlign = "center";
|
||||
const container = document.createElement('div')
|
||||
container.style.background = 'rgba(0,0,0,0.25)'
|
||||
container.style.textAlign = 'center'
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.style.height = video.style.width = "100%";
|
||||
const video = document.createElement('video')
|
||||
video.style.height = video.style.width = '100%'
|
||||
|
||||
const loadVideo = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: true,
|
||||
audio: false,
|
||||
});
|
||||
container.replaceChildren(video);
|
||||
audio: false
|
||||
})
|
||||
container.replaceChildren(video)
|
||||
|
||||
setTimeout(() => res(video), 500); // Fallback as loadedmetadata doesnt fire sometimes?
|
||||
video.addEventListener("loadedmetadata", () => res(video), false);
|
||||
video.srcObject = stream;
|
||||
video.play();
|
||||
setTimeout(() => res(video), 500) // Fallback as loadedmetadata doesnt fire sometimes?
|
||||
video.addEventListener('loadedmetadata', () => res(video), false)
|
||||
video.srcObject = stream
|
||||
video.play()
|
||||
} catch (error) {
|
||||
const label = document.createElement("div");
|
||||
label.style.color = "red";
|
||||
label.style.overflow = "auto";
|
||||
label.style.maxHeight = "100%";
|
||||
label.style.whiteSpace = "pre-wrap";
|
||||
const label = document.createElement('div')
|
||||
label.style.color = 'red'
|
||||
label.style.overflow = 'auto'
|
||||
label.style.maxHeight = '100%'
|
||||
label.style.whiteSpace = 'pre-wrap'
|
||||
|
||||
if (window.isSecureContext) {
|
||||
label.textContent =
|
||||
"Unable to load webcam, please ensure access is granted:\n" +
|
||||
error.message;
|
||||
'Unable to load webcam, please ensure access is granted:\n' +
|
||||
error.message
|
||||
} else {
|
||||
label.textContent =
|
||||
"Unable to load webcam. A secure context is required, if you are not accessing ComfyUI on localhost (127.0.0.1) you will have to enable TLS (https)\n\n" +
|
||||
error.message;
|
||||
'Unable to load webcam. A secure context is required, if you are not accessing ComfyUI on localhost (127.0.0.1) you will have to enable TLS (https)\n\n' +
|
||||
error.message
|
||||
}
|
||||
|
||||
container.replaceChildren(label);
|
||||
container.replaceChildren(label)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
loadVideo();
|
||||
loadVideo()
|
||||
|
||||
return { widget: node.addDOMWidget(inputName, "WEBCAM", container) };
|
||||
},
|
||||
};
|
||||
return { widget: node.addDOMWidget(inputName, 'WEBCAM', container) }
|
||||
}
|
||||
}
|
||||
},
|
||||
nodeCreated(node) {
|
||||
if ((node.type, node.constructor.comfyClass !== "WebcamCapture")) return;
|
||||
if ((node.type, node.constructor.comfyClass !== 'WebcamCapture')) return
|
||||
|
||||
let video;
|
||||
const camera = node.widgets.find((w) => w.name === "image");
|
||||
const w = node.widgets.find((w) => w.name === "width");
|
||||
const h = node.widgets.find((w) => w.name === "height");
|
||||
let video
|
||||
const camera = node.widgets.find((w) => w.name === 'image')
|
||||
const w = node.widgets.find((w) => w.name === 'width')
|
||||
const h = node.widgets.find((w) => w.name === 'height')
|
||||
const captureOnQueue = node.widgets.find(
|
||||
(w) => w.name === "capture_on_queue"
|
||||
);
|
||||
(w) => w.name === 'capture_on_queue'
|
||||
)
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
const canvas = document.createElement('canvas')
|
||||
|
||||
const capture = () => {
|
||||
canvas.width = w.value;
|
||||
canvas.height = h.value;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(video, 0, 0, w.value, h.value);
|
||||
const data = canvas.toDataURL("image/png");
|
||||
canvas.width = w.value
|
||||
canvas.height = h.value
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(video, 0, 0, w.value, h.value)
|
||||
const data = canvas.toDataURL('image/png')
|
||||
|
||||
const img = new Image();
|
||||
const img = new Image()
|
||||
img.onload = () => {
|
||||
node.imgs = [img];
|
||||
app.graph.setDirtyCanvas(true);
|
||||
node.imgs = [img]
|
||||
app.graph.setDirtyCanvas(true)
|
||||
requestAnimationFrame(() => {
|
||||
node.setSizeForImage?.();
|
||||
});
|
||||
};
|
||||
img.src = data;
|
||||
};
|
||||
node.setSizeForImage?.()
|
||||
})
|
||||
}
|
||||
img.src = data
|
||||
}
|
||||
|
||||
const btn = node.addWidget(
|
||||
"button",
|
||||
"waiting for camera...",
|
||||
"capture",
|
||||
'button',
|
||||
'waiting for camera...',
|
||||
'capture',
|
||||
capture
|
||||
);
|
||||
btn.disabled = true;
|
||||
btn.serializeValue = () => undefined;
|
||||
)
|
||||
btn.disabled = true
|
||||
btn.serializeValue = () => undefined
|
||||
|
||||
camera.serializeValue = async () => {
|
||||
if (captureOnQueue.value) {
|
||||
capture();
|
||||
capture()
|
||||
} else if (!node.imgs?.length) {
|
||||
const err = `No webcam image captured`;
|
||||
alert(err);
|
||||
throw new Error(err);
|
||||
const err = `No webcam image captured`
|
||||
alert(err)
|
||||
throw new Error(err)
|
||||
}
|
||||
|
||||
// Upload image to temp storage
|
||||
const blob = await new Promise<Blob>((r) => canvas.toBlob(r));
|
||||
const name = `${+new Date()}.png`;
|
||||
const file = new File([blob], name);
|
||||
const body = new FormData();
|
||||
body.append("image", file);
|
||||
body.append("subfolder", "webcam");
|
||||
body.append("type", "temp");
|
||||
const resp = await api.fetchApi("/upload/image", {
|
||||
method: "POST",
|
||||
body,
|
||||
});
|
||||
const blob = await new Promise<Blob>((r) => canvas.toBlob(r))
|
||||
const name = `${+new Date()}.png`
|
||||
const file = new File([blob], name)
|
||||
const body = new FormData()
|
||||
body.append('image', file)
|
||||
body.append('subfolder', 'webcam')
|
||||
body.append('type', 'temp')
|
||||
const resp = await api.fetchApi('/upload/image', {
|
||||
method: 'POST',
|
||||
body
|
||||
})
|
||||
if (resp.status !== 200) {
|
||||
const err = `Error uploading camera image: ${resp.status} - ${resp.statusText}`;
|
||||
alert(err);
|
||||
throw new Error(err);
|
||||
const err = `Error uploading camera image: ${resp.status} - ${resp.statusText}`
|
||||
alert(err)
|
||||
throw new Error(err)
|
||||
}
|
||||
return `webcam/${name} [temp]`;
|
||||
};
|
||||
return `webcam/${name} [temp]`
|
||||
}
|
||||
|
||||
node[WEBCAM_READY].then((v) => {
|
||||
video = v;
|
||||
video = v
|
||||
// If width isnt specified then use video output resolution
|
||||
if (!w.value) {
|
||||
w.value = video.videoWidth || 640;
|
||||
h.value = video.videoHeight || 480;
|
||||
w.value = video.videoWidth || 640
|
||||
h.value = video.videoHeight || 480
|
||||
}
|
||||
btn.disabled = false;
|
||||
btn.label = "capture";
|
||||
});
|
||||
},
|
||||
});
|
||||
btn.disabled = false
|
||||
btn.label = 'capture'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user