Slide 1
Slide 1 text
IoT・Webの技術をオンラインイベントで活用！
〜 OBS制御・ニコニコ動画風コメント表示 〜
豊田 陽介 ( @youtoy )
コミュニティ放送部#2 @オンライン
Slide 2
Slide 2 text
豊田陽介（@youtoy）
自己紹介
普段は、某通信会社の研究所勤務
話題のものをたくさん
購入している気がする
IT系イベント主催・登壇・運営、多数参加
子ども向けの活動いろいろ（IT系以外も）
プライベートでの活動
ガジェット好き
その他
主催テーマ：
ビジュアルプログラミング、IoT、
ロボットトイ、メカトロなど
コミュニティ放送部#2 @オンライン
最近は毎月
主催 1〜2回
登壇 2〜3回
Slide 3
Slide 3 text
依頼をいただき記事の執筆なども
コミュニティ放送部#2 @オンライン
月刊I/O 2020年8月号：
Node-RED・機械学習
（Teachable Machine）関連
Seeed K.K. エンジニアブログ：
マイクロビット用
Grove Inventor キット関連
両方ともビジュアルプログラミングがメインの内容
Slide 4
Slide 4 text
今日の本題へ
Slide 5
Slide 5 text
今日の話：
OBS制御 ＆ ニコニコ動画風の
コメント表示
IoT・Webの技術で
Slide 6
Slide 6 text
まずは動画を2つ
ご覧ください
Slide 7
Slide 7 text
デモ動画1： 外部からのOBS制御
https://www.youtube.com/watch?v=aL36V95hkmc
コミュニティ放送部#2 @オンライン
Slide 8
Slide 8 text
デモ動画2：コメント表示＋合成、効果音
https://www.youtube.com/watch?v=VwZrP-n9Aoo&
コミュニティ放送部#2 @オンライン
Slide 9
Slide 9 text
話の1つ目： OBS Studio の話
ビデオ録画と生放送用の
無料でオープンソースの
ソフトウェア
⇒ 昨今のオンラインイベント配信でよく使われてる
コミュニティ放送部#2 @オンライン
コミュニティ放送部の配信にも
Slide 10
Slide 10 text
余談：こちらもよく配信で使われてる
映像スイッチャー
ATEM Mini Pro
（ATEM Mini）
話題のものは自宅に・・・
コミュニティ放送部#2 @オンライン
Slide 11
Slide 11 text
OBSでできることの例①
映像にテロップ・装飾等をつけたり、画面を合成したり
コミュニティ放送部 #1のライブ配信画面＠YouTube
コミュニティ放送部#2 @オンライン
Slide 12
Slide 12 text
合成されていたパーツ
プレゼン
スライド
登壇者
カメラ
フレーム部分と、Zoomで表示されたスライド・カメラ
Slide 13
Slide 13 text
合成されていたパーツ
フレーム部分と、Zoomで表示されたギャラリービュー
Zoomの
ギャラリー
ビュー
（＋加工）
Slide 14
Slide 14 text
OBSでできることの例②
ライブ配信を維持しつつ、表示をがらっと切り替える
コミュニティ放送部#2 @オンライン
登壇スライド表示 参加者のトーク画面
Slide 15
Slide 15 text
デモ動画の1つ目：
OBSで用意された複数の
画面構成の切り替え
Slide 16
Slide 16 text
仕組みの部分：
WebSocket・MQTTでの
リアルタイム通信
（開発はNode.jsとUIFlow）
IoTでよく使われる
JavaScript ビジュアル
プログラミング
Slide 17
Slide 17 text
全体構成
ボタン押下で
シーン変更命令
（UIFlow実装）
シーン変更命令を
受信しOBSへ
（Node.js実装）
MQTT
WebSocket
M5Stack PC
OBS
Slide 18
Slide 18 text
全体構成 〜 別バージョン 〜
シーン変更命令を
受信しOBSへ
（Node.js実装）
（ HTML +
JavaScript）
MQTT
MQTT
WebSocket
PC
OBS
（ HTML +
JavaScript）
今回のデモ動画では省力した部分（実装済み）
スマホ
PC
Slide 19
Slide 19 text
仕組みについて
デモ動画を流した2つとも、詳細はQiitaの記事に！
Slide 20
Slide 20 text
記事の反響
2つとも、デイリーのトレンドに！
（うち1つは週間のトレンドにも）
Slide 21
Slide 21 text
デモ動画2つ目のほう：
オンライン配信をサポート
する仕組みを模索したい！
Slide 22
Slide 22 text
画面を作る仕組み
ブラウザ上の動的表示
（グリーンバック）
OBS上でのカメラ映像
やカメラ＋スライド等
OBS上で合成
実装は HTML
+ JavaScript
Slide 23
Slide 23 text
メインの処理部分
Qiita に掲載済
のもの
Slide 24
Slide 24 text
（既存の類似サービスはあるけど）
ニコニコ動画風コメント表示！
⇒ 実装は実質20行ほど
独自実装なので、効果音機能を足せたり
Slide 25
Slide 25 text
（機能を整えて）
実際にオンラインイベントで試用
↓
「試用⇄改善」を行っていく！
今後は
Slide 26
Slide 26 text
おまけ：
OBS等での合成不要に・・・
Slide 27
Slide 27 text
HTML ＋ JavaScript の実装なので・・・
Electron で背景を透過する仕組みがあれば・・・
あった！
Electron の補足
Slide 28
Slide 28 text
デモ動画3：デスクトップ上でコメント表示
コミュニティ放送部#2 @オンライン
https://www.youtube.com/watch?v=Bb2HSTccF2E
HTML＋JavaScriptを
Electronでネイティブアプリ化
Slide 29
Slide 29 text
終わり！