ブラウザにROS画像の送信 ROS/Javascript

# 概要

ブラウザ上にROSのイメージトピックを配信

# インストール
- web-video-serverをインストール
- sensor_msgs/Imageをブラウザへ配信してくれる

```
sudo apt install ros-noetic-web-video-server
```

# 実行

```
roscore
```

```
rosrun web_video_server web_video_server
```

別端末で好きなイメージを引数に与えて,image_publisherの実行(静止画をROSメッセージとして送信してくれる)

```
rosrun image_publisher image_publisher {イメージファイル} 

ex.
rosrun image_publisher image_publisher temp.png 
```

# 結果

ブラウザからhttp://localhost:8080 へアクセス

すると以下の写真のようにトピックが選択でき,クリックするとそのストリームを見ることができます。

![Screenshot from 2021-09-11 13-12-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/cdc217b8-88e1-b967-ddee-1b727f3c8220.png)

![Screenshot from 2021-09-11 13-17-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/d1e248bf-7f71-f31f-ab91-ceaa68061ce1.png)

# ※自分で立ち上げたサーバに表示

以下、自分のjavasciptプログラムでイメージを取得する場合についてです。

上記プログラムを実行しながら,```webpages```ディレクトリに次のようなプログラム```video.html```を作成します。

※image_topic変数内は,現在配信されているトピックから確認して書き換える(```rostopic list```で確認)

```html:webpages/video.html
<!doctype html>
<html lang="ja">
  <head>
    <title>ROS Image Web Viewer</title>  
    <style>
    *{
      margin: 0px;
      padding: 0px;
      border: 0px;
    }
    .full_picture{
      width: 100vw;
      height: 100vh;
      object-fit: contain;
    }
    </style>
  </head>

  <body>
    <script>
      var image_topic = "/image_publisher_1631381620176566818/image_raw";
      document.write("<img class='full_picture' src='http://"+location.hostname +":8080/stream?topic=" + image_topic + "&type=ros_compressed'></img>");
    </script>
  </body>
</html>
```

実行します。

```
cd webpages
python3 -m http.server
```

http://0.0.0.0:8000/ にアクセスするとブラウザに画像が表示されます。

![Screenshot from 2021-09-11 13-41-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/c84e0368-0d87-77b6-3a12-aa1415379efe.png)

## 内部

内部としてはブラウザからhttpのリクエストをROSパッケージのweb_video_server送り、映像または静止画を受け取っているようです。
ブラウザのネットワーク情報を確認すると,httpのリクエスト内容とレスポンスを確認できます。

映像を受信したときと、静止画を受信したときのそれぞれの内部を確認してみます。

### 映像受信

ネットワーク情報を開くと写真のようになっています。
データが連続して送られてきていることが確認できます。

![Screenshot from 2021-10-15 20-17-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/4db4cbc0-3400-a16f-694f-cd078edc54bd.png)

httpリクエスト/レスポンスのソースを確認すると次のようになります。

```http:ResponseHeadersソース
HTTP/1.0 200 OK
Connection: close
Server: web_video_server
Content-type: text/html;
```

```http:RequestHeadersソース
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:8080
Referer: http://localhost:8080/
sec-ch-ua: "Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36
```

映像遅延を確認します。
Timingという項目をクリックすると遅延情報が分かり写真のようになります。

![Screenshot from 2021-10-15 20-49-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/4b94e0e2-7f3a-969c-5536-13f7052e3da5.png)

1フレームでの遅延情報は以下です
Request sent:0.24ms
Waitint:1.05ms
Content Download:1.75ms



### 静止画受信
![Screenshot from 2021-10-15 20-14-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/973979ec-cb7a-f466-b049-7f3543a98dae.png)

```http:ResponseHeadersソース
HTTP/1.0 200 OK
Connection: close
Server: web_video_server
Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0, max-age=0
X-Timestamp: 1634297436.804383
Pragma: no-cache
Content-type: image/jpeg
Access-Control-Allow-Origin: *
Content-Length: 48135
```

```http:RequestHeadersソース
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:8080
Referer: http://localhost:8080/
sec-ch-ua: "Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36
```

また,Timing情報を見ると遅延時間が確認できます。今回の計測では写真のようになり
Request sent:0.19ms
Waiting: 229.64ms
Content Download: 2.45ms
となりました。

![Screenshot from 2021-10-15 20-37-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/5999bd48-edb4-5480-7884-7bec6d99ade6.png)


# 参考

http://wiki.ros.org/web_video_server

http://wiki.ros.org/image_publisher

https://qiita.com/srs/items/7f86c56d0005184dcbc0