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制御・ニコニコ動画風コメント表示 ...
Search
you(@youtoy)
PRO
September 26, 2020
Technology
1
18k
IoT・Webの技術をオンラインイベントで活用! 〜 OBS制御・ニコニコ動画風コメント表示 〜 / コミュニティ放送部#2
you(@youtoy)
PRO
September 26, 2020
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
19
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.5k
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
300
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
130
Other Decks in Technology
See All in Technology
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
550
研究開発と製品開発、両利きのロボティクス
youtalk
1
470
AWSで始める実践Dagster入門
kitagawaz
0
300
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
200
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
460
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
360
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
310
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
560
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
1
150
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.5k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
生成AI時代のデータ基盤
shibuiwilliam
6
3.7k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Into the Great Unknown - MozCon
thekraken
40
2k
How GitHub (no longer) Works
holman
315
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Transcript
IoT・Webの技術をオンラインイベントで活用! 〜 OBS制御・ニコニコ動画風コメント表示 〜 豊田 陽介 ( @youtoy ) コミュニティ放送部#2
@オンライン
豊田陽介(@youtoy) 自己紹介 普段は、某通信会社の研究所勤務 話題のものをたくさん 購入している気がする IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ガジェット好き その他
主催テーマ: ビジュアルプログラミング、IoT、 ロボットトイ、メカトロなど コミュニティ放送部#2 @オンライン 最近は毎月 主催 1〜2回 登壇 2〜3回
依頼をいただき記事の執筆なども コミュニティ放送部#2 @オンライン 月刊I/O 2020年8月号: Node-RED・機械学習 (Teachable Machine)関連 Seeed K.K.
エンジニアブログ: マイクロビット用 Grove Inventor キット関連 両方ともビジュアルプログラミングがメインの内容
今日の本題へ
今日の話: OBS制御 & ニコニコ動画風の コメント表示 IoT・Webの技術で
まずは動画を2つ ご覧ください
デモ動画1: 外部からのOBS制御 https://www.youtube.com/watch?v=aL36V95hkmc コミュニティ放送部#2 @オンライン
デモ動画2:コメント表示+合成、効果音 https://www.youtube.com/watch?v=VwZrP-n9Aoo& コミュニティ放送部#2 @オンライン
話の1つ目: OBS Studio の話 ビデオ録画と生放送用の 無料でオープンソースの ソフトウェア ⇒ 昨今のオンラインイベント配信でよく使われてる
コミュニティ放送部#2 @オンライン コミュニティ放送部の配信にも
余談:こちらもよく配信で使われてる 映像スイッチャー ATEM Mini Pro (ATEM Mini) 話題のものは自宅に・・・ コミュニティ放送部#2 @オンライン
OBSでできることの例① 映像にテロップ・装飾等をつけたり、画面を合成したり コミュニティ放送部 #1のライブ配信画面@YouTube コミュニティ放送部#2 @オンライン
合成されていたパーツ プレゼン スライド 登壇者 カメラ フレーム部分と、Zoomで表示されたスライド・カメラ
合成されていたパーツ フレーム部分と、Zoomで表示されたギャラリービュー Zoomの ギャラリー ビュー (+加工)
OBSでできることの例② ライブ配信を維持しつつ、表示をがらっと切り替える コミュニティ放送部#2 @オンライン 登壇スライド表示 参加者のトーク画面
デモ動画の1つ目: OBSで用意された複数の 画面構成の切り替え
仕組みの部分: WebSocket・MQTTでの リアルタイム通信 (開発はNode.jsとUIFlow) IoTでよく使われる JavaScript ビジュアル プログラミング
全体構成 ボタン押下で シーン変更命令 (UIFlow実装) シーン変更命令を 受信しOBSへ (Node.js実装) MQTT WebSocket M5Stack
PC OBS
全体構成 〜 別バージョン 〜 シーン変更命令を 受信しOBSへ (Node.js実装) ( HTML +
JavaScript) MQTT MQTT WebSocket PC OBS ( HTML + JavaScript) 今回のデモ動画では省力した部分(実装済み) スマホ PC
仕組みについて デモ動画を流した2つとも、詳細はQiitaの記事に!
記事の反響 2つとも、デイリーのトレンドに! (うち1つは週間のトレンドにも)
デモ動画2つ目のほう: オンライン配信をサポート する仕組みを模索したい!
画面を作る仕組み ブラウザ上の動的表示 (グリーンバック) OBS上でのカメラ映像 やカメラ+スライド等 OBS上で合成 実装は HTML + JavaScript
メインの処理部分 Qiita に掲載済 のもの
(既存の類似サービスはあるけど) ニコニコ動画風コメント表示! ⇒ 実装は実質20行ほど 独自実装なので、効果音機能を足せたり
(機能を整えて) 実際にオンラインイベントで試用 ↓ 「試用⇄改善」を行っていく! 今後は
おまけ: OBS等での合成不要に・・・
HTML + JavaScript の実装なので・・・ Electron で背景を透過する仕組みがあれば・・・ あった! Electron の補足
デモ動画3:デスクトップ上でコメント表示 コミュニティ放送部#2 @オンライン https://www.youtube.com/watch?v=Bb2HSTccF2E HTML+JavaScriptを Electronでネイティブアプリ化
終わり!