角8中的Mediainfo.js积分
我正在尝试使用Mediainfo.js获取一些视频信息在一个角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页面上说它是唯一的节点(https://www.npmjs.com/package/wasm)
我也检查了Webpack的例子(https://github.com/buzz/mediainfo.js/blob/50830088bd775942a3962416ce61f759b13bc7c2/webpack.config.js#L34)，但是它和角的结构太不一样了。我还找到了这页面，该页面显示了如何使用wasm模块的角度，但是我不知道我会放什么，而不是这个例子的fibonacci函数。
然而Mediainfo的页面声称“所有的分析都是在浏览器中完成的”，所以应该是可能的。
如何将介质集成到角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我需要的是正确的角度积分。如何使用
import MediaInfo from 'mediainfo.js'也许我应该把一些配置放在应用程序模块或者什么的。我只是不知道从哪里开始。
回答 3
Stack Overflow用户
发布于 2020-07-23 08:01:20
问题是mediainfo将尝试从根目录：http://localhost:4200/MediaInfoModule.wasm加载MediaInfoModule.wasm文件。
所以你只需要确保这个文件是可触及的。
步骤1
将node_modules/mediainfo.js/dist/MediaInfoModule.wasm复制到项目的src目录，
步骤2
修改angular.json文件以将该文件添加到options of build目标中的assets部分
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"assets": [
"src/assets",
"src/favicon.ico",
"src/MediaInfoModule.wasm"
],
"styles": [步骤3
重启ng serve
Stack Overflow用户
发布于 2021-01-30 03:35:30
我知道这个问题是关于角度的，但是如果有人发现了这个帖子，想要一个使用服务工作者的解决方案，并使用Create (CRA)进行了测试，我已经把我的解决方案发到这个帖子上了。
Stack Overflow用户
发布于 2020-07-25 02:48:09
我尝试用上面的解决方案使用一个简单的项目创建一个对MediaInfo的拉请求，作者向我展示了一种更好的方法将它与角集成：
步骤1
修改angular.json文件，将node_modules mediainfo dir中的wasm文件添加到options of build目标的assets部分
"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
要使类型记录停止抱怨mediainfo.js导入，请在src/下面创建以下文件
types/mediainfo.js/index.d.ts 并将以下内容放入其中：
declare module 'mediainfo.js'步骤4
重启ng serve
通过这种方式，您不需要提交wasm文件，并且可以从任何版本升级中获益，而无需收回该文件。
编辑
@KhoPhi这些是讨论中涉及的链接：
与这一问题有关的相关链接：
关于不能在角中使用Mediainfo.js的原始问题：https://github.com/buzz/mediainfo.js/issues/38 https://github.com/buzz/mediainfo.js/issues/39
关于角度示例和增强请求的请求声明：
https://github.com/buzz/mediainfo.js/issues/41
第一次拉力请求有角度的例子：
https://github.com/buzz/mediainfo.js/pull/40
作者一次又一次以角度为例的简化拉请求：
https://stackoverflow.com/questions/63001079
复制相似问题
腾讯云开发者
