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

Transcript

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

2. オンラインLTハックLT @オンライン 豊田陽介（@youtoy） 自己紹介 普段は、某通信会社の研究所勤務 話題のものをたくさん 購入している気がする IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ（IT系以外も） プライベートでの活動

   ガジェット好き その他 主催テーマ： ビジュアルプログラミング、IoT、 ロボットトイ、メカトロなど

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

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

5. 　 OBS Studio の話 ビデオ録画と生放送用の 無料でオープンソースの ソフトウェア ⇒ 昨今のオンラインイベント配信でよく使われてる オンラインLTハックLT

   @オンライン 今回の話の1つはこれをアプリ外から操作する話

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

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

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

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

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

    PC OBS オンラインLTハックLT @オンライン

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

12. 全体構成（ニコニコ動画風コメント表示＋音） Webサイト上の ボタン押下で メッセージ送信 MQTT PC グリーンバックの ページ上にテキス ト・絵文字を流す OBS

    ブラウザ スマホ等 PC上の画面やカ メラ映像を合成 オンラインLTハックLT @オンライン 効果音を再生

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

    + JavaScript

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

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

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

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

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

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

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

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

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

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

24. 全体構成（LINEアプリ連携） LINEアプリ上で 入力した内容を POSTで送信 MQTT PC スマホ等 オンラインLTハックLT @オンライン MQTT

    Websocket HTTP リクエス ト 受信したテキスト に合わせて処理を 場合分け

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

    と連携する流れ

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

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

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

    の補足

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

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

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

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

33. 終わり！