index.js

const worker = new Worker(new URL("./worker.js", import.meta.url));

const input = document.createElement("input");
input.type = "file";
document.body.appendChild(input);

input.onchange = (ev) => {
  const file = ev.target.files[0];
  worker.postMessage({ file });
};

package.json

{
  "scripts": {
    "dev": "yarn webpack serve --hot --mode development"
  },
  "dependencies": {
    "@foxglove/sql.js": "^0.0.2",
    "webpack": "^5.65.0"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: "asset/resource",
      },
    ],
  },

  resolve: {
    fallback: {
      path: false,
      fs: false,
      crypto: false,
    },
  },

  plugins: [new HtmlWebpackPlugin()],
};

worker.js

import { SqliteSqljs } from "@foxglove/rosbag2-web";
import { Rosbag2 } from "@foxglove/rosbag2";

async function main() {
  const res = await fetch(
    new URL("@foxglove/sql.js/dist/sql-wasm.wasm", import.meta.url).toString()
  );
  const sqlWasm = await (await res.blob()).arrayBuffer();

  await SqliteSqljs.Initialize({
    wasmBinary: sqlWasm,
  });

  self.onmessage = async (ev) => {
    const file = ev.data.file;

    const dbFile = new SqliteSqljs(file);
    const bag = new Rosbag2([dbFile]);
    await bag.open();

    const topics = await bag.readTopics();
    console.log("bag topics", { topics });

    let count = 0;
    for await (const msg of bag.readMessages({ rawMessages: true })) {
      count += 1;
      console.log(count);
    }
  };
}

void main();