MediaInfo.js 与 Angular 16 给出 emscripten 错误

Question

我们正在尝试按照 https://github.com/buzz/mediainfo.js.

上的文档使用 Angular 16 的 mediainfo.js。

根据记录，我们已经安装了以下依赖项：

安装：

"@types/emscripten": "^1.39.7"
"mediainfo.js": "^0.2.1"

已使用以下媒体信息：

用法：

import MediaInfoFactory from 'mediainfo.js'
import { MediaInfo, ReadChunkFunc } from 'mediainfo.js';

fileMetdata(input: Blob) {
    MediaInfoFactory({ format: 'text' })
      .then((mi) => {
        this.getMetadata(mi, input)
          .then((info) => {
            const fileData = info.replace(/(?:\r\n|\r|\n)/g, '<br>')
            console.log(fileData);
            return fileData;
          })
          .catch((err) => {
            console.error('Failed to process file:', err)
          })
        return undefined
      })
      .catch((err) => {
        console.error('Failed to instantiate MediaInfo:', err)
      })
  }

  getMetadata(mediainfo: MediaInfo<'text'>, file: Blob): Promise<string> {
    return new Promise<string>((resolve, reject) => {
      const getSize = () => file.size
      const readChunk: ReadChunkFunc = (chunkSize, offset) =>
        new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.onload = (event: ProgressEvent<FileReader>) => {
            if (event.target.error) {
              reject(event.target.error)
            }
            resolve(new Uint8Array(event.target.result as ArrayBuffer))
          }
          reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
        })

      mediainfo
        .analyzeData(getSize, readChunk)
        .then((result) => {
          resolve(result)
        })
        .catch(() => {
          reject(new Error("Can't get media information"))
        })
    })
  }

但是由于以下错误，有些 TS 不允许它编译：

错误：

Error: node_modules/mediainfo.js/dist/MediaInfoModule.d.ts:23:35 - error TS2304: Cannot find name 'EmscriptenModule'.

23 interface MediaInfoModule extends EmscriptenModule {
                                     ~~~~~~~~~~~~~~~~


Error: node_modules/mediainfo.js/dist/MediaInfoModule.d.ts:27:39 - error TS2304: Cannot find name 'EmscriptenModuleFactory'.

27 declare const mediaInfoModuleFactory: EmscriptenModuleFactory<MediaInfoModule>

Answer 1

解决方案是在tsconfig.app.json中添加type

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["@types/emscripten"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

请参考：https://github.com/tensorflow/tfjs/issues/3866#issuecomment-794331255