diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index 23edf6ea68..3d13eb9ec8 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -75,6 +75,16 @@ export interface GraphNodeManager {
   // Access to original LiteGraph nodes (non-reactive)
   getNode(id: string): LGraphNode | undefined
 
+  // Update widget options (e.g., hidden, disabled) - triggers Vue reactivity
+  updateVueWidgetOptions(
+    nodeId: string,
+    widgetName: string,
+    options: Record<string, unknown>
+  ): void
+
+  // Refresh Vue widgets from LiteGraph node - use after modifying node.widgets
+  refreshVueWidgets(nodeId: string): void
+
   // Lifecycle methods
   cleanup(): void
 }
@@ -298,6 +308,67 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     }
   }
 
+  /**
+   * Updates Vue state when widget options change (e.g., hidden, disabled)
+   */
+  const updateVueWidgetOptions = (
+    nodeId: string,
+    widgetName: string,
+    options: Record<string, unknown>
+  ): void => {
+    try {
+      const currentData = vueNodeData.get(nodeId)
+      if (!currentData?.widgets) return
+
+      const updatedWidgets = currentData.widgets.map((w) =>
+        w.name === widgetName
+          ? { ...w, options: { ...w.options, ...options } }
+          : w
+      )
+      // Create a completely new object to ensure Vue reactivity triggers
+      const updatedData = {
+        ...currentData,
+        widgets: updatedWidgets
+      }
+
+      vueNodeData.set(nodeId, updatedData)
+    } catch (error) {
+      console.error('Error updating widget options:', error)
+    }
+  }
+
+  /**
+   * Refreshes Vue widget state from LiteGraph node widgets.
+   * Use this after directly modifying node.widgets to sync Vue state.
+   */
+  const refreshVueWidgets = (nodeId: string): void => {
+    try {
+      const node = nodeRefs.get(nodeId)
+      const currentData = vueNodeData.get(nodeId)
+      if (!node || !currentData) return
+
+      // Re-extract widgets from node
+      const slotMetadata = new Map<string, WidgetSlotMetadata>()
+      node.inputs?.forEach((input, index) => {
+        if (!input?.widget?.name) return
+        slotMetadata.set(input.widget.name, {
+          index,
+          linked: input.link != null
+        })
+      })
+
+      const freshWidgets =
+        node.widgets?.map(safeWidgetMapper(node, slotMetadata)) ?? []
+
+      vueNodeData.set(nodeId, {
+        ...currentData,
+        widgets: freshWidgets
+      })
+    } catch (error) {
+      console.error('Error refreshing Vue widgets:', error)
+    }
+  }
+
   /**
    * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
    */
@@ -624,6 +695,8 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   return {
     vueNodeData,
     getNode,
+    updateVueWidgetOptions,
+    refreshVueWidgets,
     cleanup
   }
 }
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index d3a34c8f17..e9e013edd0 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -95,6 +95,9 @@
     "save": "Save",
     "saving": "Saving",
     "no": "No",
+    "yes": "Yes",
+    "on": "On",
+    "off": "Off",
     "cancel": "Cancel",
     "close": "Close",
     "pressKeysForNewBinding": "Press keys for new binding",
@@ -144,6 +147,18 @@
     "control_before_generate": "control before generate",
     "choose_file_to_upload": "choose file to upload",
     "capture": "capture",
