【初心者向け】WebRTCとボディソニックデバイスを使ったサイクリング体験のリアルタイム共有

WebRTC Meetup Tokyo #26
【初⼼者向け】
WebRTCとボディソニックデバイスを使った
サイクリング体験のリアルタイム共有
2023.12.15
NTT⼈間情報研究所槙優⼀

1
Copyright NTT CORPORATION
⾃⼰紹介
槙優⼀ / Yuichi MAKI
NTT⼈間情報研究所サイバー世界研究プロジェクト主任研究員
経歴︓
n 2011 NTT 研究所(旧組織)
n 2014 (株)NTTぷらら
n 2017 NTT 研究所(旧組織)
n 2021 NTT 研究所(現職)
HCI、Web(HTML5とか)
ISPの契約・課⾦管理のBPR、SE
IPTV・スマートホーム関連の新規サービス企画・開発
AR(透明ディスプレイ)
VR・メタバース(振動触覚、点群表現)
@ym_0124

2
ロードバイク楽しそう
https://www.pexels.com/ja-jp/photo/5312249/
COVID-19後のアドベンチャーツーリズム[1]
としても世界中で注⽬されているスポーツ
でも…
お⾦かかりそう
危なそう
体づくりが…
寒いよね…
[1]国⼟交通省観光庁 -アドベンチャーツーリズムの推進-
https://www.mlit.go.jp/kankocho/shisaku/kankochi/adventure.html

3
Copyright NTT CORPORATION https://www.pexels.com/ja-jp/photo/8072926/
観るのは楽しい
凱旋⾨前の⽯畳でスプリントかける
プロ選⼿のスピード感
トップ選⼿たちの絶妙な駆け引き
https://www.pexels.com/ja-jp/photo/3283114/

4
今⽇のお話
n ⾝体感覚まで含めた観戦体験︓触覚メディアの活⽤
n プロ選⼿の五感の刺激を擬似体験
n 映像・⾳響メディアだけでは得られない臨場感
n スポーツ観戦の魅⼒のひとつである「ライブ」感
n 実競技と同時進⾏で⼀緒に戦う感じを味わう
メディアとしての
振動触覚情報
WebRTCの活⽤
によるリアルタイム伝送

