Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IoT・Webの技術をオンラインイベントで活用！ 〜 OBS制御・ニコニコ動画風コメント表示 ...

Avatar for you（@youtoy） you（@youtoy） PRO
September 26, 2020
Technology
1
18k

IoT・Webの技術をオンラインイベントで活用！ 〜 OBS制御・ニコニコ動画風コメント表示 〜 / コミュニティ放送部#2

Avatar for you（@youtoy）

you（@youtoy） PRO

September 26, 2020
Tweet

More Decks by you（@youtoy）

See All by you（@youtoy）
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
Avatar for you（@youtoy） you
PRO
3
340
Webの技術とガジェットで那須の子ども達にワクワクを！ / IoTLT_20250720
Avatar for you（@youtoy） you
PRO
0
120
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会（#AI道場）
Avatar for you（@youtoy） you
PRO
0
1.8k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
Avatar for you（@youtoy） you
PRO
0
150
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
Avatar for you（@youtoy） you
PRO
0
63
Node−RED で Ollama を使ったローカルLLM（node-red-contrib-ollamaを利用） / ビジュアルプログラミングIoTLT vol.20
Avatar for you（@youtoy） you
PRO
0
190
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
Avatar for you（@youtoy） you
PRO
0
120
ChatGPT からモックサーバー宛（Beeceptor宛）の HTTPリクエストを試す / IoTLT 202504
Avatar for you（@youtoy） you
PRO
0
110
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会（2025年3月）
Avatar for you（@youtoy） you
PRO
0
54

Other Decks in Technology

See All in Technology
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
Avatar for Shun Yoshie syoshie
5
660
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
Avatar for takuya kikuchi tkikuchi1002
6
1k
Semantic Machine Intelligence for Vision, Language, and Actions
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
2
390
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう！
Avatar for Takeru Ino inoutk
0
110
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
Avatar for Toshiaki Baba netmarkjp
0
220
QAを早期に巻き込む”って どうやるの？ モヤモヤから抜け出す実践知
Avatar for Sammy(MoritaMasami) moritamasami
2
180
怖くない！GritQLでBiomeプラグインを作ろうよ
Avatar for 晴れ井戸 pal4de
1
120
生成AIによる情報システムへのインパクト
Avatar for Takaaki Yayoi taka_aki
1
150
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
Avatar for ymotongpoo ymotongpoo
3
210
An introduction to Claude Code SDK
Avatar for Akihiro Okuno choplin
3
3.3k
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
Avatar for helosshi helosshi
1
210
OpenTelemetry の Log を使いこなそう
Avatar for Shota Iwami biwashi
5
1k

Featured

See All Featured
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
530
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.8k
Done Done
Avatar for chrislema chrislema
184
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.3k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.6k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k

Transcript

  1. IoT・Webの技術をオンラインイベントで活用！ 〜 OBS制御・ニコニコ動画風コメント表示 〜 　　豊田 陽介 ( @youtoy ) コミュニティ放送部#2

    @オンライン

  2. 豊田陽介（@youtoy） 自己紹介 普段は、某通信会社の研究所勤務 話題のものをたくさん 購入している気がする IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ（IT系以外も） プライベートでの活動 ガジェット好き その他

    主催テーマ： ビジュアルプログラミング、IoT、 ロボットトイ、メカトロなど コミュニティ放送部#2 @オンライン 最近は毎月 主催 1〜2回 登壇 2〜3回

  3. 依頼をいただき記事の執筆なども コミュニティ放送部#2 @オンライン 月刊I/O 2020年8月号： Node-RED・機械学習 （Teachable Machine）関連 Seeed K.K.

    エンジニアブログ： マイクロビット用 Grove Inventor キット関連 両方ともビジュアルプログラミングがメインの内容

  4. 今日の本題へ

  5. 今日の話： 　OBS制御 ＆ ニコニコ動画風の 　コメント表示 IoT・Webの技術で

  6. まずは動画を2つ ご覧ください

  7. デモ動画1： 外部からのOBS制御 https://www.youtube.com/watch?v=aL36V95hkmc コミュニティ放送部#2 @オンライン

  8. デモ動画2：コメント表示＋合成、効果音 https://www.youtube.com/watch?v=VwZrP-n9Aoo& コミュニティ放送部#2 @オンライン

  9. 話の1つ目： 　 OBS Studio の話 ビデオ録画と生放送用の 無料でオープンソースの ソフトウェア ⇒ 昨今のオンラインイベント配信でよく使われてる

    コミュニティ放送部#2 @オンライン コミュニティ放送部の配信にも

  10. 余談：こちらもよく配信で使われてる 映像スイッチャー ATEM Mini Pro （ATEM Mini） 話題のものは自宅に・・・ コミュニティ放送部#2 @オンライン

  11. OBSでできることの例① 映像にテロップ・装飾等をつけたり、画面を合成したり コミュニティ放送部 #1のライブ配信画面＠YouTube コミュニティ放送部#2 @オンライン

  12. 合成されていたパーツ プレゼン スライド 登壇者 カメラ フレーム部分と、Zoomで表示されたスライド・カメラ

  13. 合成されていたパーツ フレーム部分と、Zoomで表示されたギャラリービュー Zoomの ギャラリー ビュー （＋加工）

  14. OBSでできることの例② ライブ配信を維持しつつ、表示をがらっと切り替える コミュニティ放送部#2 @オンライン 登壇スライド表示 参加者のトーク画面

  15. デモ動画の1つ目： 　OBSで用意された複数の 　画面構成の切り替え

  16. 仕組みの部分： 　WebSocket・MQTTでの 　リアルタイム通信 　（開発はNode.jsとUIFlow） IoTでよく使われる JavaScript ビジュアル プログラミング

  17. 全体構成 ボタン押下で シーン変更命令 （UIFlow実装） シーン変更命令を 受信しOBSへ （Node.js実装） MQTT WebSocket M5Stack

    PC OBS

  18. 全体構成 〜 別バージョン 〜 シーン変更命令を 受信しOBSへ （Node.js実装） （ HTML +

    JavaScript） MQTT MQTT WebSocket PC OBS （ HTML + JavaScript） 今回のデモ動画では省力した部分（実装済み） スマホ PC

  19. 仕組みについて デモ動画を流した2つとも、詳細はQiitaの記事に！

  20. 記事の反響 2つとも、デイリーのトレンドに！ （うち1つは週間のトレンドにも）

  21. デモ動画2つ目のほう： オンライン配信をサポート する仕組みを模索したい！

  22. 画面を作る仕組み ブラウザ上の動的表示 （グリーンバック） OBS上でのカメラ映像 やカメラ＋スライド等 OBS上で合成 実装は HTML + JavaScript

  23. メインの処理部分 Qiita に掲載済 のもの

  24. （既存の類似サービスはあるけど） ニコニコ動画風コメント表示！ ⇒ 実装は実質20行ほど 独自実装なので、効果音機能を足せたり

  25. （機能を整えて） 実際にオンラインイベントで試用 ↓ 「試用⇄改善」を行っていく！ 今後は

  26. おまけ： OBS等での合成不要に・・・

  27. HTML ＋ JavaScript の実装なので・・・ Electron で背景を透過する仕組みがあれば・・・ あった！ Electron の補足

  28. デモ動画3：デスクトップ上でコメント表示 コミュニティ放送部#2 @オンライン https://www.youtube.com/watch?v=Bb2HSTccF2E HTML＋JavaScriptを Electronでネイティブアプリ化

  29. 終わり！