web-dev-qa-db-ja.com

WebAssembly InstantiateStreaming誤ったMIMEタイプ

私はこのチュートリアルを取得しようとしています（ここ： https://www.hellorust.com/demos/add/index.html ）が機能し、私が何をしても、取得できませんWebAssembly MDNは、正しく機能するための関数を予約しました。

それで、上のリンクの指示に従って、_add.wasm_ファイルを取得しました。私の知る限り、これはかなりシンプルで機能するはずです。少し掘り下げた後、最新のWebAssemblyモジュールがストリーミングをインスタンス化することであることがわかりました-そのドキュメントはここにあります：（ https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API ）。

MDNの例では、次のようにしています。

_var importObject = {
  imports: { imported_func: arg => console.log(arg) }
};
_

その後

_WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
.then(obj => obj.instance.exports.exported_func());
_

MDNによれば、importObjectはネストされた引数をラップ解除することです。奇妙ですが、大丈夫です。

これをできるだけ簡単にするために、同じディレクトリにインポートする_add.wasm_ファイルとjsファイルを配置してから、（[〜 ＃〜] note [〜＃〜]：私はVue.jsを使用していますが、SPAのようなライブラリに精通している人にとっては、これは似ているはずです）：

_window.WebAssembly.instantiateStreaming(fetch('./add.wasm', {
  headers: {
    "Content-Type": "application/wasm",
  },
}), importObject)
.then(obj => {
  console.log('inside return obj from WebAssembly initiateStreaming')
  obj => obj.instance.exports.exported_func() 
})
.catch(error=>{
  console.log('there was some error; ', error)
});
_

私が返すエラーは：

_there was some error;  TypeError: "Response has unsupported MIME type"
_

fetch(add.wasm)を使用し、_window._をドロップし、importObjectを完全にドロップし、単純なロギングobjをコンソールにフェッチして、ヘッダーをフェッチリクエストに追加しないようにしました。何も動作していないようです。

_application/wasm_フィールドが広くサポートされていない場合、どういうわけかwebpackに追加する必要があるかもしれませんが、確信が持てず、オンラインで例を見たこともありません。

これを機能させる方法を誰かが知っていますか？

編集：

これはフェッチ要求であるため、バックエンドサーバーから要求を行う必要があると誰かが提案しました。これは理にかなっているので、次のようにしました。

_    WebAssembly.instantiateStreaming(fetch('http://localhost:8000/files/add.wasm'), importObject)
    .then(obj => {
      console.log('inside return obj from WebAssembly initiateStreaming')
      obj => obj.instance.exports.exported_func()
    })
    .catch(error=>{
      console.log('there was some error; ', error)
    });
_

ここで、_http://localhost:8000/files/{someFile}_は、ファイルを提供するバックエンドルートです（もちろん、_add.wasm_は必ず入れます）。残念ながら、同じエラー（つまり_unrecognized MIME type_）が発生し、その理由はわかりません。

javascriptruststreamingfetchwebassembly
7
Peter Weyand

何らかの理由でサーバーを変更して_application/wasm_ファイルリクエストに対して_.wasm_を正しく返すように変更できないことを考慮して、WebAssemblyモジュールのインスタンス化の方法を変更することで問題を回避できます。これを行う代わりに：

_WebAssembly.instantiateStreaming(fetch("./add.wasm")).then(obj => /* ... */)
_

これを行う：

_const response = await fetch("add.wasm");
const buffer = await response.arrayBuffer();
const obj = await WebAssembly.instantiate(buffer);
obj.instance.exports.exported_func();
_

または、_async/await_を使用できない場合は、then()を使用して同等のものを使用します。

実際には、私の回避策はinstantiateStreaming()を呼び出さないようにすることです。これは、続行する前にサーバーから返されるMIMEタイプをチェックする必要があります（ この指定 に従って）。代わりに、ArrayBufferを渡してinstantiate()を呼び出し、チェックを完全に回避します。

3
Lucio Paiva

there was some error; TypeError: "Response has unsupported MIME type"実行しているWebサーバーはMIMEタイプを理解/提供しませんapplication/wasm。

Rustベースのhttpサーバー を使用できます。これはwasm MIMEタイプを認識しています。

Installation

単にカールを使う

curl -SsL https://cdn.rawgit.com/thecoshman/http/master/install.sh | sh

ダウンロードしたスクリプトを実行するか、または https://crates.io/crates/https で他のエクスプローラーを使用して同じことを実行できます。

ランニング

ダウンロードしたサーバーを使用して、Webアプリケーション（index.html）をサーバー処理してください。例えば

cd ${YOUR_APPS_PATH}

http
1
iankit3

回避策のコードスニペットがWebAssembly Git here で公開されています。残念ながら、これは回避策であり、これはinstantiateStreaming()の目的を無効にします here は「はるかに効率的」であると伝えられています。回避策にはinstantiateStreaming()は回避に役立ちます。

0
StashOfCode