Skip to content

Using Ruffle

Jump to bottom Edit New page
Daniel Jacobs edited this page Feb 8, 2024 · 153 revisions

Nightly builds of Ruffle are available for all platforms. To download a build, click the Assets dropdown, then click the appropriate file for your platform.

You will also need an SWF file to run; try some Ruffle approved test SWFs.

Web Demo

The easiest way to try out Ruffle is to visit the web demo page, then click the Browse... button to load an SWF file of your choice. This works in any modern mobile or desktop browser, as long as you have an SWF file downloaded to your device.

The Internet Archive's Flash collection has a constantly growing selection of Flash files running via Ruffle in your browser - no download required.

Desktop

Desktop builds of Ruffle are available for Windows, Mac and Linux.

Windows

Direct Download

On the Releases page, click the link labeled windows. After the file has downloaded, right-click it and choose "Extract All." Open the extracted folder and double-click the ruffle.exe file. Use the file chooser that pops up to pick an SWF file on your computer.

Scoop

If use Scoop, you can install it from the Versions bucket:

scoop bucket add versions # Ensure bucket is added first
scoop install ruffle-nightly

macOS

Direct Download

On the Releases page, click the link labeled macos. After the file has downloaded, double-click it to extract it. Right-click the ruffle executable and choose "Open." Use the file chooser that pops up to pick an SWF file on your computer.

Homebrew

If use Homebrew, you can build from our Tap:

brew install --HEAD ruffle-rs/ruffle/ruffle

Note: because it is HEAD-only, you'll need to run brew upgrade --fetch-HEAD ruffle each time you want to update.

Command Line

If you prefer the command line, you can install Ruffle using the commands below:

wget "https://github.com/ruffle-rs/ruffle/releases/download/nightly-$(date -u +%Y-%m-%d)/ruffle-nightly-$(date -u +%Y_%m_%d)-macos-universal.tar.gz"
tar -xzvf "$(basename "$_")"
install ruffle /usr/local/bin

Linux

Direct Download

On the Releases page, click the link labeled linux. After the file has downloaded, extract it and run the ruffle executable. Use the file chooser that pops up to pick an SWF file on your computer.

Command Line

If you prefer the command line, you can install Ruffle using the commands below:

wget "https://github.com/ruffle-rs/ruffle/releases/download/nightly-$(date -u +%Y-%m-%d)/ruffle-nightly-$(date -u +%Y_%m_%d)-linux-x86_64.tar.gz"
tar -xzvf "$(basename "$_")"
sudo install ruffle /usr/local/bin

Command-line Usage

After you have extracted the appropriate file for your platform, navigate to the extracted folder using your Terminal or Command Prompt.

If you're on Windows, type ruffle filename.swf to run an SWF, or type ruffle --help to see the rest of the command-line options.

If you're on Linux, type ./ruffle filename.swf to run an SWF, or type ./ruffle --help to see the rest of the command-line options.

If you're on Mac, type ./Ruffle.app/Contents/MacOS/ruffle filename.swf to run an SWF, or type ./Ruffle.app/Contents/MacOS/ruffle --help to see the rest of the command-line options.

Browser Extension

The browser extension works in Chrome, Firefox, and Safari 14+. Install the extension by following the instructions below.

Chrome

These instructions also apply to Chromium-based browsers such as Edge, Opera and Brave.

The easiest way to install Ruffle is to get it from the Chrome Web Store.

If you have an Android device, you will need to use a Chromium-based browser that supports extensions, such as the Kiwi Browser.

Alternatively, you can manually install the extension by following these instructions:

  • On the Releases page, click the link ending in web-extension.zip.
  • Type chrome://extensions/ into Chrome's address bar, then press Enter.
  • Turn on Developer mode in the top-right corner.
  • Drag and drop the downloaded ZIP file into the page.

Or if you're a developer, you can save some time by following these instructions:

  • Navigate to chrome://extensions/.
  • Turn on Developer mode in the top-right corner.
  • Click "Load unpacked".
  • Select the assets/ folder.
  • Each time you make changes during development, click the reload icon.

Firefox

The easiest way to install Ruffle is to get it from the Firefox Add-ons site.

If you have an Android device, you can get it from the Firefox for Android Add-ons site.

Alternatively, you can manually install Ruffle as a temporary add-on by following these instructions:

  • On the Releases page, right-click the link for Firefox (ending in firefox-unsigned.xpi) and choose "Save Link As..."
  • Type about:debugging into Firefox's address bar, then press Enter.
  • Click on "This Firefox."
  • Click "Load Temporary Add-on..."
  • Select the .xpi file that you saved.