5
メディアとしての振動触覚情報
n 振動情報は⾳情報と発⽣メカニズムは同じ[2]
n ⾳ ︓ ⼀連の空気振動を⽿で知覚する情報
n 振動 ︓ ⼀連の物体振動を⽪膚で知覚する情報
⇒ オーディオの収⾳・伝送・提⽰と同じシステム設計が可能
n ヒトが知覚しやすい振動の周波数は数Hz〜数百Hzまで[3]
n ヒトの⽪膚には複数の触覚受容体があり、それぞれ異なる周波数帯に応答する
n 200Hz〜250Hzあたりの振動の知覚が最も感度が⾼い
(※実験条件による。加齢による影響も︕︖）
低周波数帯の⾳を取得・伝送・提⽰できることがカギ
[2]K. Minamizawa et. al., TECHTILE toolkit; a prototyping tool for design and education of haptic media., 2012
[3]坂本ほか, バイオメカニズム・ライブラリー⽣体のふるえと振動知覚
-メカニカルバイブレーションの機能評価- 第10章「機械的振動受容の⼼理的特性」, 2009

6
ボディソニック（体感⾳響）
[4]⾝体で聴こう⾳楽会
https://jpn.pioneer/ja/corp/sustainability/karadadekikou/
n 椅⼦の座⾯や背もたれに設置した振動トランスデューサーで⾳を振動に変えて提⽰する
⾳響技術のひとつ
n 全⾝で⾳楽を楽しんだり、ゲームや映画の衝撃⾳を体で感じたりすることが可能
パイオニア「⾝体で聴こう⾳楽会とボディソニックについて」[4]

7
構成
360-degree
camera
Vibro-sound Mic
(Front)
Vibro-sound Mic
(Rear)
Single-board
Computer
Ambient Mic
(stereo)
360-degree Live Streaming
Ambient
Sound
Vibro
-sound
PC
Web Browser 1
Web Browser 2
WebRTC Media Stream 1
WebRTC Media Stream 2
360-degree Live Streaming
+
Vibro-sound
Ambient Sound
Recording Section(屋外⾃転⾞) Transmit Section Presentation Section(屋内トレーナ)
Screen/HMD
Amplifier(Front)
Body Sonic Device
Amplifier(Rear)
Body Sonic Device
Stereo Speaker
Jetson NANO
B01
ECM-PC60
モノラルコンデンサマイク
RICOH Theta Z1
Firefox v116
on
MacOS
ButtkickerGamer2
4K 360 video
(uvc, h264)

8
WebRTCクライアント
n (株)時⾬堂さま開発のオープンソースソフトウェア
WebRTC Native Client Momo を利⽤[5]
n Nativeクライアントで映像・⾳声の取得、エンコード、
受信側とのシグナリングを完結してくれる、検証にはとても便利なツール
WebRTC Native Client Momo -テストモード-
[5]WebRTC Native Client Momo, https://momo.shiguredo.jp/
$ ./momo --force-i420 --resolution 4K –disable-echo-cancellation –disable-auto-gain-control /
--disable-noise-suppression –disable-highpass-filter test
※低周波振動を送りたいので、エコーキャンセリング・ノイズ低減・ハイパスフィルタ
のオプションはすべてdisableにする(⾼周波⾳は提⽰側のアンプでカット)

9
振動⾳の取得・伝送
n 50Hz〜収⾳可能なモノラルコンデンサマイクで前輪・後輪の振動⾳を収⾳
(取付イメージは後半で)
n 前輪・後輪2chのモノラル⾳声を、ステレオ変換アダプタを介して⼊⼒
n 取得したステレオ振動⾳を映像と同じmediaStreamのAudioTrakへ
Jetson NANO B01
Ubuntu18.04 LTS※ Momo
(test mode)
Pulse Audio
(set-default-source)
(module-loopback latency_msec=ʻʼ)
WebRTC
mediaStream
libwebrtc
Vibro-sound Mic
(Front)
Vibro-sound Mic
(Rear)

10
Jetson NANO B01
Ubuntu18.04 LTS※
libuvc-theta-sample
libuvc-theta
Thetaからの映像・環境⾳取得・伝送
n そのままではThetaZ1をWebカメラとして認識しない
n RICOH社が公開するTheta⽤libuvc(libuvc-theta)と、GStreamer・V4L2を使ったサンプル
(gst_loopback)を使⽤し、仮想カメラデバイス(/dev/video0)にビデオストリームを流し込む[6]
n 仮想カメラデバイスに流し込んだThetaZ1の360°映像をmomoでvideoTrakへ
n 環境⾳はカメラのマイク(ステレオ)をpulseAudio経由で取得し、
別のmediaStreamのaudioTrakへ(映像より早いのでpulseAudioで遅延を⼊れる)
360-degree camera
Ambient Mic
(stereo)
360-degree camera
(uvc, h.264)
[6] Linux Live Streaming Quick Start on Ubuntu x86 - How to Build libuvc for RICOH THETA V and Z1
https://community.theta360.guide/t/linux-live-streaming-quick-start-on-ubuntu-x86-how-to-build-libuvc-for-ricoh-theta-v-and-z1/6123s
gst_loopback
v4l2
/dev/video0
USB-C
Momo
(test mode)
Pulse Audio
(set-default-source)
GStreamer WebRTC
mediaStream
libwebrtc

11
360°カメラ映像の表⽰
n 表⽰はHMDで、360°カメラ映像(正距円筒図法映像)をVR表⽰したい
n WebVRフレームワーク A-FRAME[7]の<a-videosphere>を使⽤
n HTC Vive FlowのwolvicブラウザorPCブラウザ（firefox）
n なぜかv0.7.1じゃないと動かなかった(2023/8/30当時)
<html>
<head>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
</html>
<body>
<a-scene>
<a-assets>
<video id=“remote_video” autoplay loop cwebkit-playsinline playsinline crossorigin=“anonymous” />
</a-assets>
<a-videosphere src=“#remote_video” rotation=“0 90 0” play-on-window-click>
</a-videosphere>
</a-scene>
<script src=“./webrtc.js”></script>
</body>
[7]A-FRAME https://aframe.io/

12
機材セットアップ（屋外⾃転⾞）

13
機材セットアップ(屋外⾃転⾞)

14
振動トランスデューサは
ゲーミングチェア⽤の
Buttkicker® Gamer2を採⽤
(クランプがあり⾞体への取付が容易)
HTC Vive Flow
（w/Wolvic v1.3.2)
機材セットアップ(屋内トレーナ)

15
HMDで体験︕
n めちゃくちゃ酔います
n 1minもしないうちに気分が悪くなって倒れこみます
n 屋外で⾛⾏する⼈のハンドルの動きが映像のブレとなってHMDに表⽰され
るので、とんでもない映像体験になります
n 臨場感どころではない…

16
モニタ出⼒で体験︕
※デモ動画だと振動提⽰わかりづらい

17
まとめ
n ⾝体感覚を伴う、臨場感の⾼いスポーツ観戦体験を⽬指して
n メディアとしての振動触覚(＝⾳情報)のリアルタイム伝送にWebRTCを活⽤
n プロトタイプにもってこいの便利なWebRTC Nativeクライアントの利⽤
n 映像・⾳響に合わせて⾞体からの振動をリアルタイムに擬似体験できる
n VR酔いのケアをしないとめっちゃ酔う(モニタ出⼒でも少し酔う)
n 低周波数帯域に対応するオーディオコーデックについてはノーケア
n G.722 は50Hz以下はカットされるのでOpus⼀択︖(ブラウザの実装次第︖)
n ⾳響や振動のチャネル数を増やしたい
n Skyway WebRTC GatewayでRTPをたくさん流し込む︖
⇨ 別チームでマルチチャンネルオーディオの伝送検証に活⽤

18
おわり

【初心者向け】WebRTCとボディソニックデバイスを使ったサイクリング体験のリアルタイム共有

More Related Content

Similar to 【初心者向け】WebRTCとボディソニックデバイスを使ったサイクリング体験のリアルタイム共有 (20)

【初心者向け】WebRTCとボディソニックデバイスを使ったサイクリング体験のリアルタイム共有