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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

終わり！

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

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

you（@youtoy） PRO

More Decks by you（@youtoy）

Other Decks in Technology

Featured

Transcript