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）
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
Avatar for you（@youtoy） you
PRO
0
250
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
Avatar for you（@youtoy） you
PRO
0
3
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話（主にWeb HID API） / IoTLT @JLCPCB オープンハードカンファレンス
Avatar for you（@youtoy） you
PRO
0
130
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
Avatar for you（@youtoy） you
PRO
0
40
最近発売された端末＋UIFlow 2.0の組み合わせ（＋1.0の話）をUSB接続で / ビジュアルプログラミングIoTLT vol.21
Avatar for you（@youtoy） you
PRO
0
93
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
Avatar for you（@youtoy） you
PRO
0
210
ブラウザで CircuitPython の開発：公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
Avatar for you（@youtoy） you
PRO
0
130
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
Avatar for you（@youtoy） you
PRO
3
3.1k
Webの技術とガジェットで那須の子ども達にワクワクを！ / IoTLT_20250720
Avatar for you（@youtoy） you
PRO
0
150

Other Decks in Technology

See All in Technology
ガバメントクラウド（AWS）へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
190
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
Avatar for Ichiro Nishiuma nishiuma
2
160
How to achieve interoperable digital identity across Asian countries
Avatar for Naohiro Fujie fujie
0
140
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
100
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
600
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
Avatar for Rasmus Lystrøm ondfisk
0
110
自動テストのコストと向き合ってみた
Avatar for SmartHR 品質保証部 qa
1
220
ユーザーの声とAI検証で進める、プロダクトディスカバリー
Avatar for SansanTech sansantech
PRO
1
130
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
Avatar for TAKAKING22 takaking22
8
4.1k
from Sakichi Toyoda to Agile
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
110
社内報はAIにやらせよう / Let AI handle the company newsletter
Avatar for Jumpei Sakatsu saka2jp
8
1.4k
速習AGENTS.md：5分で精度を上げる "３ブロック" テンプレ
Avatar for Izumu KUSUNOKI ismk
6
740

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
54
9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
32
2.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
114
20k

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. 終わり！