経緯

ros2-web-bridgeを使う機会があったので、使い方の手順を共有します。

環境

Ubuntu20.04
ROS2 foxy

手順

まずは下の手順で進めてください。

$ cd <ros2-workspace>/src
$ git clone https://github.com/RobotWebTools/ros2-web-bridge.git
$ sudo apt install nodejs npm
$ cd ros2-web-bridge
$ npm install

npm installした段階で、node-gyp関連でエラーが発生した場合は下のコマンドを実行してください。

$ pip install git+https://chromium.googlesource.com/external/gyp

gypをインストールしても、自分の場合はnodeのバージョンが合っていないと言われました。なので、その場合はこちらを参考にnodeをアップデートしてください。
無事にnpm installが通った場合は、下のコマンドを実行してください。

$ node bin/rosbridge.js

新しいターミナルを開いて、次のコマンドを実行してください。

cd examples && node index.js

その後、ブラウザでhttp://localhost:3000/html/publisher.html にアクセスしてみてください。

結果

結果はこんな感じ。