Commit b1250b
2025-07-06 22:09:41 Tebby Dog: Init| /dev/null .. 2-code/docker/flash-container.md | |
| @@ 0,0 1,173 @@ | |
| + | # Flash-Container |
| + | |
| + | |
| + | # FlashContainer: Host & Serve Flash (.swf) Files with Ruffle |
| + | |
| + | **FlashContainer** is a lightweight container designed to host and serve Flash `.swf` files using the Ruffle emulator. This allows you to easily run and view Flash-based content in a modern browser, even after Flash's official deprecation. |
| + | |
| + | ## How It Works |
| + | |
| + | This container runs a web server using Node.js and serves `.swf` files via the [Ruffle](https://ruffle.rs/) emulator, which is a Flash Player emulator written in Rust. The emulator provides a modern way to play old Flash content by converting it to formats supported by current browsers. |
| + | |
| + | - **Ruffle Integration**: The container downloads the latest nightly release of Ruffle, ensuring up-to-date compatibility with `.swf` files. |
| + | - **http-server**: This serves the content via HTTP, exposing it on port 80. |
| + | - **External SWF File**: You can map your own `.swf` files via Docker volume, making it easy to change content without modifying the image itself. |
| + | |
| + | ## Usage |
| + | |
| + | 1. **Pull the Image** |
| + | ```bash |
| + | docker pull tebwritescode/flashcontainer |
| + | ``` |
| + | |
| + | 2. **Run the Container** |
| + | |
| + | Mount your `.swf` file into the container with a volume mapping: |
| + | |
| + | ```bash |
| + | docker run -d -p 80:80 -v /path/to/your/game.swf:/app/game.swf tebwritescode/flashcontainer |
| + | ``` |
| + | |
| + | - `/path/to/your/game.swf` should be replaced with the path to your local `.swf` file. |
| + | - The container will serve your `.swf` file at `http://localhost`. |
| + | |
| + | 3. **Access the Website** |
| + | |
| + | Open a browser and navigate to `http://localhost` (or the IP where your container is hosted) to view and interact with your Flash file. |
| + | |
| + | ## Features |
| + | |
| + | - **Serve Flash Content Easily**: Simple setup for serving `.swf` files. |
| + | - **Ruffle Emulator**: Play Flash content in a browser without needing Flash Player. |
| + | - **Volume Mapping**: No need to modify the container—just swap out the `.swf` file. |
| + | - **Lightweight**: Minimal image size using Node.js and Ruffle. |
| + | |
| + | ## Customization |
| + | |
| + | - You can modify the HTML file that hosts the `.swf` content by editing `index.html` and adjusting the Ruffle embed configurations. |
| + | - Use different `.swf` files by swapping the file you mount to `/app/game.swf`. |
| + | |
| + | ## Requirements |
| + | |
| + | - Docker installed on your host machine. |
| + | - A valid `.swf` file to be served. |
| + | |
| + | ## Screenshots |
| + |  |
| + | |
| + |  |
| + | |
| + |  |
| + | |
| + | --- |
| + | ## Source |
| + | Dockerfile |
| + | |
| + | ``` |
| + | # Base image with Node.js and http-server to serve files |
| + | FROM node:20-bullseye |
| + | |
| + | # Install http-server globally to serve files |
| + | RUN npm install -g http-server |
| + | |
| + | # Set working directory |
| + | WORKDIR /app |
| + | |
| + | # Download the specified nightly release of the Ruffle self-hosted package |
| + | # Install additional dependencies: Java, Git |
| + | RUN apt-get update && apt-get install -y \ |
| + | default-jdk \ |
| + | maven \ |
| + | git \ |
| + | default-mysql-client \ |
| + | libasound2-dev \ |
| + | libxcb-shape0-dev \ |
| + | libxcb-xfixes0-dev \ |
| + | libgtk-3-dev \ |
| + | libudev-dev \ |
| + | libxcb-xinput-dev \ |
| + | libxcb-xkb-dev \ |
| + | libxcb-cursor-dev \ |
| + | default-jre-headless \ |
| + | cmake \ |
| + | g++ \ |
| + | unzip \ |
| + | wget \ |
| + | && apt-get clean \ |
| + | curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \ |
| + | . "$HOME/.cargo/env" |
| + | |
| + | # Install curl and jq to fetch the latest Ruffle nightly release |
| + | RUN apt-get update && apt-get install -y curl jq |
| + | |
| + | # Download the latest nightly release of Ruffle |
| + | RUN LATEST_RELEASE_URL=$(curl -s https://api.github.com/repos/ruffle-rs/ruffle/releases | jq -r '.[] | select(.prerelease == true) | .assets[].browser_download_url | select(contains("web-selfhosted.zip"))' | head -n 1) && \ |
| + | wget $LATEST_RELEASE_URL -O /tmp/ruffle-nightly.zip && \ |
| + | mkdir -p /app/ruffle && \ |
| + | unzip /tmp/ruffle-nightly.zip -d /app/ruffle && \ |
| + | rm /tmp/ruffle-nightly.zip |
| + | |
| + | # Take out the trash |
| + | RUN rm -rf ./ruffle-nightly-2024_10_13-web-selfhosted.zip |
| + | |
| + | # Copy the local HTML file into the container |
| + | COPY ./index.html /app/index.html |
| + | |
| + | # Copy the local game file into the container |
| + | #COPY ./game.swf /app/game.swf |
| + | |
| + | # Expose port 80 for serving the SWF game |
| + | EXPOSE 80 |
| + | |
| + | # Command to serve the game using http-server |
| + | CMD ["http-server", ".", "-p", "80"] |
| + | ``` |
| + | |
| + | index.html |
| + | |
| + | ``` |
| + | <!DOCTYPE html> |
| + | <html lang="en"> |
| + | <head> |
| + | <meta charset="UTF-8"> |
| + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| + | <script src="ruffle/ruffle.js"></script> |
| + | <style> |
| + | html, body { |
| + | margin: 0; |
| + | padding: 0; |
| + | width: 100%; |
| + | height: 100%; |
| + | } |
| + | |
| + | #ruffle-player { |
| + | width: 100%; |
| + | height: 100%; |
| + | } |
| + | </style> |
| + | </head> |
| + | <body> |
| + | <script> |
| + | window.RufflePlayer = window.RufflePlayer || {}; |
| + | |
| + | window.RufflePlayer.config = { |
| + | "letterbox": "on", |
| + | } |
| + | |
| + | window.addEventListener("DOMContentLoaded", () => { |
| + | let ruffle = window.RufflePlayer.newest(); |
| + | let player = ruffle.createPlayer(); |
| + | player.style.width = "100%"; // Set player's width to 100% |
| + | player.style.height = "100%"; // Set player's height to 100% |
| + | document.body.appendChild(player); |
| + | player.load("game.swf"); // Load the local SWF file named game.swf |
| + | }); |
| + | </script> |
| + | </body> |
| + | </html> |
| + | ``` |
| + | --- |
| + | |
| + | |
| + | |
| + | By using **FlashContainer**, you can keep your favorite Flash content alive and playable through modern web technologies. |