Safari

The Safari extension is built in with the Mac OS .tar.gz file

  • Download the *-macos-universal.tar.gz file.
  • Extract the file somewhere.
  • Open the extracted file and confirm the popup dialog box.
  • Enable Safari > Preferences > Advanced > Show Develop menu in menu bar.
  • Enable Develop > Allow Unsigned Extensions.
  • Enable the extension by checking the box in Safari > Preferences > Extensions.

Note: Safari 14+ is required

Web

For integrating Ruffle onto your own website:

Alternatively, Ruffle is packaged with npm every release, and can be included through one of the official CDN releases, such as unpkg.

You can also use a version-aliased file from jsDelivr, but only unpkg can automatically update without caching concerns.

You may then use Ruffle as a polyfill for legacy Flash embeds, or use the Ruffle JavaScript API directly. The configuration settings apply to both polyfill embeds and JavaScript API embeds.

Polyfill

Ruffle will automatically replace any old-style Flash embeds on websites with Ruffle elements. This is ideal for someone looking to preserve a legacy website with a minimum amount of work. All you need to do is include the following script tag on the desired webpage:

<script src="path/to/ruffle/ruffle.js"></script>

If you'd prefer to use the automatically updating CDN release, you can include the following script tag instead:

<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>

If you embed SWF content using JavaScript libraries such as SWFObject, then this tag should be placed as the first script tag in the <head>, so Ruffle will be able to install its plugin spoof in time. In any other case, it's good practice to add the script before the closing </body> tag. Here is a simple example of a Flash embed in an HTML file:

<body>
    <object>
        <embed src="path/to/movie.swf" width="550" height="400" />
    </object>

    <script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
</body>

The configuration settings apply to polyfill elements. The corresponding flash parameters overwrite the global configuration for the specific embed.

JavaScript API

The Ruffle JavaScript API can be used to create Ruffle instances directly. This is ideal for anyone who wants to create embeds dynamically and get more control over Ruffle.

Here is an example of using the Ruffle JavaScript API to play back an SWF file called movie.swf located in our web server's root directory. Paste the following script onto your website before the closing </body> tag:

<script>
    window.RufflePlayer = window.RufflePlayer || {};
    window.addEventListener("load", (event) => {
        const ruffle = window.RufflePlayer.newest();
        const player = ruffle.createPlayer();
        const container = document.getElementById("container");
        container.appendChild(player);
        player.load("movie.swf");
    });
</script>
<script src="path/to/ruffle/ruffle.js"></script>

player is a DOM object which can be attached and resized as desired using native JavaScript features. For instance, to create a player with a width of 600px and an height of 400px, all you need to do is: player.style.width = "600px"; player.style.height = "400px";

If Ruffle fails to load, you may need to specify the publicPath setting: please see the Configuration Options below for further details.

Advanced usage

The load method also accepts custom configuration settings as an argument. All valid configuration options with their default values are listed in the configuration options section. These configuration settings overwrite the global and (if existing) the per-instance configuration for the specific embed.

player.load({
    // These are only a few example options:
    url: "", // A string, indicating the SWF file to load (e.g. "movie.swf").
    allowScriptAccess: false, // A boolean indicating whether the file is allowed to interact with the page through JavaScript.
});

The load method returns a promise. This means you can do specific actions depending on the file loading succeeds or fails. Here's an example:

player.load("movie.swf").then(() => {
    console.info("Ruffle successfully loaded the file");
}).catch((e) => {
    console.error(`Ruffle failed to load the file: ${e}`);
});

Fullscreen toggling is done through the Fullscreen API, and is thus subject to the same restrictions. However, vendor prefixes are handled by the player's own code, and thus should not be needed.

The fullscreenEnabled() method checks if this player is allowed to be fullscreen by the browser. Only if it returns true can enterFullscreen() be used.

The isFullscreen() method checks if this player is currently fullscreen inside the browser.

The enterFullscreen() method requests the browser to make this player fullscreen.

The exitFullscreen() method requests the browser to make this player no longer fullscreen.

The pause() method pauses this player, displaying the play button overlay and making it so no more frames, scripts or sounds will be executed and the movie will be considered inactive.

The play() method plays or resumes the movie inside the player and hides the play button overlay.

The displayMessage(message) method can be used to show a custom dismissible message in front of the player.

