IoT・Webの技術でOBS制御・ニコニコ動画風コメント表示をやってみた後の話 / #onlinelthacklt

by you（@youtoy）

Slide 1

Slide 1 text

IoT・Webの技術でOBS制御・ニコニコ動画風コメント表示をやってみた後の話　　豊田陽介 ( @youtoy ) オンラインLTハックLT @オンライン

Slide 2

Slide 2 text

オンラインLTハックLT @オンライン豊田陽介（@youtoy）自己紹介普段は、某通信会社の研究所勤務話題のものをたくさん購入している気がする IT系イベント主催・登壇・運営、多数参加子ども向けの活動いろいろ（IT系以外も）プライベートでの活動ガジェット好きその他主催テーマ：ビジュアルプログラミング、IoT、ロボットトイ、メカトロなど

Slide 3

Slide 3 text

余談：これも買ってしまった映像スイッチャー ATEM Mini Pro （ATEM Mini）話題のものは自宅に・・・オンラインLTハックLT @オンライン

Slide 4

Slide 4 text

過去にやったこと：　OBS制御＆ニコニコ動画風の　コメント表示 IoT・Webの技術でオンラインLTハックLT @オンライン

Slide 5

Slide 5 text

　 OBS Studio の話ビデオ録画と生放送用の無料でオープンソースのソフトウェア ⇒ 昨今のオンラインイベント配信でよく使われてるオンラインLTハックLT @オンライン今回の話の1つはこれをアプリ外から操作する話

Slide 6

Slide 6 text

デモ動画1：アプリ外部からのOBS制御 https://www.youtube.com/watch?v=aL36V95hkmc オンラインLTハックLT @オンライン

Slide 7

Slide 7 text

デモ動画2：コメント表示＋合成、効果音 https://www.youtube.com/watch?v=VwZrP-n9Aoo& オンラインLTハックLT @オンライン

Slide 8

Slide 8 text

いったん、これまでのデモの補足仕組みについてなどオンラインLTハックLT @オンライン

Slide 9

Slide 9 text

OBS操作の仕組み：　WebSocket・MQTTでの　リアルタイム通信　（開発はNode.jsとUIFlow） IoTでよく使われる JavaScript ビジュアルプログラミングオンラインLTハックLT @オンライン

Slide 10

Slide 10 text

全体構成（外部からのOBS操作）画面タップでシーン変更命令（UIFlow実装）シーン変更命令を受信しOBSへ（Node.js実装） MQTT WebSocket M5Stack PC OBS オンラインLTハックLT @オンライン

Slide 11

Slide 11 text

ニコニコ動画風のコメント表示の仕組み：　HTML＋JavaScript で実装　（アニメーションはライブラリ） GSAP オンラインLTハックLT @オンライン

Slide 12

Slide 12 text

全体構成（ニコニコ動画風コメント表示＋音） Webサイト上のボタン押下でメッセージ送信 MQTT PC グリーンバックのページ上にテキスト・絵文字を流す OBS ブラウザスマホ等 PC上の画面やカメラ映像を合成オンラインLTハックLT @オンライン効果音を再生

Slide 13

Slide 13 text

オンラインLTハックLT @オンライン画面を作る仕組みブラウザ上の動的表示（グリーンバック） OBS上でのカメラ映像やカメラ＋スライド等 OBS上で合成実装は HTML + JavaScript

Slide 14

Slide 14 text

オンラインイベントのLTでデモも実施 https://youtu.be/w_ljw9S5zkE?t=5840 オンラインLTハックLT @オンライン

Slide 15

Slide 15 text

仕組みについてデモ動画を流した2つとも、詳細はQiitaの記事に！

Slide 16

Slide 16 text

（既存の類似サービスはあるけど）ニコニコ動画風コメント表示！ ⇒ 実装は実質20行ほど Qiitaの記事で複数掲載オンラインLTハックLT @オンライン

Slide 17

Slide 17 text

メインの処理部分オンラインLTハックLT @オンライン

Slide 18

Slide 18 text

（既存の類似サービスはあるけど）ニコニコ動画風コメント表示！ ⇒ 実装は実質20行ほど独自実装なので、好きな機能を足せる！ Qiitaの記事で複数掲載オンラインLTハックLT @オンライン

Slide 19

Slide 19 text

デモ動画2でいうと、効果音を鳴らす機能！独自実装なので、好きな機能を足せる！オンラインLTハックLT @オンライン

Slide 20

Slide 20 text

さらに新機能を追加してみた！

Slide 21

Slide 21 text

LINEアプリ連携！（LINE Bot開発との組み合わせ）オンラインLTハックLT @オンライン

Slide 22

Slide 22 text

デモ動画3：LINEアプリからOBSを操作オンラインLTハックLT @オンライン https://www.youtube.com/watch?v=K2A2sBlboHU

Slide 23

Slide 23 text

デモ動画4：画面を流す文章をLINEで入力オンラインLTハックLT @オンライン https://www.youtube.com/watch?v=zXj-Cy7aM94

Slide 24

Slide 24 text

全体構成（LINEアプリ連携） LINEアプリ上で入力した内容を POSTで送信 MQTT PC スマホ等オンラインLTハックLT @オンライン MQTT Websocket HTTP リクエスト受信したテキストに合わせて処理を場合分け

Slide 25

Slide 25 text

主な追加実装部分オンラインLTハックLT @オンライン LINEアプリ上で入力された内容によって場合分け OBSの遠隔操作用の流れニコニコ動画風のコメント表示機能と連携する流れ

Slide 26

Slide 26 text

コメントを画面に流す機能、既存サービスは単体のアプリ ↓ OBS等を併用しなくてもコメントを流せる

Slide 27

Slide 27 text

HTML＋JavaScript で実装していたけれど

Slide 28

Slide 28 text

オンラインLTハックLT @オンライン HTML ＋ JavaScript の実装なので・・・ Electron で背景を透過する仕組みがあれば・・・あった！ Electron の補足

Slide 29

Slide 29 text

デモ動画5：デスクトップ上でコメント表示オンラインLTハックLT @オンライン https://www.youtube.com/watch?v=Bb2HSTccF2E HTML＋JavaScriptを Electronでネイティブアプリ化

Slide 30

Slide 30 text

追加実装の手間を減らして Mac上で動くアプリに（たぶんWindowsでもOK）

Slide 31

Slide 31 text

【余談】LT/LT以外にも活用していきたいもの

Slide 32

Slide 32 text

Elgato Stream Deck https://www.elgato.com/ja/gaming/stream-deck 活用法を考え中（まずは配信系？）

Slide 33

Slide 33 text

終わり！