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エージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
Avatar for you（@youtoy） you
PRO
0
110
ブラウザで CircuitPython の開発：公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
Avatar for you（@youtoy） you
PRO
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
Avatar for you（@youtoy） you
PRO
3
2.6k
Webの技術とガジェットで那須の子ども達にワクワクを！ / IoTLT_20250720
Avatar for you（@youtoy） you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会（#AI道場）
Avatar for you（@youtoy） you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
Avatar for you（@youtoy） you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
Avatar for you（@youtoy） you
PRO
0
310
Node−RED で Ollama を使ったローカルLLM（node-red-contrib-ollamaを利用） / ビジュアルプログラミングIoTLT vol.20
Avatar for you（@youtoy） you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
Avatar for you（@youtoy） you
PRO
0
130

Other Decks in Technology

See All in Technology
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
Avatar for Logy nologyance
1
390
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
Avatar for TomoyaIwata iwatatomoya
1
920
KotlinConf 2025_イベントレポート
Avatar for ソニー株式会社 sony
1
130
2025年夏 コーディングエージェントを統べる者
Avatar for nwiizo nwiizo
0
140
allow_retry と Arel.sql / allow_retry and Arel.sql
Avatar for Shintani Teppei euglena1215
1
160
【初心者向け】ローカルLLMの色々な動かし方まとめ
Avatar for Aratako aratako
7
3.4k
なぜスクラムはこうなったのか？歴史が教えてくれたこと/Shall we explore the roots of Scrum
Avatar for Genki Sano sanogemaru
5
1.6k
なぜテストマネージャの視点が 必要なのか？ 〜 一歩先へ進むために 〜
Avatar for Sammy(MoritaMasami) moritamasami
0
220
自作JSエンジンに推しプロポーザルを実装したい！
Avatar for Saji sajikix
1
170
5分でカオスエンジニアリングを分かった気になろう
Avatar for Aja9tochin pandayumi
0
240
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
Avatar for sh_fk2 sh_fk2
3
240
機械学習を扱うプラットフォーム開発と運用事例
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
230

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
Navigating Team Friction
Avatar for Lara Hogan lara
189
15k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
13k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k

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