Blame
|
1 | # Flash-Container |
||||||
| 2 | ||||||||
|
3 | Skip the fairy-tale, just give me the code already --> [Click Here](https://teb.codes/2-Code/Docker/Flash-Container#usage) |
||||||
|
4 | |||||||
| 5 | # FlashContainer: Host & Serve Flash (.swf) Files with Ruffle |
|||||||
| 6 | ||||||||
| 7 | **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. |
|||||||
| 8 | ||||||||
| 9 | ## How It Works |
|||||||
| 10 | ||||||||
| 11 | 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. |
|||||||
| 12 | ||||||||
| 13 | - **Ruffle Integration**: The container downloads the latest nightly release of Ruffle, ensuring up-to-date compatibility with `.swf` files. |
|||||||
| 14 | - **http-server**: This serves the content via HTTP, exposing it on port 80. |
|||||||
| 15 | - **External SWF File**: You can map your own `.swf` files via Docker volume, making it easy to change content without modifying the image itself. |
|||||||
| 16 | ||||||||
| 17 | ## Usage |
|||||||
| 18 | ||||||||
| 19 | 1. **Pull the Image** |
|||||||
| 20 | ```bash |
|||||||
| 21 | docker pull tebwritescode/flashcontainer |
|||||||
| 22 | ``` |
|||||||
| 23 | ||||||||
| 24 | 2. **Run the Container** |
|||||||
| 25 | ||||||||
| 26 | Mount your `.swf` file into the container with a volume mapping: |
|||||||
| 27 | ||||||||
| 28 | ```bash |
|||||||
| 29 | docker run -d -p 80:80 -v /path/to/your/game.swf:/app/game.swf tebwritescode/flashcontainer |
|||||||
| 30 | ``` |
|||||||
| 31 | ||||||||
| 32 | - `/path/to/your/game.swf` should be replaced with the path to your local `.swf` file. |
|||||||
| 33 | - The container will serve your `.swf` file at `http://localhost`. |
|||||||
| 34 | ||||||||
| 35 | 3. **Access the Website** |
|||||||
| 36 | ||||||||
| 37 | Open a browser and navigate to `http://localhost` (or the IP where your container is hosted) to view and interact with your Flash file. |
|||||||
| 38 | ||||||||
| 39 | ## Features |
|||||||
| 40 | ||||||||
| 41 | - **Serve Flash Content Easily**: Simple setup for serving `.swf` files. |
|||||||
| 42 | - **Ruffle Emulator**: Play Flash content in a browser without needing Flash Player. |
|||||||
| 43 | - **Volume Mapping**: No need to modify the container—just swap out the `.swf` file. |
|||||||
| 44 | - **Lightweight**: Minimal image size using Node.js and Ruffle. |
|||||||
| 45 | ||||||||
| 46 | ## Customization |
|||||||
| 47 | ||||||||
| 48 | - You can modify the HTML file that hosts the `.swf` content by editing `index.html` and adjusting the Ruffle embed configurations. |
|||||||
| 49 | - Use different `.swf` files by swapping the file you mount to `/app/game.swf`. |
|||||||
| 50 | ||||||||
| 51 | ## Requirements |
|||||||
| 52 | ||||||||
| 53 | - Docker installed on your host machine. |
|||||||
| 54 | - A valid `.swf` file to be served. |
|||||||
| 55 | ||||||||
| 56 | ## Screenshots |
|||||||
| 57 |  |
|||||||
| 58 | ||||||||
| 59 |  |
|||||||
| 60 | ||||||||
| 61 |  |
|||||||
| 62 | ||||||||
| 63 | --- |
|||||||
| 64 | ## Source |
|||||||
| 65 | Dockerfile |
|||||||
| 66 | ||||||||
| 67 | ``` |
|||||||
| 68 | # Base image with Node.js and http-server to serve files |
|||||||
| 69 | FROM node:20-bullseye |
|||||||
| 70 | ||||||||
| 71 | # Install http-server globally to serve files |
|||||||
| 72 | RUN npm install -g http-server |
|||||||
| 73 | ||||||||
| 74 | # Set working directory |
|||||||
| 75 | WORKDIR /app |
|||||||
| 76 | ||||||||
| 77 | # Download the specified nightly release of the Ruffle self-hosted package |
|||||||
| 78 | # Install additional dependencies: Java, Git |
|||||||
| 79 | RUN apt-get update && apt-get install -y \ |
|||||||
| 80 | default-jdk \ |
|||||||
| 81 | maven \ |
|||||||
| 82 | git \ |
|||||||
| 83 | default-mysql-client \ |
|||||||
| 84 | libasound2-dev \ |
|||||||
| 85 | libxcb-shape0-dev \ |
|||||||
| 86 | libxcb-xfixes0-dev \ |
|||||||
| 87 | libgtk-3-dev \ |
|||||||
| 88 | libudev-dev \ |
|||||||
| 89 | libxcb-xinput-dev \ |
|||||||
| 90 | libxcb-xkb-dev \ |
|||||||
| 91 | libxcb-cursor-dev \ |
|||||||
| 92 | default-jre-headless \ |
|||||||
| 93 | cmake \ |
|||||||
| 94 | g++ \ |
|||||||
| 95 | unzip \ |
|||||||
| 96 | wget \ |
|||||||
| 97 | && apt-get clean \ |
|||||||
| 98 | curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \ |
|||||||
| 99 | . "$HOME/.cargo/env" |
|||||||
| 100 | ||||||||
| 101 | # Install curl and jq to fetch the latest Ruffle nightly release |
|||||||
| 102 | RUN apt-get update && apt-get install -y curl jq |
|||||||
| 103 | ||||||||
| 104 | # Download the latest nightly release of Ruffle |
|||||||
| 105 | 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) && \ |
|||||||
| 106 | wget $LATEST_RELEASE_URL -O /tmp/ruffle-nightly.zip && \ |
|||||||
| 107 | mkdir -p /app/ruffle && \ |
|||||||
| 108 | unzip /tmp/ruffle-nightly.zip -d /app/ruffle && \ |
|||||||
| 109 | rm /tmp/ruffle-nightly.zip |
|||||||
| 110 | ||||||||
| 111 | # Take out the trash |
|||||||
| 112 | RUN rm -rf ./ruffle-nightly-2024_10_13-web-selfhosted.zip |
|||||||
| 113 | ||||||||
| 114 | # Copy the local HTML file into the container |
|||||||
| 115 | COPY ./index.html /app/index.html |
|||||||
| 116 | ||||||||
| 117 | # Copy the local game file into the container |
|||||||
| 118 | #COPY ./game.swf /app/game.swf |
|||||||
| 119 | ||||||||
| 120 | # Expose port 80 for serving the SWF game |
|||||||
| 121 | EXPOSE 80 |
|||||||
| 122 | ||||||||
| 123 | # Command to serve the game using http-server |
|||||||
| 124 | CMD ["http-server", ".", "-p", "80"] |
|||||||
| 125 | ``` |
|||||||
| 126 | ||||||||
| 127 | index.html |
|||||||
| 128 | ||||||||
| 129 | ``` |
|||||||
| 130 | <!DOCTYPE html> |
|||||||
| 131 | <html lang="en"> |
|||||||
| 132 | <head> |
|||||||
| 133 | <meta charset="UTF-8"> |
|||||||
| 134 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||||||
| 135 | <script src="ruffle/ruffle.js"></script> |
|||||||
| 136 | <style> |
|||||||
| 137 | html, body { |
|||||||
| 138 | margin: 0; |
|||||||
| 139 | padding: 0; |
|||||||
| 140 | width: 100%; |
|||||||
| 141 | height: 100%; |
|||||||
| 142 | } |
|||||||
| 143 | ||||||||
| 144 | #ruffle-player { |
|||||||
| 145 | width: 100%; |
|||||||
| 146 | height: 100%; |
|||||||
| 147 | } |
|||||||
| 148 | </style> |
|||||||
| 149 | </head> |
|||||||
| 150 | <body> |
|||||||
| 151 | <script> |
|||||||
| 152 | window.RufflePlayer = window.RufflePlayer || {}; |
|||||||
| 153 | ||||||||
| 154 | window.RufflePlayer.config = { |
|||||||
| 155 | "letterbox": "on", |
|||||||
| 156 | } |
|||||||
| 157 | ||||||||
| 158 | window.addEventListener("DOMContentLoaded", () => { |
|||||||
| 159 | let ruffle = window.RufflePlayer.newest(); |
|||||||
| 160 | let player = ruffle.createPlayer(); |
|||||||
| 161 | player.style.width = "100%"; // Set player's width to 100% |
|||||||
| 162 | player.style.height = "100%"; // Set player's height to 100% |
|||||||
| 163 | document.body.appendChild(player); |
|||||||
| 164 | player.load("game.swf"); // Load the local SWF file named game.swf |
|||||||
| 165 | }); |
|||||||
| 166 | </script> |
|||||||
| 167 | </body> |
|||||||
| 168 | </html> |
|||||||
| 169 | ``` |
|||||||
| 170 | --- |
|||||||
| 171 | ||||||||
| 172 | ||||||||
| 173 | ||||||||
| 174 | By using **FlashContainer**, you can keep your favorite Flash content alive and playable through modern web technologies. |
|||||||