Flash animation media playing system and method based on WASM

Abstract

The invention discloses a Flash animation media playing system and method based on WASM, belongs to the technical field of webpage playing, and aims to solve the technical problem of how to realize compatible playing of an original Flash file on the premise of not modifying the original Flash file so as to guarantee sustainable use of original educational resources. The analyzer module is used for analyzing the format content of the Flash file and sending the analyzed data to the ActionScript virtual machine and the rendering engine module; the ActionScript virtual machine is used for explaining and executing the ActionScript byte codes, interacting with the JavaScript environment of the browser through the API bridging module, and sending a rendering command to the rendering engine module; and the rendering engine module is used for interacting with a Javascript execution environment to complete display of a rendering result.

Description

Technical Field

[0001] The present invention relates to the technical field of web page playback, and in particular to a WASM-based Flash animation media playback system and method. Background Art

[0002] Adobe Flash was once the mainstream technology for web page and multimedia animation development, widely used in education, entertainment, gaming, advertising, and other fields. In the education industry, due to Flash's advantages such as convenience, interactivity, and rich graphical expression, a large number of teaching materials, interactive learning games, and animated demonstrations were developed in Flash format and deployed on various educational platforms for a long time.

[0003] However, due to various factors, Adobe announced in 2017 that it would discontinue support for Flash Player at the end of 2020. Subsequently, major browsers like Chrome and operating systems frequently updated their policies, gradually disabling the Flash plug-in. The departure of Internet Explorer in particular directly resulted in the inaccessibility of many resources that relied on Flash content. This impact was particularly significant for educational resource libraries, e-textbook platforms, and online education tools from elementary to high school, which required extensive creative effort, accumulated over a long period of time, and boasted rich content.

[0004] At present, although modern technologies such as HTML5, WebAssembly, Unity, and H5 animation engine can be used to replace Flash to produce new content, for a large number of existing Flash animation resources, the original design data and materials are no longer available, and the redevelopment cost is high and the workload is huge.

[0005] How to achieve compatible playback without modifying the original Flash file to ensure the sustainable use of the original educational resources is a technical problem that needs to be solved. Summary of the Invention

[0006] The technical task of the present invention is to address the above shortcomings and provide a WASM-based Flash animation media playback system and method to solve the technical problem of how to achieve compatible playback without modifying the original Flash file to ensure the sustainable use of the original educational resources.

[0007] In a first aspect, the present invention provides a WASM-based Flash animation media playback system, comprising a parser module, an ActionScript virtual machine, a rendering engine module, an API bridge module, and a Javascript execution environment;

[0008] The parser module is used to parse the format content of the Flash file, obtain the parsed data including the file header, tags, definitions and ActionScript bytecode, and send the parsed data to the ActionScript virtual machine and rendering engine module;

[0009] The ActionScript virtual machine interprets and executes ActionScript bytecode, interacts with the browser's JavaScript environment through the API bridge module, and sends rendering commands to the rendering engine module. Correspondingly, the API bridge module handles Flash Player API calls and translates them into JavaScript API implementations for modern browsers.

[0010] The rendering engine module is used to convert Flash rendering instructions into WebGPU instructions, complete graphics rendering based on WebGPU instructions, and interact with the Javascript execution environment to display the rendering results; correspondingly, the Javascript execution environment is used to non-invasively detect page elements, complete Wasm loading and execution, monitor DOM changes in the page, identify Flash objects and extract information.

[0011] Preferably, the parser module is configured to perform the following operations:

[0012] Receive Flash files;

[0013] For Flash files, parse the file header to determine the file format and version, parse the tags and definitions, extract resource information including graphics, audio and video, and extract ActionScript bytecode, where definitions include shapes, sprites, fonts, sounds and images;

[0014] Send the parsed data to the ActionScript virtual machine and rendering engine module.

[0015] Preferably, the ActionScript virtual machine is used to perform the following operations:

[0016] Receive the ActionScript bytecode sent by the parser module;

[0017] Initialize the virtual machine state, including the stack, registers, scope chain, garbage collection, and object model. The stack, registers, scope chain, garbage collection, and object model run in a secure sandbox environment.

[0018] Interprets and executes ActionScript bytecode, processing logic and interactive operations;

