> ## Documentation Index
> Fetch the complete documentation index at: https://rdsciv/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Loading Images, Videos, and Webcam into ASCII

> ASCII accepts JPG, PNG, WebP, GIF, MP4, and MOV files via drag-and-drop, clipboard paste, the file picker, or live webcam capture in any modern browser.

You can load source media into ASCII in three ways: by dragging a file onto the page, by using the file picker, or by pasting an image directly from your clipboard. Once a source is loaded, the tool immediately renders ASCII art and displays the filename and dimensions below the drop zone. Videos add a scrub bar and playback controls; webcam mode feeds a live stream.

## Supported formats

<Tabs>
  <Tab title="Image">
    ASCII accepts the following image formats:

    | Format     | Notes                                  |
    | ---------- | -------------------------------------- |
    | JPG / JPEG | Most common photo format               |
    | PNG        | Lossless, supports transparency        |
    | WebP       | Modern compressed format               |
    | GIF        | Animated GIFs use only the first frame |

    After loading, the source info line below the drop zone shows the filename and pixel dimensions, for example: `photo.jpg — 1920×1080`.
  </Tab>

  <Tab title="Video">
    ASCII accepts MP4 and MOV video files. When a video loads:

    * A **scrub bar** appears below the drop zone, letting you seek to any point in the video.
    * A **Play / Pause** button lets you play the video in real time and see the ASCII render update live.
    * The duration is displayed next to the scrub bar (e.g., `12.34s`).

    The ASCII canvas updates on every seek and on every frame while playing.
  </Tab>

  <Tab title="Webcam">
    Click the **Start webcam** button below the drop zone to begin a live webcam feed. The ASCII canvas will update in real time as the camera captures frames.

    <Note>
      Your browser will ask for camera permission the first time you click **Start webcam**. You must grant permission for the feed to start. If you deny it, the tool will show a "Webcam access denied" alert.
    </Note>

    Click **Stop webcam** (the same button, relabeled) to end the feed and release the camera.
  </Tab>
</Tabs>

## Loading a file via drag-and-drop

<Steps>
  <Step title="Drag your file over the page">
    Drag any supported image or video file from your file manager onto the browser window. A green overlay labeled **DROP IMAGE** appears over the entire page, confirming the drop target is active.
  </Step>

  <Step title="Release to load">
    Drop the file anywhere on the page. The green overlay disappears and ASCII begins rendering immediately. The source info line updates with the filename and pixel dimensions.
  </Step>

  <Step title="Verify the source info">
    Check the green text line directly below the drop zone. It shows the filename and the original pixel dimensions, for example `sunset.png — 3840×2160`. The output canvas is capped at 1600 px wide; sources wider than that are downsampled to fit.
  </Step>
</Steps>

## Using the file picker

Click anywhere inside the dashed drop zone (labeled **Drop image or click**) to open your operating system's file picker. Select any supported image or video file. The tool loads it the same way as a drag-and-drop.

<Tip>
  You can paste an image directly from your clipboard without touching the file system. Copy any image (for example, a screenshot or an image copied from a web page) and press **Ctrl+V** (or **Cmd+V** on macOS) anywhere on the page. ASCII detects the clipboard image and loads it instantly.
</Tip>

## Output canvas sizing

The output canvas width is capped at **1600 px**. If the source image or video is wider, it is automatically downsampled to fit within that limit while preserving the aspect ratio. The source info line always shows the *original* dimensions, not the downsampled size.