search

ruffle-rs / ruffle

A Flash Player emulator written in Rust
https://ruffle.rs
Other
15.17k stars 781 forks source link

Mini-sized Flash files won't play on https://ddpro.ucoz.com/404_no_ruffle.htm with Ruffle Chrome/Edge extension (display as weird blocks) #14543

Open bootlegseahorse opened 6 months ago

bootlegseahorse commented 6 months ago

Describe the bug

The mini-sized flash music players on the page would display as weird blocks instead of the play buttons as they ought to:

Screenshot-2023-12-29-01-33-31

Expected behavior

Here's how the page would properly display on a Browser with Adobe Flash Player installed:

Screenshot 2023-12-29 01 37 06

Content Location

https://ddpro.ucoz.com/404_no_ruffle.htm

Affected platform

Browser's extension

Operating system

Windows 10.0.22622 (Windows 11 Professional) [64-bit]

Browser

Microsoft Edge 120.0.2210.91 Stable

Additional information

Other pages from this website are properly supported by Ruffle, even though they use exactly the same swf file.

For instance: https://ddpro.ucoz.com/setlists/tompaxton/20100925.htm

Thanks for everything.

bootlegseahorse commented 6 months ago

For the Firefox extension, it works perfectly fine:

Screenshot-2023-12-29-03-33-15

The Safari extension, on the other hand, doesn't work at all on any website with Safari 17.3. (Seemingly the same as issue #10981)

danielhjacobs commented 6 months ago

Yeah, as you mentioned, the Safari extension is still broken (we need someone with a Mac to investigate how to fix it; I only have access to Windows and Linux computers). That first screenshot shows error messages inside embeds, but the embeds are too small to read anything. I accessed that page on Chromium, which uses the same base browser engine as Edge, and used Inspect Element to resize one of the embeds to 300px by 300px. After that, I clicked "Report Bug" and this is the error info:

Error Info

Error name: Error Error message: panicked at /home/runner/.cargo/git/checkouts/wgpu-53e70f8674b08dd4/daedf03/wgpu/src/backend/direct.rs:778:18: Error in Surface::configure: Validation Error

Caused by: Not enough memory left.

Error stack:

Error: panicked at /home/runner/.cargo/git/checkouts/wgpu-53e70f8674b08dd4/daedf03/wgpu/src/backend/direct.rs:778:18:
Error in Surface::configure: Validation Error