[0019] Interact with the browser's JavaScript environment through the API bridge module;

[0020] Send rendering commands to the rendering engine module.

[0021] Preferably, the rendering engine module is used to perform the following operations:

[0022] Receive rendering commands from the ActionScript virtual machine;

[0023] Convert Flash rendering instructions into WebGPU instructions, including rendering pipeline, resource binding, and draw call instructions;

[0024] Submit WebGPU instructions to the GPU for execution through the WebGPU device and context to complete graphics rendering;

[0025] Interact with the JavaScript execution environment to complete the display of rendering results.

[0026] Preferably, the API bridge module is used to perform the following operations:

[0027] Receive API call requests from the ActionScript virtual machine;

[0028] Translate the Flash Player API into JavaScript API for modern browsers;

[0029] Call the browser's JavaScript API to complete corresponding operations, including sound playback, network requests, and user input processing;

[0030] Returns the result of the operation to the ActionScript virtual machine.

[0031] Preferably, the Javascript execution environment is used to perform the following operations:

[0032] Inject JavaScript code after the page is loaded;

[0033] Monitor DOM content, identify tags, and determine whether it is Flash content;

[0034] Replace the Flash object with a custom DOM tree;

[0035] Load and instantiate the Wasm execution environment;

[0036] Call the Wasm module function to complete the parsing, execution and rendering of the Flash file;

[0037] According to the instructions of the API bridge module and the rendering module, the HTML5 API is called to complete the rendering and other resource playback.

[0038] In a second aspect, the present invention provides a WASM-based Flash animation media playback method, which implements playback of Flash animation media using a WASM-based Flash animation media playback system as described in any one of the first aspects, comprising the following steps:

[0039] S100, loading a page through a browser or WebView;

[0040] S200, when the DOMContentLoaded event of the page is triggered, dynamically injecting JavaScript execution environment code through JavaScript;

[0041] S300, monitoring DOM changes through JavaScript execution environment code, identifying relevant tags, extracting object information, and determining whether it is Flash content;

[0042] S400: When the object is identified as a Flash object, the current object is replaced with a custom DOM tree through DOM operation;

[0043] Load the Wasm execution program and instantiate the Wasm execution environment;

[0044] S500, through the Wasm interface, starts the parser module, ActionScript virtual machine, rendering engine module, API bridge module and Javascript execution environment;

[0045] S600, parsing the Flash file through the parser module, and sending the parsed data to the ActionScript virtual machine and rendering engine module;

[0046] S700, the ActionScript virtual machine parses and executes the ActionScript bytecode, which is bridged to the Javascript execution environment by the API bridge module and the rendering module;

[0047] S800, in the Javascript execution environment, based on the API bridge module and rendering module instructions, calls the HTML5 API instructions and simultaneously executes the operations of creating a DOM tree to complete rendering and other audio and video resource playback;

[0048] S900, the Javascript execution environment passes the io instruction to the Wasm execution module and updates the execution process;

[0049] SA00, repeat S600-S800 until the playback and interaction are completed.

[0050] In a third aspect, the present invention provides a computer-readable medium having computer instructions stored thereon. When the computer instructions are executed by a processor, the processor executes the method described in the second aspect.

[0051] The WASM-based Flash animation media playback system and method of the present invention have the following advantages:

[0052] 1. Security: Developed using a memory-safe language to avoid vulnerabilities in the design phase. The module runs in an independent SandBox isolated and secure environment, which largely avoids and reduces the original Flash vulnerabilities.

[0053] 2. Non-intrusive: On the one hand, this solution does not require any modification to the original web resources, and on the other hand, this solution does not require any modification to the WEBVIEW;

[0054] 3. Compatibility: After testing, this solution runs well on more than 95% of Flash applications on a certain educational platform;

[0055] 4. Cross-platform: This solution can utilize the plug-in functions of mainstream browsers such as Chrome (without modifying the browser source code) to provide Flash function support;

[0056] 5. Economic Benefit: This solution allows a large number of traditional Flash educational resources to continue to exert their value externally at a relatively low cost. This is especially true for courseware resources that have been designed with considerable research effort and may no longer be reproducible.

[0057] 6. Performance: The core logic is executed in Wasm, and performance is no longer a bottleneck. After testing, most resources can run smoothly;

