Angular 8 中的 Mediainfo.js 集成

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 集成到 Angular 8 中？有关此错误的任何其他信息可以帮助我吗？

另外，如果有人知道如何在前端安装 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 部分，在options 的build 目标中

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

第 3 步

重启ng serve

Answer 2

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

Answer 3

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

第 1 步

修改angular.json 文件，将来自node_modules mediainfo 目录的wasm 文件添加到assets 部分，在options 的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

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

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

在作者提出请求后，带有角度示例的简化拉取请求：

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