Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IoT・Webの技術でOBS制御・ニコニコ動画風コメント表示をやってみた後の話 / #onli...
Search
you(@youtoy)
PRO
October 22, 2020
Technology
1
18k
IoT・Webの技術でOBS制御・ニコニコ動画風コメント表示をやってみた後の話 / #onlinelthacklt
you(@youtoy)
PRO
October 22, 2020
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
16
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
6
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
120
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.7k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
310
Other Decks in Technology
See All in Technology
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
160
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
3
1.1k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
260
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
190
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
590
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
slog.Handlerのよくある実装ミス
sakiengineer
4
480
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
200
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
組織を巻き込む大規模プラットフォーム移行戦略 〜50+サービスのマルチリージョン・マルチプロダクト化で学んだステークホルダー協働の実践〜 / Platform migration strategy engaging all stakeholders
toshi0607
2
190
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Site-Speed That Sticks
csswizardry
10
820
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GitHub's CSS Performance
jonrohan
1032
460k
Become a Pro
speakerdeck
PRO
29
5.5k
Transcript
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 活用法を考え中 (まずは配信系?)
終わり!