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)
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
57
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
150
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
100
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
92
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
49
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
52
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
100
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
230
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
Other Decks in Technology
See All in Technology
What's new in OpenShift 4.19
redhatlivestreaming
1
220
マルチテナント+マルチプロダクト SaaS への AI Agent の組み込み方
kworkdev
PRO
2
300
基調講演: 生成AIを活用したアプリケーションの開発手法とは?
asei
1
120
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
330
kubellが挑むBPaaSにおける、人とAIエージェントによるサービス開発の最前線と技術展望
kubell_hr
0
270
RubyOnRailsOnDevin+α / DevinMeetupJapan#2
ginkouno
0
220
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
250
新規プロダクト開発、AIでどう変わった? #デザインエンジニアMeetup
bengo4com
0
440
今からでも間に合う! 生成AI「RAG」再入門 / Re-introduction to RAG in Generative AI
hideakiaoyagi
1
160
新卒3年目の後悔〜機械学習モデルジョブの運用を頑張った話〜
kameitomohiro
0
170
Model Mondays S2E01: Advanced Reasoning
nitya
0
310
SFTPコンテナからファイルをダウンロードする
dip
0
110
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Unsuck your backbone
ammeep
671
58k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Rails Girls Zürich Keynote
gr2m
94
14k
Being A Developer After 40
akosma
90
590k
Producing Creativity
orderedlist
PRO
346
40k
Six Lessons from altMBA
skipperchong
28
3.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
910
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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 活用法を考え中 (まずは配信系?)
終わり!