The metadata property shows information about the swf currently loaded inside the player. It is an object which includes the following:

  • width: The width of the movie (not the player) in pixels.
  • height: The height of the movie (not the player) in pixels.
  • frameRate: The frame rate of the movie in frames per second.
  • numFrames: The number of frames on the root timeline of the movie.
  • swfVersion: The SWF version of the movie. See also the SWF Version Chart.
  • backgroundColor: The background color of the movie as a hex string, such as "#FFFFFF". May be null if the background color is unavailable.
  • isActionScript3: Whether this movie is an ActionScript 3.0 movie.

The loadedmetadata event is an event which is triggered when the player metadata becomes available. Note that in the future this can happen before the movie is fully loaded.

The loadeddata event is an event which is triggered when the movie is fully loaded.

The readyState property indicates the readiness of the playing movie. It can hold the following values:

  • 0: No movie is loaded, or no information is yet available about the movie.
  • 1: The movie is still loading, but it has started playback, and metadata is available.
  • 2: The movie has completely loaded.

The isPlaying property indicates whether or not the movie is currently playing. It will be true if the movie is playing, and false if it's paused.

The volume property allows you to set the volume of the player. It can have any value between 0 and 1. For example, 0 will mute the player, 0.5 will set it to half volume, and 1 (the default value) is full volume.

The config property indicates any configuration that should apply to this specific player.

For even more detailed information about Ruffle's JavaScript API, see the TypeDoc.

How to get metadata?

To get metadata you will need to use addEventListener to respond to the loadedmetadata event.

For example, this is how you find out if the game is ActionScript3. It will return in the console true if the game is AS3 or false if the game is not AS3.

player.addEventListener('loadedmetadata', () => {
  console.info(player.metadata.isActionScript3);
})

Configuration Options

Different configuration options exist, affecting playback of specific files or Ruffle's overall behavior.

To specify configuration settings, simply initialize the window.RufflePlayer object in JavaScript, then set window.RufflePlayer.config to a JavaScript literal object with the values you'd like to use. This is a global setting and as such, it will affect all files hosted on the current page. The configuration settings apply to both polyfill embeds and JavaScript API embeds.

The example below lists all of the available options with their default values:

window.RufflePlayer = window.RufflePlayer || {};
window.RufflePlayer.config = {
    // Options affecting the whole page
    "publicPath": undefined,
    "polyfills": true,

    // Options affecting files only
    "allowScriptAccess": false, // Polyfill elements have a different default value, see the allowScriptAccess section
    "autoplay": "auto",
    "unmuteOverlay": "visible",
    "backgroundColor": null,
    "wmode": "window",
    "letterbox": "fullscreen",
    "warnOnUnsupportedContent": true,
    "contextMenu": "on",
    "showSwfDownload": false,
    "upgradeToHttps": window.location.protocol === "https:",
    "maxExecutionDuration": 15,
    "logLevel": "error",
    "base": null,
    "menu": true,
    "salign": "",
    "forceAlign": false,
    "scale": "showAll",
    "forceScale": false,
    "frameRate": null,
    "quality": "high",
    "splashScreen": true,
    "preferredRenderer": null,
    "openUrlMode": "allow",
    "allowNetworking": "all",
    "favorFlash": true,
    "socketProxy": [],
    "fontSources": [],
    "defaultFonts": {},
    "credentialAllowList": [],
    "playerRuntime": "flashPlayer",
};

If you use the Ruffle JavaScript API, then it's also possible to specify a per-instance config that will override the global settings:

let player = ruffle.createPlayer();
player.config = {
    autoplay: "auto",
    // and so on...
};

Configuration settings given to a specific embed (either via the Ruffle JavaScript API or via the corresponding flash parameters) will overwrite the global and (if existing) the per-instance configuration for the specific embed.

List of Options

publicPath A string, automatically set by Ruffle on initialization to be wherever ruffle.js is included from. This option should only be specified if you encounter issues loading Ruffle. Note that the path must NOT include any file name.

polyfills A boolean, indicating whether Ruffle should detect Flash object and embed tags and replace them with compatible Ruffle elements. If you use the Ruffle JavaScript API, then you probably won't need this.

allowScriptAccess A boolean, default false, indicating whether the movie is allowed to interact with the page through JavaScript, using a flash concept called ExternalInterface. This should only be enabled for movies you trust. Note that Flash's options are more granular; Ruffle's true and false values correspond to Flash's "always" and "never" values, respectively.
The default allowScriptAccess value for polyfill elements equals its default value in Flash, "sameDomain". This means that it's true if the website embedding the SWF file has the same domain as the SWF file itself and false otherwise.