[0058] 7. Native experience: Compared with transcoding other formats on the server side, this solution provides a better solution that can approximate the native user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0059] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the embodiments or descriptions of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0060] The present invention will be further described below with reference to the accompanying drawings.

[0061] Figure 1This is an architectural block diagram of a WASM-based Flash animation media playback system in Example 1. DETAILED DESCRIPTION

[0062] The present invention will be further described below with reference to the accompanying drawings and specific embodiments so that those skilled in the art can better understand the present invention and implement it. However, the embodiments given are not intended to limit the present invention. Unless there is a conflict, the embodiments of the present invention and the technical features in the embodiments may be combined with each other.

[0063] The embodiments of the present invention provide a WASM-based Flash animation media playback system and method, which are used to solve the technical problem of how to achieve compatible playback without modifying the original Flash file to ensure the sustainable use of the original educational resources.

[0064] Example 1:

[0065] The present invention provides a WASM-based Flash animation media playback system, which comprises a parser module, an ActionScript virtual machine, a rendering engine module, an API bridge module and a Javascript execution environment.

[0066] The parser module is used to parse the format content of the Flash file, obtain the parsed data including the file header, tags, definitions and ActionScript bytecode, and send the parsed data to the ActionScript virtual machine and rendering engine module.

[0067] Implemented as a parser module, this module performs the following operations:

[0068] (1) Receive Flash file;

[0069] (2) For Flash files, parse the file header, determine the file format and version, parse the tags and definitions, extract resource information including graphics, audio and video, and extract ActionScript bytecode, where definitions include shapes, sprites, fonts, sounds and images;

[0070] (3) Send the parsed data to the ActionScript virtual machine and rendering engine module.

[0071] The ActionScript virtual machine is used to interpret and execute ActionScript bytecode, interact with the browser's JavaScript environment through the API bridge module, and send rendering commands to the rendering engine module; correspondingly, the API bridge module is used to process Flash Player API calls and translate Flash Player API calls into JavaScript API implementation solutions for modern browsers.

[0072] As an ActionScript virtual machine implementation, it is used to perform the following operations:

[0073] (1) Receive the ActionScript bytecode sent by the parser module;

[0074] (2) Initialize the virtual machine state, including the state of the stack, registers, scope chain, garbage collection, and object model. The stack, registers, scope chain, garbage collection, and object model run in a secure sandbox environment;

[0075] (3) Interpret and execute ActionScript bytecode to process logic and interactive operations;

[0076] (4) Interact with the browser’s JavaScript environment through the API bridge module;

[0077] (5) Send the rendering command to the rendering engine module.

[0078] The rendering engine module is used to convert Flash rendering instructions into WebGPU instructions, complete graphics rendering based on WebGPU instructions, and interact with the Javascript execution environment to display the rendering results; correspondingly, the Javascript execution environment is used to non-invasively detect page elements, complete Wasm loading and execution, monitor DOM changes in the page, identify Flash objects and extract information.

[0079] As a specific implementation of the rendering engine module, this module is used to perform the following operations:

[0080] (1) Receive rendering commands from the ActionScript virtual machine;

[0081] (2) Convert Flash rendering instructions into WebGPU instructions, which include rendering pipeline, resource binding, and draw call instructions;

[0082] (3) Submitting WebGPU instructions to the GPU for execution through the WebGPU device and context to complete graphics rendering;

[0083] (4) Interact with the JavaScript execution environment to complete the display of the rendering results.

[0084] Implemented as an API bridge module, this module is used to perform the following operations:

[0085] (1) Receive API call request from ActionScript virtual machine;

[0086] (2) Translate the Flash Player API into the JavaScript API of modern browsers;

[0087] (3) Calling the browser's JavaScript API to complete corresponding operations, including sound playback, network requests, and user input processing;

[0088] (4) Return the operation result to the ActionScript virtual machine.

[0089] Correspondingly, the Javascript execution environment is used to perform the following operations:

[0090] (1) Inject JavaScript code after the page is loaded;

[0091] (2) Monitor DOM content, identify tags, and determine whether it is Flash content;

[0092] (3) Replace the Flash object with a custom DOM tree;