+    "capturePhoto": "Capture Photo",
+    "captureModeOnRun": "On Run",
+    "captureModeManual": "Manually",
+    "capturedImage": "Captured Image",
+    "retakePhoto": "Retake photo",
+    "clickToStopLivePreview": "Click to stop live preview",
+    "failedToCaptureImage": "Failed to capture image",
+    "noWebcamImageCaptured": "No webcam image captured",
+    "errorCapturingImage": "Error capturing image: {error}",
+    "unableToLoadWebcam": "Unable to load webcam: {error}",
+    "webcamRequiresTLS": "Unable to load webcam. TLS is required when not on localhost. Error: {error}",
+    "turnOnCamera": "Turn on Camera",
     "nodes": "Nodes",
     "community": "Community",
     "all": "All",
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 9a0983a4fb..8776a0290f 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -133,7 +133,9 @@ const processedWidgets = computed((): ProcessedWidget[] => {
 
   for (const widget of widgets) {
     // Skip if widget is in the hidden list for this node type
-    if (widget.options?.hidden) continue
+    if (widget.options?.hidden) {
+      continue
+    }
     if (widget.options?.canvasOnly) continue
     if (!widget.type) continue
     if (!shouldRenderAsVue(widget)) continue
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
index 6e5a349d44..30b975fc7c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-1">
     <Button
-      class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
+      class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2 my-2"
       v-bind="filteredProps"
       :aria-label="widget.label"
       size="small"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectToggle.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectToggle.vue
new file mode 100644
index 0000000000..4d03e2b012
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectToggle.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { t } from '@/i18n'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+import { cn } from '@/utils/tailwindUtil'
+import {
+  STANDARD_EXCLUDED_PROPS,
+  filterWidgetProps
+} from '@/utils/widgetPropFilter'
+
+import { WidgetInputBaseClass } from './layout'
+import WidgetLayoutField from './layout/WidgetLayoutField.vue'
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string | number | boolean>
+}>()
+
+const modelValue = defineModel<string | number | boolean>({ required: true })
+
+const filteredProps = computed(() =>
+  filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
+)
+
+interface ToggleOption {
+  label: string
+  value: string | number | boolean
+}
+
+const options = computed<ToggleOption[]>(() => {
+  // Get options from widget spec or widget options
+  const widgetOptions = props.widget.options?.values || props.widget.spec?.[0]
+
+  if (Array.isArray(widgetOptions)) {
+    // If options are strings/numbers, convert to {label, value} format
+    return widgetOptions.map((opt) => {
+      if (
+        typeof opt === 'object' &&
+        opt !== null &&
+        'label' in opt &&
+        'value' in opt
+      ) {
+        return opt as ToggleOption
+      }
+      return { label: String(opt), value: opt }
+    })
+  }
+
+  // Default options for boolean widgets
+  if (typeof modelValue.value === 'boolean') {
+    return [
+      { label: t('g.on', 'On'), value: true },
+      { label: t('g.off', 'Off'), value: false }
+    ]
+  }
+
+  // Fallback default options
+  return [
+    { label: t('g.yes', 'Yes'), value: true },
+    { label: t('g.no', 'No'), value: false }
+  ]
+})
+
+function handleSelect(value: string | number | boolean) {
+  modelValue.value = value
+}
+</script>
+
+<template>
+  <WidgetLayoutField :widget>
+    <div
+      v-bind="filteredProps"
+      :class="cn(WidgetInputBaseClass, 'flex gap-0.5 p-0.5 w-full')"
+      role="group"
+      :aria-label="widget.name"
+    >
+      <button
+        v-for="option in options"
+        :key="String(option.value)"
+        type="button"
+        :class="
+          cn(
+            'flex-1 px-2 py-1 text-xs font-medium rounded transition-all duration-150',
+            'bg-transparent border-none',
+            'focus:outline-none',
+            modelValue === option.value
+              ? 'bg-interface-menu-component-surface-selected text-base-foreground'
+              : 'text-muted-foreground hover:bg-interface-menu-component-surface-hovered'
+          )
+        "
+        :aria-pressed="modelValue === option.value"
+        @click="handleSelect(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    </div>
+  </WidgetLayoutField>
+</template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetWebcam.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetWebcam.vue
new file mode 100644
index 0000000000..9541f43600
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetWebcam.vue
@@ -0,0 +1,713 @@
+<template>
+  <div class="relative">
+    <div v-if="capturedImageUrl" class="mb-4">
+      <img
+        :src="capturedImageUrl"
+        class="w-full rounded-lg bg-node-component-surface"
+        :alt="t('g.capturedImage', 'Captured Image')"
+      />
+    </div>
+
+    <div v-else-if="!isShowingPreview" class="mb-4">
+      <Button
+        class="text-text-secondary w-full border-0 bg-component-node-widget-background hover:bg-secondary-background-hover"
+        :disabled="readonly"
+        @click="restartCameraPreview()"
+      >
+        {{ t('g.turnOnCamera', 'Turn on Camera') }}
+      </Button>
+    </div>
+
+    <div v-else ref="videoContainerRef" class="relative mb-4">
+      <video
+        ref="videoRef"
+        autoplay
+        muted
+        playsinline
+        class="w-full rounded-lg bg-node-component-surface"
+      />
+
+      <div
+        v-if="isHovered"
+        class="absolute inset-0 flex cursor-pointer flex-col items-center justify-center rounded-lg bg-black/50"
+        @click="stopCameraPreview"
+      >
+        <div class="text-base-foreground mb-4 text-base">
+          {{ t('g.clickToStopLivePreview', 'Click to stop live preview') }}
+        </div>
+
+        <div
+          class="flex size-10 items-center justify-center rounded-full bg-destructive-background"
+        >
+          <svg
+            class="size-4 text-white rounded-md"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              x="2"
+              y="2"
+              width="12"
+              height="12"
+              rx="1"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementHover } from '@vueuse/core'
+import { Button } from 'primevue'
+import {
+  computed,
+  markRaw,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRaw,
+  watch
+} from 'vue'
+
+import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
+import { t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+const { nodeManager } = useVueNodeLifecycle()
+
+const props = defineProps<{
+  widget: SimplifiedWidget<string | number | undefined>
+  readonly?: boolean
+  nodeId: string
+}>()
+
+const isCameraOn = ref(false)
+const isShowingPreview = ref(false)
+const isInitializingCamera = ref(false)
+const originalWidgets = ref<IBaseWidget[]>([])
+const videoRef = ref<HTMLVideoElement>()
+const videoContainerRef = ref<HTMLElement>()
+const stream = ref<MediaStream | null>(null)
+// Track pending video event listeners for cleanup
+const pendingVideoCleanup = ref<(() => void) | null>(null)
+const isHovered = useElementHover(videoContainerRef)
+// Instance-specific elements for capture - created per component instance
+const canvas = ref<HTMLCanvasElement | null>(null)
+const persistentVideo = ref<HTMLVideoElement | null>(null)
+const capturedImageUrl = ref<string | null>(null)
+const lastUploadedPath = ref<string | null>(null)
+
+const TOGGLED_WIDGET_NAMES = new Set(['height', 'width', 'capture_on_queue'])
+const CAPTURE_WIDGET_NAME = 'capture'
+const RETAKE_WIDGET_NAME = 'retake'
+const DEFAULT_VIDEO_WIDTH = 640
+const DEFAULT_VIDEO_HEIGHT = 480
+
+type WidgetTransformer = (widgets: IBaseWidget[]) => IBaseWidget[]
+
+interface WidgetUpdateOptions {
+  dirtyCanvas?: boolean
+}
+
+const litegraphNode = computed(() => {
+  if (!props.nodeId || !app.rootGraph) return null
+  return app.rootGraph.getNodeById(props.nodeId) as LGraphNode | null
+})
+
+function withLitegraphNode<T>(handler: (node: LGraphNode) => T) {
+  const node = litegraphNode.value
+  if (!node) return null
+  return handler(node)
+}
+
+function setNodeWidgets(
+  node: LGraphNode,
+  widgets: IBaseWidget[],
+  options: WidgetUpdateOptions = {}
+) {
+  node.widgets = widgets.map((widget) => markRaw(widget))
+
+  if (node.graph) {
+    node.graph._version++
+  }
+
+  if (options.dirtyCanvas ?? true) {
+    app.graph.setDirtyCanvas(true, true)
+  }
+}
+
+function updateNodeWidgets(
+  node: LGraphNode,
+  transformer: WidgetTransformer,
+  options: WidgetUpdateOptions = {}
+) {
+  const currentWidgets = node.widgets?.map((widget) => toRaw(widget)) ?? []
+  const updatedWidgets = transformer(currentWidgets)
+  setNodeWidgets(node, updatedWidgets, options)
+}
+
+function applyWidgetVisibility(
+  widget: IBaseWidget,
+  hidden: boolean
+): IBaseWidget {
+  if (!TOGGLED_WIDGET_NAMES.has(widget.name)) return widget
+
+  if (widget.name === 'capture_on_queue') {
+    // Mutate in place to preserve object identity for serializeValue closure
+    widget.type = 'selectToggle'
+    widget.label = 'Capture Image'
+    // Default to false (Manual mode) - only set if undefined/null
+    if (widget.value === undefined || widget.value === null) {
+      widget.value = false
+    }
+    widget.options = {
+      ...widget.options,
+      hidden,
+      values: [
+        { label: 'On Run', value: true },
+        { label: 'Manually', value: false }
+      ]
+    }
+    return widget
+  }
+
+  // For width/height, mutate options in place
+  widget.options = {
+    ...widget.options,
+    hidden
+  }
+  return widget
+}
+
+interface ActionWidgetConfig {
+  name: string
+  label: string
+  iconClass: string
+  onClick: () => void
+}
+
+function createActionWidget({
+  name,
+  label,
+  iconClass,
+  onClick
+}: ActionWidgetConfig): IBaseWidget {
+  return {
+    name,
+    label,
+    type: 'button',
+    value: undefined,
+    y: 100,
+    options: {
+      iconClass,
+      serialize: false,
+      hidden: false
+    },
+    callback: onClick
+  }
+}
+
+function updateCaptureButtonVisibility(isOnRunMode: boolean) {
+  withLitegraphNode((node) => {
+    // Update the LiteGraph widget options
+    const captureWidget = node.widgets?.find(
+      (w) => w.name === CAPTURE_WIDGET_NAME
+    )
+    if (captureWidget) {
+      captureWidget.options = {
+        ...captureWidget.options,
+        hidden: isOnRunMode
+      }
+    }
+
+    // Update Vue state directly to trigger reactivity
+    nodeManager.value?.updateVueWidgetOptions(
+      String(node.id),
+      CAPTURE_WIDGET_NAME,
+      { hidden: isOnRunMode }
+    )
+
+    app.graph.setDirtyCanvas(true, true)
+  })
+}
+
+// Computed to get capture_on_queue widget value from Vue state
+const captureOnQueueValue = computed(() => {
+  const vueNodeData = nodeManager.value?.vueNodeData.get(props.nodeId)
+  const widget = vueNodeData?.widgets?.find(
+    (w) => w.name === 'capture_on_queue'
+  )
+  return widget?.value === true
+})
+
+async function handleModeChange(isOnRunMode: boolean) {
+  updateCaptureButtonVisibility(isOnRunMode)
+
+  // When switching to "On Run" mode, clear captured image and restart camera
+  if (isOnRunMode && capturedImageUrl.value) {
+    capturedImageUrl.value = null
+    lastUploadedPath.value = null
+    // Remove retake button and restart camera preview
+    removeWidgetsByName([RETAKE_WIDGET_NAME])
+    await startCameraPreview()
+  }
+
+  // When switching to "Manually" mode, ensure capture button exists and is visible
+  if (!isOnRunMode) {
+    withLitegraphNode((node) => {
+      const hasRetakeButton = node.widgets?.some(
+        (w) => w.name === RETAKE_WIDGET_NAME
+      )
+      const hasCaptureButton = node.widgets?.some(
+        (w) => w.name === CAPTURE_WIDGET_NAME
+      )
+
+      // If there's no retake button and no capture button, add the capture button
+      if (!hasRetakeButton && !hasCaptureButton) {
+        updateNodeWidgets(node, (widgets) => {
+          const captureWidget = createActionWidget({
+            name: CAPTURE_WIDGET_NAME,
+            label: t('g.capturePhoto', 'Capture Photo'),
+            iconClass: 'icon-[lucide--camera]',
+            onClick: () => captureImage(node)
+          })
+          return [...widgets, captureWidget]
+        })
+        nodeManager.value?.refreshVueWidgets(String(node.id))
+      }
+    })
+  }
+}
+
+function setupCaptureOnQueueWatcher() {
+  // Set initial visibility
+  updateCaptureButtonVisibility(captureOnQueueValue.value)
+
+  // Watch for changes using Vue reactivity
+  watch(
+    captureOnQueueValue,
+    (isOnRunMode) => {
+      void handleModeChange(isOnRunMode)
+    },
+    { immediate: false }
+  )
+}
+
+function removeWidgetsByName(names: string[]) {
+  withLitegraphNode((node) => {
+    if (!node.widgets?.length) return
+    updateNodeWidgets(node, (widgets) =>
+      widgets.filter((widget) => !names.includes(widget.name))
+    )
+    // Refresh Vue state to pick up widget removal
+    nodeManager.value?.refreshVueWidgets(String(node.id))
+  })
+}
+
+function storeOriginalWidgets() {
+  withLitegraphNode((node) => {
+    if (!node.widgets) return
+    originalWidgets.value = node.widgets.map((widget) => toRaw(widget))
+  })
+}
+
+function hideWidgets() {
+  withLitegraphNode((node) => {
+    if (!node.widgets?.length) return
+
+    // Set default values AND apply visibility in one pass
+    // Mutate widgets in place to preserve object identity for serializeValue closure
+    updateNodeWidgets(
+      node,
+      (widgets) =>
+        widgets.map((widget) => {
+          applyWidgetVisibility(widget, true)
+
+          // Set default values for width and height if not already set
+          const needsDefault =
+            widget.value === undefined ||
+            widget.value === null ||
+            widget.value === 0 ||
+            widget.value === ''
+
+          if (widget.name === 'width' && needsDefault) {
+            widget.value = DEFAULT_VIDEO_WIDTH
+          }
+          if (widget.name === 'height' && needsDefault) {
+            widget.value = DEFAULT_VIDEO_HEIGHT
+          }
+
+          return widget
+        }),
+      { dirtyCanvas: false }
+    )
+
+    // Refresh Vue state to pick up the hidden widgets
+    nodeManager.value?.refreshVueWidgets(String(node.id))
+  })
+}
+
+function restoreWidgets() {
+  if (originalWidgets.value.length === 0) return
+  withLitegraphNode((node) => setNodeWidgets(node, originalWidgets.value))
+}
+
+function setupSerializeValue() {
+  withLitegraphNode((node) => {
+    const imageWidget = node.widgets?.find((w) => toRaw(w).name === 'image')
+    if (!imageWidget) return
+
+    imageWidget.serializeValue = async () => {
+      const captureOnQueueWidget = node.widgets?.find(
+        (w) => w.name === 'capture_on_queue'
+      )
+
+      // Strictly check for boolean true (On Run mode)
+      const shouldCaptureOnQueue = captureOnQueueWidget?.value === true
+
+      if (shouldCaptureOnQueue) {
+        // Auto-capture when queued - capture and upload immediately
+        const dataUrl = capturePhoto(node)
+        if (!dataUrl) {
+          const err = t('g.failedToCaptureImage', 'Failed to capture image')
+          useToastStore().addAlert(err)
+          throw new Error(err)
+        }
+        const path = await uploadImage(dataUrl, node)
+        return path
+      } else {
+        // Manual mode: validate image was captured
+        if (!lastUploadedPath.value || !node.imgs?.length) {
+          const err = t('g.noWebcamImageCaptured', 'No webcam image captured')
+          useToastStore().addAlert(err)
+          throw new Error(err)
+        }
+        return lastUploadedPath.value
+      }
+    }
+  })
+}
+
+function showWidgets() {
+  withLitegraphNode((node) => {
+    // Get current capture_on_queue value to determine initial button visibility
+    const captureOnQueueWidget = node.widgets?.find(
+      (w) => w.name === 'capture_on_queue'
+    )
+    const isOnRunMode = captureOnQueueWidget?.value === true
+
+    updateNodeWidgets(node, (widgets) => {
+      const sanitizedWidgets = widgets
+        .map((widget) => applyWidgetVisibility(widget, false))
+        .filter(
+          (widget) =>
+            widget.name !== RETAKE_WIDGET_NAME &&
+            widget.name !== CAPTURE_WIDGET_NAME
+        )
+
+      const captureWidget = createActionWidget({
+        name: CAPTURE_WIDGET_NAME,
+        label: t('g.capturePhoto', 'Capture Photo'),
+        iconClass: 'icon-[lucide--camera]',
+        onClick: () => captureImage(node)
+      })
+
+      // Hide capture button if in "On Run" mode
+      if (isOnRunMode) {
+        captureWidget.options = {
+          ...captureWidget.options,
+          hidden: true
+        }
+      }
+
+      return [...sanitizedWidgets, captureWidget]
+    })
+
+    // Refresh Vue state to pick up the new widgets
+    nodeManager.value?.refreshVueWidgets(String(node.id))
+
+    // Set up watcher to toggle capture button visibility when mode changes
+    setupCaptureOnQueueWatcher()
+  })
+}
+
+function capturePhoto(node: LGraphNode) {
+  if (!node) return null
+
+  // Use visible video element if available, otherwise use persistent video
+  const videoElement =
+    videoRef.value ?? (stream.value?.active ? persistentVideo.value : null)
+  if (!videoElement || !canvas.value) return null
+
+  const widthWidget = node.widgets?.find((w) => toRaw(w).name === 'width')
+  const heightWidget = node.widgets?.find((w) => toRaw(w).name === 'height')
+
+  const width = (widthWidget?.value as number) || DEFAULT_VIDEO_WIDTH
+  const height = (heightWidget?.value as number) || DEFAULT_VIDEO_HEIGHT
+
+  canvas.value.width = width
+  canvas.value.height = height
+
+  const ctx = canvas.value.getContext('2d')
+  if (!ctx) return null
+
+  ctx.drawImage(videoElement, 0, 0, width, height)
+  return canvas.value.toDataURL('image/png')
+}
+
+async function uploadImage(
+  dataUrl: string,
+  node: LGraphNode
+): Promise<string | null> {
+  try {
+    if (!canvas.value) throw new Error('Canvas not initialized')
+
+    const blob = await new Promise<Blob>((resolve, reject) => {
+      canvas.value!.toBlob((b) => {
+        if (b) resolve(b)
+        else reject(new Error('Failed to convert canvas to blob'))
+      })
+    })
+
+    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}`
+      useToastStore().addAlert(err)
+      throw new Error(err)
+    }
+
+    const uploadedPath = `webcam/${name} [temp]`
+    lastUploadedPath.value = uploadedPath
+
+    const img = new Image()
+    img.onload = () => {
+      node.imgs = [img]
+      app.graph.setDirtyCanvas(true)
+    }
+    img.src = dataUrl
+
+    return uploadedPath
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error)
+    useToastStore().addAlert(
+      t('g.errorCapturingImage', { error: errorMessage })
+    )
+    return null
+  }
+}
+
+async function captureImage(node: LGraphNode) {
+  const dataUrl = capturePhoto(node)
+  if (!dataUrl) return
+
+  capturedImageUrl.value = dataUrl
+  isShowingPreview.value = false
+
+  await uploadImage(dataUrl, node)
+
+  updateNodeWidgets(node, (widgets) => {
+    const preserved = widgets.filter((widget) => widget.type !== 'button')
+
+    const retakeWidget = createActionWidget({
+      name: RETAKE_WIDGET_NAME,
+      label: t('g.retakePhoto', 'Retake photo'),
+      iconClass: 'icon-[lucide--rotate-cw]',
+      onClick: () => handleRetake()
+    })
+
+    return [...preserved, retakeWidget]
+  })
+
+  // Refresh Vue state to pick up the new widgets
+  nodeManager.value?.refreshVueWidgets(String(node.id))
+}
+
+async function handleRetake() {
+  capturedImageUrl.value = null
+  lastUploadedPath.value = null
+  removeWidgetsByName([RETAKE_WIDGET_NAME])
+  await restartCameraPreview()
+}
+
+async function startCameraPreview() {
+  if (props.readonly) return
+
+  // Prevent concurrent camera initialization attempts
+  if (isInitializingCamera.value) return
+  isInitializingCamera.value = true
+
+  capturedImageUrl.value = null
+
+  try {
+    if (isCameraOn.value && stream.value && stream.value.active) {
+      isShowingPreview.value = true
+      await nextTick()
+
+      if (videoRef.value && stream.value) {
+        videoRef.value.srcObject = stream.value
+        await videoRef.value.play()
+      }
+
+      // Ensure persistent video also has the stream for background capture
+      if (
+        persistentVideo.value &&
+        (!persistentVideo.value.srcObject || persistentVideo.value.paused)
+      ) {
+        persistentVideo.value.srcObject = stream.value
+        await persistentVideo.value.play()
+      }
+
+      return
+    }
+
+    const cameraStream = await navigator.mediaDevices.getUserMedia({
+      video: true,
+      audio: false
+    })
+
+    stream.value = cameraStream
+    // Attach stream to persistent video for capture when UI video is hidden
+    if (persistentVideo.value) {
+      persistentVideo.value.srcObject = cameraStream
+      await persistentVideo.value.play()
+    }
+    isShowingPreview.value = true
+    await nextTick()
+
+    if (videoRef.value) {
+      videoRef.value.srcObject = cameraStream
+
+      await new Promise<void>((resolve, reject) => {
+        if (!videoRef.value) {
+          reject(new Error('Video element not found'))
+          return
+        }
+
+        const video = videoRef.value
+
+        const cleanup = () => {
+          video.removeEventListener('loadedmetadata', onLoadedMetadata)
+          video.removeEventListener('error', onError)
+          pendingVideoCleanup.value = null
+        }
+
+        const onLoadedMetadata = () => {
+          cleanup()
+          resolve()
+        }
+
+        const onError = (error: Event) => {
+          cleanup()
+          reject(error)
+        }
+
+        video.addEventListener('loadedmetadata', onLoadedMetadata)
+        video.addEventListener('error', onError)
+
+        // Store cleanup function for onUnmounted
+        pendingVideoCleanup.value = cleanup
+
+        setTimeout(() => {
+          cleanup()
+          resolve()
+        }, 1000)
+      })
+
+      await videoRef.value.play()
+    }
+
+    isCameraOn.value = true
+    showWidgets()
+    await nextTick()
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error)
+
+    if (window.isSecureContext) {
+      useToastStore().addAlert(
+        t('g.unableToLoadWebcam', { error: errorMessage })
+      )
+    } else {
+      useToastStore().addAlert(
+        t('g.webcamRequiresTLS', { error: errorMessage })
+      )
+    }
+
+    stopStreamTracks()
+    isShowingPreview.value = false
+  } finally {
+    isInitializingCamera.value = false
+  }
+}
+
+function stopCameraPreview() {
+  isShowingPreview.value = false
+  hideWidgets() // Hide the capture button when stopping preview
+}
+
+async function restartCameraPreview() {
+  stopStreamTracks()
+  isShowingPreview.value = false
+  await startCameraPreview()
+}
+
+function stopStreamTracks() {
+  if (!stream.value) return
+  stream.value.getTracks().forEach((track) => track.stop())
+  stream.value = null
+  isCameraOn.value = false
+}
+
+onMounted(async () => {
+  // Create instance-specific elements for capture
+  canvas.value = document.createElement('canvas')
+  persistentVideo.value = document.createElement('video')
+  persistentVideo.value.autoplay = true
+  persistentVideo.value.muted = true
+  persistentVideo.value.playsInline = true
+
+  // Order matters: first set defaults via hideWidgets, THEN store original widgets
+  // This ensures restoreWidgets() will restore the correct default values
+  hideWidgets()
+  // Wait for Vue reactivity to process the widget changes
+  await nextTick()
+  storeOriginalWidgets()
+  setupSerializeValue()
+})
+
+onUnmounted(() => {
+  // Clean up any pending video event listeners
+  pendingVideoCleanup.value?.()
+  stopStreamTracks()
+  restoreWidgets()
+
+  // Clean up instance-specific elements
+  if (persistentVideo.value) {
+    persistentVideo.value.srcObject = null
+    persistentVideo.value = null
+  }
+  canvas.value = null
+})
+</script>
diff --git a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
index f093f88b9c..be41f3a1e9 100644
--- a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
+++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
@@ -51,6 +51,12 @@ const AudioPreviewPlayer = defineAsyncComponent(
 const WidgetAudioUI = defineAsyncComponent(
   () => import('../components/WidgetAudioUI.vue')
 )
+const WidgetWebcam = defineAsyncComponent(
+  () => import('../components/WidgetWebcam.vue')
+)
+const WidgetSelectToggle = defineAsyncComponent(
+  () => import('../components/WidgetSelectToggle.vue')
+)
 const Load3D = defineAsyncComponent(
   () => import('@/components/load3d/Load3D.vue')
 )
@@ -64,7 +70,8 @@ export const FOR_TESTING = {
   WidgetMarkdown,
   WidgetSelect,
   WidgetTextarea,
-  WidgetToggleSwitch
+  WidgetToggleSwitch,
+  WidgetSelectToggle
 } as const
 
 interface WidgetDefinition {
@@ -157,6 +164,22 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
       essential: false
     }
   ],
+  [
+    'webcam',
+    {
+      component: WidgetWebcam,
+      aliases: ['WEBCAM'],
+      essential: false
+    }
+  ],
+  [
+    'selectToggle',
+    {
+      component: WidgetSelectToggle,
+      aliases: ['SELECT_TOGGLE'],
+      essential: false
+    }
+  ],
   ['load3D', { component: Load3D, aliases: ['LOAD_3D'], essential: false }]
 ]