autoplay A string with a default value of "auto", indicating how files should start playing. Possible values are:

  • "auto": Ruffle checks if the user's browser allows audio autoplay. If it does, then the file is automatically played, otherwise a button is displayed.
  • "off": Ruffle always displays a button that the user has to click to actually play the file.
  • "on": Ruffle always plays the file, even if the user's browser doesn't allow audio autoplay.

unmuteOverlay A string with a default value of "visible", only used when autoplay is "on" and the user's browser doesn't allow audio autoplay. Possible values are:

  • "visible": Ruffle displays a "Click to unmute" overlay. The user has to click it to resume audio playback.
  • "hidden": Ruffle doesn't show an overlay and pretends that everything is fine. Clicking the file area resumes audio playback.

backgroundColor A string that controls the background color of the player. The value must be an HTML color (e.g. "#FFFFFF"), as CSS colors are not allowed (e.g. "white"). If not specified, then the background color of the SWF file is used.

wmode: A string, controlling the window mode of the player. Values supported by Ruffle are listed below. All other values (including the default value "window") are treated the same as "opaque" by Ruffle.

  • "opaque": The Flash content is layered together with other HTML elements, and the stage color is opaque. Content can render above or below Ruffle based on CSS rendering order.
  • "transparent": The Flash content is layered together with other HTML elements, and the stage color is transparent. Content beneath Ruffle will be visible through transparent areas.

letterbox A string with a default value of "fullscreen", used to indicate how Ruffle should handle areas outside the movie stage. Possible values are:

  • "fullscreen": Letterboxing is only done when the file runs in fullscreen mode.
  • "off": Letterboxing is disabled, so areas outside the movie stage are always be visible. This matches Flash Player's behavior.
  • "on": Letterboxing is enabled when the container's aspect ratio doesn't match the movie's aspect ratio.

warnOnUnsupportedContent A boolean, indicating whether an overlay with a warning message is displayed when loading a movie with unsupported content. At the time of writing, this message applies to movies made with ActionScript 3 (running on AVM2).

contextMenu A string with a default value of "on", indicating whether a context menu should be shown when right-clicking or, on touch devices, long-pressing a Ruffle instance. Possible values are:

  • "on": A context menu should be shown when right-clicking or, on touch devices, long-pressing a Ruffle instance.
  • "rightClickOnly": A context menu should be shown when right-clicking a Ruffle instance, but not when long-pressing a Ruffle instance on touch devices.
  • "off": A context menu should not be shown when right-clicking or, on touch devices, long-pressing a Ruffle instance.

showSwfDownload A boolean, indicating whether to show an option in the context menu to download the loaded movie.

upgradeToHttps A boolean, indicating whether inner files should always be loaded over the HTTPS protocol. As this option is designed to prevent cross-domain issues, this means all absolute URLs using the HTTP protocol will be upgraded to HTTPS.

maxExecutionDuration A number, allowing the script timeout to be configured.

logLevel A string with a default value of "error", indicating the logging level inside the browser's console. Possible values are: "error", "warn", "info", "debug" and "trace".

base A string which specifies the base directory or URL used to resolve all relative path statements in the SWF file. Helpful when your Flash files are kept in a separate directory from your webpages.

menu A boolean, default true, which specifies if movie playback controls are available in the context menu.

salign A string with a default value of "". This controls the position of the movie after scaling to fill the viewport and crops it as needed. The default alignment is centered. T, L, B, and R mean top, left, bottom, and right respectively. Can technically be any number of T's, L's, B's, and R's in any order, but the logical choices are "", "T", "L", "B", "R", "TL"/"LT", "TR"/"RT", "BL"/"LB", or "BR"/"RB". If you use some strange combination with both T's and B's or both L's and R's, keep in mind the precedence is L > R > "" and T > B > "".

forceAlign A boolean, default false, which prevents movies from changing the stage alignment (salign) when set to true.

scale A string with a default value of "showAll". This control's the movie's initial stage scale mode. The options are:

  • "showAll": Makes the entire SWF file visible in the specified area without distortion, while maintaining the original aspect ratio of the movie. Borders can appear on two sides of the movie.
  • "noborder": Scales the SWF file to fill the specified area, while maintaining the original aspect ratio of the file. The content may be cropped, but no distortion occurs.
  • "exactfit": Makes the entire SWF file visible in the specified area without trying to preserve the original aspect ratio. Distortion can occur.
  • "noscale": Prevents the SWF file from scaling to fit the area of the player. Cropping can occur.

