Problems using broadway.js and raspi-camera over websocket - websocket

Question

What I wanna do is use the PI to control a small vehicle I build. I want to control this over a webinterface and also want to use the PI-camera to get a livestream when driving.
I am using nodejs on the PI with this module: https://www.npmjs.com/package/raspivid-stream to get the stream from the PI-camera. Here is my nodejs-code:
var raspividStream = require('raspivid-stream');
var stream = raspividStream();
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
stream.on('data', (data) => {
ws.send(data, { binary: true }, (error) => { if (error) console.error(error);
});
});
and here the index.html:
...htmlstuff...
<canvas id="stream"></canvas>
<script src="decoder.js"></script>
<script src="player.js"></script>
<script>
var connection = new WebSocket('ws://raspberrypi:8443');
var p = new Player();
p.canvas = document.getElementById("stream"); // the canvas - p$
connection.onopen = function () {
connection.send('Ping'); // Send the message 'Ping' to $
};
connection.onerror = function (error) {
console.log('WebSocket Error ' + error);
};
connection.onmessage = function (e) {
console.log(e.data);
p.decode(e);
};
</script>
...htmlstuff...
So far I get this errors in the browser console:
wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
falling back to ArrayBuffer instantiation
failed to asynchronously prepare wasm: CompileError: AsyncCompile: Wasm decoding failed: expected magic word 00 61 73 6d, found 3c 21 44 4f #+0
CompileError: AsyncCompile: Wasm decoding failed: expected magic word 00 61 73 6d, found 3c 21 44 4f #+0
Uncaught (in promise) abort({}). Build with -s ASSERTIONS=1 for more info.
Anybody got an idea how to solve this?

Answer 1

There’s a static file asset in the latest version of Broadway called avc.wasm. You need to get your server to deliver it with the correct MIME Content-type, application/wasm so the decoder can load it.
Or you can try an older version of broadway using asm.js rather than WebAssembly. It’s here.