[0093] (4) Load and instantiate the Wasm execution environment;

[0094] (5) Call the Wasm module function to complete the parsing, execution and rendering of the Flash file;

[0095] (6) According to the instructions of the API bridge module and the rendering module, call the HTML5 API to complete the rendering and other resource playback.

[0096] In this embodiment of the system, the parser module is responsible for parsing Flash files, including file headers, tags, definitions (shapes, sprites, fonts, sounds, images) and ActionScript bytecodes; the ActionScript virtual machine is mainly implemented in a memory-safe language and can be used to interpret and execute ActionScript bytecodes. This module manages the virtual machine state, including stacks, registers, scope chains, garbage collection, and object models. This part runs in a secure sandbox environment; the rendering engine module receives the file data parsed by the parsing module and the rendering commands issued by the virtual machine module. The module converts Flash's rendering instructions into WebGPU instructions, making full use of hardware acceleration to improve rendering efficiency; API bridge module: used for the ActionScript virtual machine to process calls to the Flash Player API (such as sound playback, network requests, user input processing, external interface communication, timers), and implement these calls through the browser JavaScript API bound to Wasm to implement corresponding operations; Javascript execution environment: non-invasive detection of page elements, automatically completing Wasm loading and execution when a flash object is detected.

[0097] The system leverages the WebAssembly sandbox execution environment for enhanced security and enables cross-platform playback of a vast amount of Flash legacy content that would otherwise be inaccessible with high fidelity.

[0098] Example 2:

[0099] The present invention provides a WASM-based Flash animation media playback method, which implements the playback of Flash animation media through the system disclosed in Example 1, including the following steps:

[0100] S100, loading a page through a browser or WebView;

[0101] S200, when the DOMContentLoaded event of the page is triggered, dynamically injecting JavaScript execution environment code through JavaScript;

[0102] S300, monitoring DOM changes through JavaScript execution environment code, identifying relevant tags, extracting object information, and determining whether it is Flash content;

[0103] S400: When the object is identified as a Flash object, the current object is replaced with a custom DOM tree through DOM operation;

[0104] Load the Wasm execution program and instantiate the Wasm execution environment;

[0105] S500, through the Wasm interface, starts the parser module, ActionScript virtual machine, rendering engine module, API bridge module and Javascript execution environment;

[0106] S600, parsing the Flash file through the parser module, and sending the parsed data to the ActionScript virtual machine and rendering engine module;

[0107] S700, the ActionScript virtual machine parses and executes the ActionScript bytecode, which is bridged to the Javascript execution environment by the API bridge module and the rendering module;

[0108] S800, in the Javascript execution environment, based on the API bridge module and rendering module instructions, calls the HTML5 API instructions and simultaneously executes the operations of creating a DOM tree to complete rendering and other audio and video resource playback;

[0109] S900, the Javascript execution environment passes the io instruction to the Wasm execution module and updates the execution process;

[0110] SA00, repeat S600-S800 until the playback and interaction are completed.

[0111] Example 3:

[0112] An embodiment of the present invention further provides a computer-readable medium having computer instructions stored thereon. When executed by a processor, the computer instructions cause the processor to perform the method disclosed in any embodiment 2 of the present invention. Specifically, a system or device equipped with a storage medium can be provided. The storage medium stores software program code that implements the functions of any of the above-described embodiments, and a computer (or CPU or MPU) of the system or device can be configured to read and execute the program code stored in the storage medium.

[0113] The WASM-based Flash animation media playback system and method provided by the present invention are introduced in detail above. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only intended to help understand the method and core concept of the present invention. At the same time, for those skilled in the art, according to the concept of the present invention, there may be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as limiting the present invention.

Claims

1. A WASM-based Flash animation media playback system, characterized in that: Includes parser module, ActionScript virtual machine, rendering engine module, API bridge module and Javascript execution environment; The parser module is used to parse the format content of the Flash file, obtain the parsed data including the file header, tags, definitions and ActionScript bytecode, and send the parsed data to the ActionScript virtual machine and rendering engine module; The ActionScript virtual machine interprets and executes ActionScript bytecode, interacts with the browser's JavaScript environment through the API bridge module, and sends rendering commands to the rendering engine module. Correspondingly, the API bridge module handles Flash Player API calls and translates them into JavaScript API implementations for modern browsers. The rendering engine module is used to convert Flash rendering instructions into WebGPU instructions, complete graphics rendering based on WebGPU instructions, and interact with the Javascript execution environment to display the rendering results; correspondingly, the Javascript execution environment is used to non-invasively detect page elements, complete Wasm loading and execution, monitor DOM changes in the page, identify Flash objects and extract information.

