问题描述
我正在尝试将mediainfo.js与React.js一起使用。
看看上面站点的React.js中的用法示例,它是由“ webpack.config.js”设置的。
但是,当我使用create-react-app
构建环境时,“ webpack.config.js”被包装了,似乎不执行'eject'命令就无法对其进行编辑。
如果您使用npm软件包“ react-app-rewired”,则可以在不执行reject命令的情况下对其进行编辑,所以我尝试了。
// config-override.js (overwrites webpack.config.js)
const { resolve } = require('path');
const copyPlugin = require('copy-webpack-plugin');
const wasmFile = resolve(
__dirname,'node_modules','mediainfo.js','dist'
);
const dist = resolve('build','static','js');
// template from https://www.npmjs.com/package/react-app-rewired
module.exports = {
webpack: function(config,env) {
config.plugins.push(new copyPlugin({
patterns: [
{ from: wasmFile,to: dist },],}),)
return config;
},}
这是整个项目。
https://github.com/ottonove/test_mediainfo
由“ npm run build”生成的那个正常工作,但是当我由“ npm run start”运行它时,发生以下错误。
Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d,found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.
还会发出以下警告。
wasm streaming compile Failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
如何设置它与“ npm run start”一起使用?
如果您能教我,我将不胜感激。
解决方法
如果你正在使用 Create React App (CRA),它现在默认创建一个 serviceWorker,或者如果你因为其他原因有一个 serviceWorker,解决这个问题的一种方法是缓存文件,检测请求的路由,并直接返回缓存文件。
请注意,无论 react-router 是什么,这都可以工作,因为 Service Worker 会在请求到达您的应用程序之前拦截它。无需在您的应用中修改任何路由。哎呀,如果我没有 Service Worker,我可能还会这样解决!
首先,将 WASM 文件从项目的顶层复制到 /public 文件夹:
cp ./node_modules/mediainfo.js/dist/MediaInfoModule.wasm ./public
然后使用如下所示的内容修改 Service Worker 脚本的“fetch”函数(如果您有现有的“fetch”侦听器,则需要以类似方式修改逻辑:
const mediaInfoModuleWasm = './MediaInfoModule.wasm'
self.addEventListener('install',event => {
event.waitUntil(caches.open('v1').then(cache => cache.addAll([ mediaInfoModuleWasm ])))
})
self.addEventListener('fetch',event => {
const route = event.request.url.replace(/^[a-z]{4,5}:\/{2}[a-z]{1,}:[0-9]{1,4}.(.*)/,'$1')
if (route === 'static/js/MediaInfoModule.wasm') {
event.respondWith(caches.match(mediaInfoModuleWasm))
}
})
这首先通过侦听服务工作者的“安装”事件并使用标准 StorageCache 模式缓存本地文件来加载您放入 /public 的 MediaInfoModule.wasm 文件。我们侦听 'fetch' 事件,去除协议、域和端口(因为您可能会在多个位置运行此服务),然后返回缓存文件。
我们检查的 static/js/MediaInfoModule.wasm
网址是什么?这是 mediainfo.js 工厂请求的 URL。仔细检查您的设置是否相同的最佳方法是查看调试器的“网络”选项卡以查看所请求的 MediaInfoModule.wasm 网址。
我使用“ WebWorker”解决了该问题。
<label>Use 300Hz audio track instead of 800Hz <input type="checkbox"></label><br>
<video controls></video>
整个项目在这里。
https://github.com/ottonove/test_mediainfo/blob/webworker/config-overrides.js