Pro Yearly is on sale from $80 to $50! »

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

Cd931bc05e7cee46b9a950a63e47ba4c?s=47 yo-to
October 22, 2020

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

Cd931bc05e7cee46b9a950a63e47ba4c?s=128

yo-to

October 22, 2020
Tweet

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. 終わり!