$30 off During Our Annual Pro Sale. View Details »

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）
Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary
Avatar for you（@youtoy） you
PRO
0
62
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
Avatar for you（@youtoy） you
PRO
0
170
ローカルLLMとLINE Botの組み合わせ その2（EVO-X2でgpt-oss-120bを利用） / LINE DC Generative AI Meetup #7
Avatar for you（@youtoy） you
PRO
1
190
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
Avatar for you（@youtoy） you
PRO
0
370
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
Avatar for you（@youtoy） you
PRO
0
17
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話（主にWeb HID API） / IoTLT @JLCPCB オープンハードカンファレンス
Avatar for you（@youtoy） you
PRO
0
150
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
Avatar for you（@youtoy） you
PRO
0
50
最近発売された端末＋UIFlow 2.0の組み合わせ（＋1.0の話）をUSB接続で / ビジュアルプログラミングIoTLT vol.21
Avatar for you（@youtoy） you
PRO
0
120
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
Avatar for you（@youtoy） you
PRO
0
230

Other Decks in Technology

See All in Technology
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.3k
オープンデータの内製化から分かったGISデータを巡る行政の課題
Avatar for 室木直樹 naokim84
2
1.3k
私も懇親会は苦手でした ～苦手だからこそ懇親会を楽しむ方法～ / 20251127 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
540
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
47k
pmconf2025 - データを活用し「価値」へ繋げる
Avatar for Emy - Emiko Yoshihara glorypulse
0
380
Claude Code Getting Started Guide(en)
Avatar for Oikon oikon48
0
130
Databricksによるエージェント構築
Avatar for Takaaki Yayoi taka_aki
1
110
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
320
AI/MLのマルチテナント基盤を支えるコンテナ技術
Avatar for Preferred Networks pfn
PRO
4
680
Oracle Cloud Infrastructure：2025年11月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
1
110
段階的に進める、 挫折しない自宅サーバ入門
Avatar for yut yu_kod
5
2.2k
21st ACRi Webinar - AMD Presentation Slide (Nao Sumikawa)
Avatar for Nao Sumikawa nao_sumikawa
0
180

Featured

See All Featured
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.3k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Done Done
Avatar for chrislema chrislema
186
16k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.1k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
58
6.1k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
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. 終わり！