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)
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
10
最近発売された端末+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
Android Audio: Beyond Winning On It
atsushieno
0
3.4k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
データ分析エージェント Socrates の育て方
na0
7
2.5k
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
100
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
120
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
430
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Adaptive Systems
keathley
43
2.7k
A Tale of Four Properties
chriscoyier
160
23k
For a Future-Friendly Web
brad_frost
180
9.9k
Building an army of robots
kneath
306
46k
The Invisible Side of Design
smashingmag
301
51k
What's in a price? How to price your products and services
michaelherold
246
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
BBQ
matthewcrist
89
9.8k
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でネイティブアプリ化
終わり!