Mediainfo.js 融入 Angular 8

Question

我正在尝试使用 Mediainfo.js 在 Angular 8 项目的前端获取一些视频信息。但我收到以下错误：

GET https://192.168.25.177:4200/MediaInfoModule.wasm 404 (Not Found)
wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok
falling back to ArrayBuffer instantiation
GET https://192.168.25.177:4200/MediaInfoModule.wasm 404 (Not Found)
bothg async and sync fetching of the wasm failed
failed to asynchronously prepare wasm: RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
ERROR Error: Uncaught (in promise): RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
at abort (vendor.js:131481)
at vendor.js:131481
at ZoneDelegate.invoke (polyfills.js:3709)
at Object.onInvoke (vendor.js:82905)
at ZoneDelegate.invoke (polyfills.js:3708)
at Zone.run (polyfills.js:3474)
at polyfills.js:4205
at ZoneDelegate.invokeTask (polyfills.js:3741)
at Object.onInvokeTask (vendor.js:82886)
at ZoneDelegate.invokeTask (polyfills.js:3740)
at resolvePromise (polyfills.js:4147)
at polyfills.js:4212
at ZoneDelegate.invokeTask (polyfills.js:3741)
at Object.onInvokeTask (vendor.js:82886)
at ZoneDelegate.invokeTask (polyfills.js:3740)
at Zone.runTask (polyfills.js:3518)
at drainMicroTaskQueue (polyfills.js:3909)

我尝试安装 wasm 包，但它返回了很多与 V8 相关的错误。在它的 npm 页面上说它只是 Node (https://www.npmjs.com/package/wasm)

我还检查了 Webpack 示例 (https://github.com/buzz/mediainfo.js/blob/50830088bd775942a3962416ce61f759b13bc7c2/webpack.config.js#L34) 但它与Angular的配置相差太多。我还找到了 this 页面，该页面显示了如何在 Angular 中使用 wasm 模块，但我不知道我应该用什么来代替示例的斐波那契函数。

然而Mediainfo的页面声称“所有分析都在浏览器中完成”，所以应该可以。

如何将 Mediainfo 集成到 Angular8 中？有关此错误的任何其他信息可以帮助我吗？

此外，如果有人知道如何在前端安装 wasm，这将有助于我继续尝试集成。

编辑

我让它工作了，但是以一种非常笨拙的方式。我将 CDN 导入 index.html 并放入

declare let MediaInfo: any ;

在组件中。

一定有比这更好的方法。

同样在我的生产环境中，我在控制台中收到这些消息，这些消息不会在本地显示：

DevTools failed to load SourceMap: Could not parse content for https://assiste.estaleiro.serpro.gov.br/assets/js/mediainfo.min.js.map: Unexpected token < in JSON at position 0
wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
falling back to ArrayBuffer instantiation

我需要的是与 Angular 的正确集成。我如何使用

整合它

import MediaInfo from 'mediainfo.js'

也许我应该在 app-module 或其他东西中进行一些配置。我只是不知道从哪里开始。

Answer 1

问题是 mediainfo 会尝试从根目录加载 MediaInfoModule.wasm 文件：http://localhost:4200/MediaInfoModule.wasm.

所以你只需要确保这个文件可以访问。

第 1 步

将 node_modules/mediainfo.js/dist/MediaInfoModule.wasm 复制到项目的 src 目录，

第 2 步

修改 angular.json 文件以将该文件添加到 assets 部分，在 build 目标

的 options 中

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        
        ...
        "assets": [
          "src/assets",
          "src/favicon.ico",
          "src/MediaInfoModule.wasm"
        ],
        "styles": [

步骤#3

重启ng serve

Answer 2

我尝试使用上述解决方案通过一个简单的项目向 MediaInfo 创建一个 Pull Request，作者向我展示了一种将其与 Angular 集成的更好方法：

第 1 步

修改 angular.json 文件，将 node_modules mediainfo 目录中的 wasm 文件添加到 assets 部分，在 build 目标 options 中

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        
        ...
        "assets": [
          "src/assets",
          "src/favicon.ico",
          {
              "input": "node_modules/mediainfo.js/dist",
              "glob": "MediaInfoModule.wasm",
              "output": ""  
          }
        ],
        "styles": [
        ...

第 2 步

在 package.json 上包含此部分，否则在前端运行 mediainfo 时会出现运行时错误。它可能就在依赖之上：

...
"browser": {
    "fs": false,
    "path": false
},
"dependencies": {
...

步骤#3

要让 typescript 停止抱怨 mediainfo.js 导入，请在 src/

下创建以下文件

types/mediainfo.js/index.d.ts

并在里面放入以下内容：

declare module 'mediainfo.js'

步骤 #4

重启ng serve

这样你就不需要提交 wasm 文件并且可以从任何版本升级中受益而无需重新复制文件。

编辑

@KhoPhi 这些是参与讨论的链接：

本题相关链接：

我打开的关于无法在 Angular 中使用 Mediainfo.js 的原始问题： https://github.com/buzz/mediainfo.js/issues/38 https://github.com/buzz/mediainfo.js/issues/39

关于 Angular 示例和增强请求的拉取请求公告：

https://github.com/buzz/mediainfo.js/issues/41

带有 angular 示例的第一个拉取请求：

https://github.com/buzz/mediainfo.js/pull/40

在作者请求后使用 angular 示例简化拉取请求：

https://github.com/buzz/mediainfo.js/pull/42

Answer 3

我知道这个问题是针对 Angular 的，但如果有人发现这个 post 并且想要一个使用服务工作者并使用 Create React App (CRA) 进行测试的解决方案，我'已经 posted my solution on this SO post.

Mediainfo.js 融入 Angular 8

Mediainfo.js integration in Angular 8

javascript

angular

frontend

mediainfo

webassembly