forceScale A boolean, default false, which prevents movies from changing the stage scale mode when set to true.

frameRate A number that can be used to force the player to run at a specific frame rate, overriding the movie's frame rate.

quality A string with a default value of "high". Affects MSAA in Ruffle (except on low-end devices that use fall-back rendering). The main options are:

  • "low": Prefer a sample count of 1 for MSAA.
  • "medium": Prefer a sample count of 2 for MSAA.
  • "high": Prefer a sample count of 4 for MSAA.
  • "best": Prefer a sample count of 4 for MSAA.

playerVersion A number that controls the player version that is reported to the movie. If this is not set, Ruffle will default to the newest player version (32).

splashScreen A boolean indicating whether to show the built-in Ruffle splash screen. When set to false, the area of the Flash animation will remain blank until the wasm and swf are ready to be displayed using Ruffle.

There are also two separate CSS variables that can be used for some minor control over the look of the splash screen when this is set to true:

  • --splash-screen-background: The background for the splash screen. The default is Ruffle's normal blue color. Suggested options are none or any valid color value, but this can technically be any valid background.
  • --logo-display: Whether to show the Ruffle logo in the splash screen. The default is block. The other suggested value is none, but this can technically be any valid display.

preferredRenderer A string which specifies the preferred render backend of the Ruffle player. By default, Ruffle chooses the most featureful backend supported by the user's system, falling back to more basic backends if necessary. The available backends are listed below in order of default preference. Warning: these may change in future Ruffle releases! If you use this option, you will need to test your content in each new Ruffle version before deployment to ensure that it continues to work as expected.

  • "wgpu-webgl": The most featureful and currently preferred backend. Rendering is done the same way as in the desktop app, then translated to WebGL on-the-fly.
  • "webgpu": An unstable, in-development API that is currently not recommended for use in production. It is currently unavailable in Ruffle, but will become available once pull #14682 is merged. Performance currently seems poor, and lack of synchronous APIs means some content may never be supported. But we hope it may offer better performance for some types of content in the future.
  • "webgl": A vanilla WebGL backend. Was the default backend until the start of 2023, but is now used as a fallback for devices that do not support WebGL 2. Supports fewer features and has a faster initialization time; may be useful for content that does not need advanced features like bitmap drawing or blend modes.
  • "canvas": The slowest and most basic backend, used as a fallback when all else fails. However, this is currently the only backend that accurately scales hairline strokes. If you notice excessively thick strokes in specific content, you may want to use the canvas renderer for that content until the issue is resolved. See issue 7369 for more information.

openUrlMode A string with a default value of "allow" that controls what happens when Flash content tries to open a web links. The possible values are:

  • "allow": Allow Flash content to open website URLs.
  • "confirm": Show a confirmation dialog every time Flash content tries to open a website URL.
  • "deny": Prevent Flash content from opening website URLs.

allowNetworking A string with a default value of "all" that can be used to restrict Flash content from accessing certain networking APIs. Currently in Ruffle, the values "internal" and "none" behave identically, only preventing the use of getURL() (AS2), navigateToURL() (AS3), and ExternalInterface.call() (AS2/AS3).

favorFlash A boolean with a default value of true indicating whether to skip polyfilling Flash embeds if the user's browser has the real Adobe Flash Player plugin installed.

socketProxy An array of objects that tell Ruffle how to connect to your proxy server for socket connections. Setting up this configuration and proxy server allows Flash games that originally used XMLSocket or TCPSocket to run on the web again using WebSockets. See our FAQ to learn how to set this up.

fontSources An array of SWF URLs for Ruffle to load and use as font sources. Ruffle will use the fonts embedded within these SWFs as device fonts. Since Ruffle cannot load fonts from a user's device on the web, this allows website owners to provide copies of the device fonts that their content requires. See our FAQ for more information.

defaultFonts An object that defines the names of fonts to use for each "default" Flash device font. If multiple font names are provided, Ruffle will use the first one that is available. For example, defining {sans: ["Helvetica", "Arial"]} would use Helvetica if present, before trying Arial. See our FAQ for more information.

credentialAllowList: An array of origins that credentials may be sent to. Credentials are cookies, authorization headers, or TLS client certificates. The origin of the page that is showing the swf is automatically allowed, this only affects other origins. Entries must include protocol and and host, for example http://subdomain.example.org. If you configure this to send cookies to an origin but that origin does not configure CORS to allow it, then requests will start failing due to CORS.

