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 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

Pull the Image

docker pull tebwritescode/flashcontainer

Run the Container

Mount your .swf file into the container with a volume mapping:
```
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.
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

Landing Page

Responsive

Ruffle

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.