2. The WASM-based Flash animation media playback system according to claim 1, characterized in that: The parser module is used to perform the following operations: Receive Flash files; For Flash files, parse the file header to determine the file format and version, parse the tags and definitions, extract resource information including graphics, audio and video, and extract ActionScript bytecode, where definitions include shapes, sprites, fonts, sounds and images; Send the parsed data to the ActionScript virtual machine and rendering engine module.

3. The WASM-based Flash animation media playback system according to claim 1, characterized in that: The ActionScript virtual machine is used to perform the following operations: Receive the ActionScript bytecode sent by the parser module; Initialize the virtual machine state, including the stack, registers, scope chain, garbage collection, and object model. The stack, registers, scope chain, garbage collection, and object model run in a secure sandbox environment. Interprets and executes ActionScript bytecode, processing logic and interactive operations; Interact with the browser's JavaScript environment through the API bridge module; Send rendering commands to the rendering engine module.

4. The WASM-based Flash animation media playback system according to claim 1, characterized in that: The rendering engine module is used to perform the following operations: Receive rendering commands from the ActionScript virtual machine; Convert Flash rendering instructions into WebGPU instructions, including rendering pipeline, resource binding, and draw call instructions; Submit WebGPU instructions to the GPU for execution through the WebGPU device and context to complete graphics rendering; Interact with the JavaScript execution environment to complete the display of rendering results.

5. The WASM-based Flash animation media playback system according to claim 4 is characterized in that: The API bridge module is used to perform the following operations: Receive API call requests from the ActionScript virtual machine; Translate the Flash Player API into JavaScript API for modern browsers; Call the browser's JavaScript API to complete corresponding operations, including sound playback, network requests, and user input processing; Returns the result of the operation to the ActionScript virtual machine.

6. The WASM-based Flash animation media playback system according to claim 4, characterized in that: The JavaScript execution environment is used to perform the following operations: Inject JavaScript code after the page is loaded; Monitor DOM content, identify tags, and determine whether it is Flash content; Replace the Flash object with a custom DOM tree; Load and instantiate the Wasm execution environment; Call the Wasm module function to complete the parsing, execution and rendering of the Flash file; According to the instructions of the API bridge module and the rendering module, the HTML5 API is called to complete the rendering and other resource playback.

7. A Flash animation media playback method based on WASM, characterized in that: The WASM-based Flash animation media playback system according to any one of claims 1 to 6 is used to play Flash animation media, comprising the following steps: S100, loading a page through a browser or WebView; S200, when the DOMContentLoaded event of the page is triggered, dynamically injecting JavaScript execution environment code through JavaScript; S300, monitoring DOM changes through JavaScript execution environment code, identifying relevant tags, extracting object information, and determining whether it is Flash content; S400: When the object is identified as a Flash object, the current object is replaced with a custom DOM tree through DOM operation; Load the Wasm execution program and instantiate the Wasm execution environment; S500, through the Wasm interface, starts the parser module, ActionScript virtual machine, rendering engine module, API bridge module and Javascript execution environment; S600, parsing the Flash file through the parser module, and sending the parsed data to the ActionScript virtual machine and rendering engine module; S700, the ActionScript virtual machine parses and executes the ActionScript bytecode, which is bridged to the Javascript execution environment by the API bridge module and the rendering module; S800, in the Javascript execution environment, based on the API bridge module and rendering module instructions, calls the HTML5 API instructions and simultaneously executes the operations of creating a DOM tree to complete rendering and other audio and video resource playback; S900, the Javascript execution environment passes the io instruction to the Wasm execution module and updates the execution process; SA00, repeat S600-S800 until the playback and interaction are completed.

8. A computer-readable medium, characterized in that The computer readable medium stores computer instructions, which, when executed by a processor, cause the processor to perform the method of claim 7 .

Images