playerRuntime: A string with a default value of "flashPlayer" indicating which runtime you wish for Ruffle to emulate. The options are:

  • "flashPlayer": Emulate Adobe Flash Player.
  • "air": Emulate Adobe AIR.

Important Note: While this configuration option can be used to make Ruffle attempt to emulate Adobe AIR, Ruffle's support for AIR-only classes is very limited at the moment, so most AIR-games probably will not yet work with Ruffle even after setting this option. Improvements will be forthcoming over time, but Ruffle's main priority for the foreseeable future will continue to be improvements to Adobe Flash Player emulation.

Configure CORS Header

If you are serving SWF files or Ruffle itself from a different domain or subdomain from the webpage containing your Flash content, you will need to use the Access-Control-Allow-Origin CORS header to allow your webpage to access the files from your other domain. To do this, you will need to make a small configuration change to your web server. This website explains how to configure many common web servers.

For example, if your Flash content's main webpage was https://www.example.com/game.html and your SWF URL was https://swf.example.com/game.swf, you might see an error like this in your browser's Developer Tools:

Access to fetch at https://swf.example.com/game.swf from origin https://www.example.com has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In this case, you would need to configure the web server for your swf.example.com domain to send one of the following header values:

  • Access-Control-Allow-Origin: *
  • Access-Control-Allow-Origin: https://www.example.com

The first option allows any webpage to access your SWF files. The second option only allows webpages on your www.example.com domain to access your SWF files.

A few more things to note:

  • The www. subdomain of your website is not exempt from this rule; https://example.com and https://www.example.com count as different origins! If you serve webpages from both the root of your domain and from your www. subdomain, you will need to either configure CORS headers (as explained above) or make sure to always use relative URLs to refer to your Ruffle and SWF files. But the best option is to choose one of the two URL schemes and stick with it.
  • You cannot load SWF files from a website that you do not own unless it already sends the appropriate CORS header to allow access. If you have obtained the appropriate license or permission, a solution may be to download the SWF file and upload it to your own site.

Configure WebAssembly MIME Type

For best performance, your webserver should serve any .wasm files with application/wasm, and sadly not all do by default. If you encounter the error WebAssembly.instantiateStreaming failed because your server does not serve wasm with application/wasm MIME type., then your webserver is not properly configured.

Apache

Apache doesn't serve these files correctly by default, you will need to add this to your httpd.conf configuration file and reload it:

AddType application/wasm .wasm

If you do not have access to the server's httpd.conf or don't want this change to apply to your entire server, you can instead add the line to a .htaccess file on the path where Ruffle's files are located.

For more information please consult the Apache documentation.

NGINX

NGINX doesn't serve these files correctly by default, you will need to add this to your configuration and reload it:

types { application/wasm wasm; }

For more information please consult the NGINX documentation.

LiteSpeed

Follow these steps: Web Admin Console → Server → General → General Settings → MIME Settings → click “mime.properties” → Add → Enter 'wasm' and 'application/wasm' → Save.

Other HTTP Servers

Check to see if Ruffle works without any configuration changes. If you encounter the Incorrect response MIME type. Expected 'application/wasm' error then please do the following:

  • Consult the documentation of your server software to see how to add custom MIME types. You want to set .wasm files to application/wasm.
  • Inform us over at issue #400 with your HTTP server software name & version, so we can amend this documentation and help future users.

Configure Content Security Policy

If your website uses a Content Security Policy, then you must ensure that the script-src directive includes 'unsafe-eval'. Ruffle uses WebAssembly, and without script-src: 'unsafe-eval', Chrome will not allow WebAssembly compilation.

Addressing a CompileError

A CompileError occurs when Ruffle is unable to properly load the WebAssembly .wasm file that it uses to run Flash content. If you run into this error, it means you or the website administrator have not properly setup Ruffle, or the WebAssembly file became corrupted.

  1. If you are the website administrator: You can update your deployment of Ruffle. Ensure that you keep all the files needed to run Ruffle and that you do not rename them. If you are using file transferring software, ensure you know how to upload files in binary mode and that you are doing so for the .wasm file.

  2. If you are a website user: You can install the latest Ruffle extension for your browser from Ruffle's downloads. The newest version of Ruffle will take precedence, so your version of Ruffle will likely circumvent the website's version.

© 2023 Ruffle Wiki Contributors. View license.

Clone this wiki locally