Caused by:
    Not enough memory left.

    at imports.wbg.__wbg_new_a64e3f2afc2cf2f8 (chrome-extension://donbcfbmhbcapadipfkeojnmajbakjdc/dist/339.js:2624:21)
    at core::ops::function::FnOnce::call_once{{vtable.shim}}::h5a9ca1d4a3bb21ab (wasm://wasm/03416582:wasm-function[9884]:0x9d1f08)
    at std::panicking::rust_panic_with_hook::hbf46ef0245cc9589 (wasm://wasm/03416582:wasm-function[6322]:0x8c0b76)
    at core::panicking::panic_fmt::h14c85a61aa3d538e (wasm://wasm/03416582:wasm-function[9675]:0x9ccb54)
    at <T as wgpu::context::DynContext>::surface_configure::h25966c92263acd2e (wasm://wasm/03416582:wasm-function[8161]:0x952573)
    at wgpu::Surface::configure::hf3975dfd799d9c09 (wasm://wasm/03416582:wasm-function[4210]:0x7b691e)
    at <ruffle_render_wgpu::target::SwapChainTarget as ruffle_render_wgpu::target::RenderTarget>::resize::h59005b102f4a3828 (wasm://wasm/03416582:wasm-function[10249]:0x9e72f5)
    at <ruffle_render_wgpu::backend::WgpuRenderBackend<T> as ruffle_render::backend::RenderBackend>::set_viewport_dimensions::h2d1dc30ac11ff035 (wasm://wasm/03416582:wasm-function[5109]:0x854179)
    at ruffle_core::player::Player::set_viewport_dimensions::h3d38ad09692b7d36 (wasm://wasm/03416582:wasm-function[1664]:0x51a44d)
    at ruffle_web::Ruffle::tick::h74debaba1a46bebc (wasm://wasm/03416582:wasm-function[862]:0x30c9b2)

Player Info

Allows script access: false Renderer: wgpu Adapter Backend: Gl Adapter Name: "ANGLE (Intel, Mesa Intel(R) UHD Graphics 630 (CFL GT2), OpenGL 4.6)" Adapter Device Type: IntegratedGpu Adapter Driver Name: "" Adapter Driver Info: "" Enabled features: Features(TEXTURE_COMPRESSION_BC | TEXTURE_ADAPTER_SPECIFIC_FORMAT_FEATURES | PUSH_CONSTANTS | SHADER_UNUSED_VERTEX_OUTPUT) Available features: Features(TEXTURE_COMPRESSION_ETC2 | TEXTURE_COMPRESSION_ASTC | CLEAR_TEXTURE | MULTIVIEW) Current limits: Limits { max_texture_dimension_1d: 16384, max_texture_dimension_2d: 16384, max_texture_dimension_3d: 2048, max_texture_array_layers: 256, max_bind_groups: 4, max_bindings_per_bind_group: 1000, max_dynamic_uniform_buffers_per_pipeline_layout: 8, max_dynamic_storage_buffers_per_pipeline_layout: 0, max_sampled_textures_per_shader_stage: 16, max_samplers_per_shader_stage: 16, max_storage_buffers_per_shader_stage: 0, max_storage_textures_per_shader_stage: 0, max_uniform_buffers_per_shader_stage: 11, max_uniform_buffer_binding_size: 16384, max_storage_buffer_binding_size: 0, max_vertex_buffers: 8, max_buffer_size: 268435456, max_vertex_attributes: 16, max_vertex_buffer_array_stride: 255, min_uniform_buffer_offset_alignment: 32, min_storage_buffer_offset_alignment: 256, max_inter_stage_shader_components: 31, max_compute_workgroup_storage_size: 0, max_compute_invocations_per_workgroup: 0, max_compute_workgroup_size_x: 0, max_compute_workgroup_size_y: 0, max_compute_workgroup_size_z: 0, max_compute_workgroups_per_dimension: 0, max_push_constant_size: 96, max_non_sampler_bindings: 1000000 } Surface quality: high Surface samples: 4 Surface size: Extent3d { width: 550, height: 400, depth_or_array_layers: 1 }

Page Info

Page URL: https://ddpro.ucoz.com/404.htm SWF URL: http://ddpro.ucoz.com/play.swf?file=http://ddpro.ucoz.com/w/Amsterdam.mp3&width=24&songVolume=50&backColor=E8E8E8&frontColor=000000&autoStart=false&repeatPlay=false&showDownload=false

Browser Info

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Platform: Linux x86_64 Has touch support: false

Ruffle Info

Version: 0.1.0 Name: nightly 2023-12-27 Channel: nightly Built: 2023-12-27T00:14:54.557Z Commit: 28a3c7178a805ddb7027d30738b0e58acf94147e Is extension: true

Metadata

width: 150 height: 20 frameRate: 20 numFrames: 2 swfVersion: 8 backgroundColor: #FFFFFF isActionScript3: false uncompressedLength: 5423

danielhjacobs commented 6 months ago

At a guess, Edge/Chrome is stricter with resource management than Firefox and a page with 18 different Ruffle elements takes more memory than it supports. If you go to the advanced options for the extension and change the preferred renderer to Canvas2D it works. But you should change the preferred renderer back to automatic if browsing other pages since Canvas2D is not optimized and is missing some features that the other renderers have.

danielhjacobs commented 6 months ago

See also #9199

bootlegseahorse commented 6 months ago

At a guess, Edge/Chrome is stricter with resource management than Firefox and a page with 18 different Ruffle elements takes more memory than it supports. If you go to the advanced options for the extension and change the preferred renderer to Canvas2D it works. But you should change the preferred renderer back to automatic if browsing other pages since Canvas2D is not optimized and is missing some features that the other renderers have.

Thank you very much @danielhjacobs for the detailed info on my bug report!

After carefully reading the Ruffle documentation, I actually solved this problem permanently by inserting these code into the head of the webpage:

<script>
    window.RufflePlayer = window.RufflePlayer || {};
    window.RufflePlayer.config = {
    "autoplay": "on",
    "showSwfDownload": true,
        "preferredRenderer": "canvas",
    "favorFlash": true,
        "unmuteOverlay": "hidden",
    };;
</script>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>

It works perfectly on any browser (Chrome, Edge, Firefox, Safari etc). It's amazing how smooth this simple trick works, as this website I'm maintaining now is an extremely old website that's horribly designed in the style of 20+ years ago (!).

Anyway, I still keep an older, unchanged copy of the webpage at https://ddpro.ucoz.com/404_no_ruffle.htm for further investigation into this issue in the future. Maybe there could be a solution for this, especially since the 18 flash elements on this page are actually the same swf file that's used multiple times.

bootlegseahorse commented 6 months ago

After carefully reading the Ruffle documentation, I actually solved this problem permanently by inserting these code into the head of the webpage:

<script>
    window.RufflePlayer = window.RufflePlayer || {};
    window.RufflePlayer.config = {
  "autoplay": "on",
  "showSwfDownload": true,
        "preferredRenderer": "canvas",
  "favorFlash": true,
        "unmuteOverlay": "hidden",
    };;
</script>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>

It works perfectly on any browser (Chrome, Edge, Firefox, Safari etc). It's amazing how smooth this simple trick works, as this website I'm maintaining now is an extremely old website that's horribly designed in the style of 20+ years ago (!).

By the way, though the script works in Safari, it would show the same error message blocks as Chrome and Edge if the preferred renderer is not set to Canvas.

It seems that Firefox is the only browser that could handle multiple swf files on a page properly.