comfyui-web-viewer

comfyui-web-viewer
★ 344

实时交互网页查看流媒体集成输入控制(键盘/OSC/声音)
为 ComfyUI 提供实时交互式网页查看与流媒体集成，支持键盘、OSC、声音输入等控制，方便在浏览器上即时互动与展示 AI 生成内容。
💡 在浏览器中实时控制并展示 ComfyUI 生成的视觉内容。
🍴 36 Forks💻 Python🔄 2026-03-26
📦
网盘下载
复制链接后前往夸克网盘下载
https://pan.quark.cn/s/9d76119b2ef2
📦 requirements.txt
aiohttp
ffmpeg-python
matplotlib
pydub
python-osc
qrcode[pil]
scikit-learn
srt
websockets
huggingface_hub
#
Music2Emotion
dependencies
chordparser==0.4.2
fire==0.7.0
gradio==5.40.0
hydra-core==1.3.2
librosa==0.10.2.post1
mir_eval==0.8.2
music21==9.3.0
numba==0.61.2
llvmlite==0.44.0
nnAudio==0.3.1
omegaconf==2.3.0
pandas==2.2.3
pretty_midi==0.2.10
pytorch_lightning==2.4.0
PyYAML==6.0.1
Requests==2.32.3
spotipy==2.25.1
soundfile
Star History Chart
📄 README

ComfyUI Web Viewer

