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)
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
190
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
49
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
410
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
200
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2.3k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
380
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
3
2.4k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
110
Other Decks in Technology
See All in Technology
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
200
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
140
技術ブログや登壇資料を秒で作るコツ伝授します
minorun365
PRO
23
5.5k
Estrategias de escalabilidade para projetos web
jessilyneh
2
230
より快適なエラーログ監視を目指して
leveragestech
4
1.3k
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
190
EitherT_with_Future
aoiroaoino
1
1.1k
SORACOMで実現するIoTのマルチクラウド対応 - IoTでのクリーンアーキテクチャの実現 -
kenichirokimura
0
360
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
5
920
Optuna: a Black-Box Optimization Framework
pfn
PRO
1
110
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
300
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
100
Featured
See All Featured
Optimizing for Happiness
mojombo
375
69k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
Side Projects
sachag
451
42k
Building Flexible Design Systems
yeseniaperezcruz
325
37k
The World Runs on Bad Software
bkeepers
PRO
64
11k
How STYLIGHT went responsive
nonsquared
93
5.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
For a Future-Friendly Web
brad_frost
174
9.3k
Design by the Numbers
sachag
277
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
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 活用法を考え中 (まずは配信系?)
終わり!