[](https://deepwiki.com/VrchStudio/comfyui-web-viewer)

The ComfyUI Web Viewer by vrch.ai is a custom node collection offering a real-time AI-generated interactive art framework. This utility integrates realtime streaming into ComfyUI workflows, supporting keyboard control nodes, OSC control nodes, sound input nodes, and more. Accessible from any device with a web browser, it enables real time interaction with AI-generated content, making it ideal for interactive visual projects and enhancing ComfyUI workflows with efficient content management and display.

✨ Features:

  • Real-Time AI Generation & Interaction: Immediate response for interactive creativity.
  • Multi-Input Support: Easily integrates keyboard, OSC, and audio input for versatile interactivity.
  • Universal Web Accessibility: Compatible with any device equipped with a web browser.

    • 🔗 Related Projects:

  • Comfyputer: 3D Printable & Portable DIY AI Computer for running ComfyUI – Coming Soon on Github
  • Agentic VJ: Real-time Visual Generation with Multi-modal Agents for Live Performances – Integrated with ComfyUI Web Viewer nodes. Releasing Soon on vrch.ai/vj and CES 2026!

    • 🚀 Support Us:

    If you find the ComfyUI Web Viewer useful or inspiring, consider supporting us:

  • 💖 Sponsor: Help us maintain and enhance the project through GitHub Sponsors.
  • ⭐ Star the Project: A star on GitHub greatly motivates us and helps increase visibility!
  • 📩 Business Inquiries: For commercial collaborations, reach us at hi@vrch.io.

    • Changelog

    see CHANGELOG

    Installation

    Install ComfyUI Web Viewer Custom Node

    Method 1: Auto Installation (Recommended)

    Simply search for ComfyUI Web Viewer in ComfyUI Manager and install it directly.

    Method 2: Manual Installation

  • Clone this repo into the custom_nodes directory of ComfyUI

    • “`

    git clone git@github.com:VrchStudio/comfyui-web-viewer.git

    “`

  • Install dependencies:

    • “`

    pip install -r requirements.txt

    “`

    or if you use the windows portable install, run this in ComfyUI_windows_portable folder:

    “`

    python_embeded\python.exe -m pip install -r ComfyUI\custom_nodes\comfyui-web-viewer\requirements.txt

    “`

  • Restart ComfyUI

    • Install Music2Emotion Plugin (Optional)

    To use the AUDIO Music to Emotion Detector @ vrch.ai node, you’ll need to install the Music2Emotion third-party module:

  • Navigate to the ComfyUI Web Viewer directory:

    • “`bash

    cd path/to/ComfyUI/custom_nodes/comfyui-web-viewer

    “`

  • Initialize and download the Music2Emotion submodule:

    • “`bash

    git submodule update –init –recursive

    “`

    Alternatively, you may maunally install it as follows:

    “`bash

    cd path/to/ComfyUI/custom_nodes/comfyui-web-viewer/third_party

    git clone https://github.com/VrchStudio/Music2Emotion.git music2emotion

    “`

  • Install dependencies using the main project’s requirements.txt:

    • “`bash

    pip install -r requirements.txt

    “`

    or for Windows portable install:

    “`bash

    python_embeded\python.exe -m pip install -r ComfyUI\custom_nodes\comfyui-web-viewer\requirements.txt

    “`

    > ⚠️ Important: Always use the main project’s requirements.txt instead of the third-party module’s requirements file to avoid dependency conflicts. The ComfyUI Web Viewer’s requirements.txt already includes all necessary Music2Emotion dependencies with compatible versions.

  • Restart ComfyUI

    • Note: If the Music2Emotion module is not installed, the emotion detection node will show a warning message but remain functional for workflow compilation. Other audio nodes will work normally without this optional dependency.

    How to Use

    Web Viewer Nodes

  • Documentation: Usage of Web Viewer nodes
  • Example workflows:
  • Workflow Example: Image Web Viewer node
  • Workflow Example: Image Flipbook Viewer node
  • Workflow Example: Video Web Viewer node (video only)
  • Workflow Example: Video Web Viewer node (video + sound)
  • Workflow Example: Audio Web Viewer node (voice clone)
  • Tutorials:
  • Fast Image to Video by LTX Videos and Ollama
  • Fast Image to Video by LTX Vidoes, MMAudio and Ollama
  • Real Time Voice Clone
  • Audio Picture Book with Your Own Voice

    • WebSocket Web Viewer Nodes

  • Documentation: Usage of WebSocket Viewer nodes
  • Example workflows:
  • Workflow Example: WebSocket Nodes
  • Tutorials: n/a

    • OSC Control Nodes

  • Documentation: Usage of OSC Control nodes
  • TouchOSC Control Panel:
  • comfyui_osc_control.tosc
  • Example workflows:
  • Workflow Example: OSC Control Nodes
  • Workflow Example: Live Portrait + Gamepad
  • Workflow Example: IC-Light
  • Tutorials:
  • Live Portrait + Gamepad

    • Key Control Nodes

  • Documentation: Usage of Key Control nodes
  • Example workflows:
  • Workflow Example: Key Control Nodes

    • Gamepad Nodes

  • Documentation: Usage of Gamepad nodes
  • Example workflows:
  • Workflow Example: Gamepad Nodes
  • Workflow Example: Gamepad with Live Portrait

    • Midi Device Nodes

  • Documentation: Usage of Midi Device nodes
  • Example workflows: TBA

    • Audio Nodes

  • Documentation: Usage of Audio nodes
  • Example workflows:
  • Workflow Example: Audio Recorder Node
  • Workflow Example: Music Emotion and Visualizer
  • Workflow Example: Microphone and Visualizer

    • Image Nodes

  • Documentation: Usage of Image nodes
  • Example workflows:
  • Workflow Example: Preview Image in Background

    • Logic Nodes

  • Documentation: Usage of Logic nodes
  • Example workflows: n/a

    • Text Nodes

  • Documentation: Usage of Text nodes
  • Example workflows:
  • Workflow Example: Text SRT Player Node
  • Tutorials:
  • Storytelling with Text SRT Player

    • Other Example Workflows

  • Rapid Text to Image (8K)
  • Auto Switch to Instant Queue and Run Workflow
  • Apple Vision Pro Ultrawide Wallpaper (5K)
  • Audio Picture Book with Your Own Voice (FLUX version)
  • Audio Picture Book with Your Own Voice (SDXL version)

    • Troubleshootings

    1. Image Not Displayed in Popped-Up Image Viewer Window

    For Chrome, you may need to add the ComfyUI server’s IP address manually in chrome://flags/#unsafely-treat-insecure-origin-as-secure to enable access to the content. For other browsers, an http-to-http setup should allow for seamless access without additional configuration.

    2. How can I resolve the CORS policy error when trying to display images?

    If you’re encountering a CORS policy error with a message like this:

    "origin 'https://vrch.ai' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"

    or

    "WARNING: request with non matching host and origin 127.0.0.1 !=vrch.ai, returning 403"

    you can resolve this by launching the ComfyUI service with the --enable-cors-header flag appended. For example:

    python main.py --enable-cors-header

    For additional details, refer to this discussion on GitHub.

    3. Why can’t the ComfyUI service run at HTTPS/TLS/SSL on port 8189?

    ComfyUI Web Viewer provides a build-in, self-signed certificate (intended for development only, not production use). To launch the ComfyUI service with HTTPS enabled on port 8189, use the following command:

    # Start ComfyUI with HTTPS using the built-in certificate and key
python main.py --tls-keyfile ./custom_nodes/comfyui-web-viewer/https/key.pem --tls-certfile ./custom_nodes/comfyui-web-viewer/https/cert.pem --port 8189 --listen

    For more details, refer to the ComfyUI official instructions.

    Version Update

    This project uses bump2version for version management. To update the version:

  • Ensure you have bump2version installed:

    • “`bash

    pip install bump2version

    “`

  • To update the version, run:

    • “`bash

    python update_version.py [major|minor|patch]

    “`

    Replace [major|minor|patch] with the part of the version you want to increment.

  • This will automatically:
  • Update the version number in __init__.py
  • Update the CHANGELOG.md file
  • Create a new git commit and tag (if you’re using git)
  • After running the script, review and update the CHANGELOG.md file with details about the new version’s changes.
  • Note: make sure you’ve put changes in Unreleased section manually

    • Contributing

    Created and maintained by the vrch.io team.

    Contributions are welcome! Please feel free to submit a Pull Request.

    Contact Us

    For any inquiries, you can contact us at hi@vrch.io.

    Star History

    [](https://www.star-history.com/#VrchStudio/comfyui-web-viewer&Date)

    License

    MIT License