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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for you（@youtoy） you（@youtoy） PRO
September 26, 2020
Technology
18k
1

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

Avatar for you（@youtoy）

you（@youtoy） PRO

September 26, 2020

More Decks by you（@youtoy）

See All by you（@youtoy）
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
Avatar for you（@youtoy） you
PRO
0
75
イベントで大活躍する電子ペーパー名札を作る（その２） 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
Avatar for you（@youtoy） you
PRO
0
220
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
Avatar for you（@youtoy） you
PRO
0
330
M5Stack Chain DualKey を UIFlow 2.0 ＋ USB接続で試す / ビジュアルプログラミングIoTLT vol.22
Avatar for you（@youtoy） you
PRO
2
200
ローカルLLMをJavaScriptで（少しAIエージェントSDKなどの話も） / 冬のJavaScript祭り @Pleasanter Lounge
Avatar for you（@youtoy） you
PRO
0
960
Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary
Avatar for you（@youtoy） you
PRO
0
97
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
Avatar for you（@youtoy） you
PRO
0
210
ローカルLLMとLINE Botの組み合わせ その2（EVO-X2でgpt-oss-120bを利用） / LINE DC Generative AI Meetup #7
Avatar for you（@youtoy） you
PRO
1
940
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
Avatar for you（@youtoy） you
PRO
0
490

Other Decks in Technology

See All in Technology
Even G2 クイックスタートガイド（日本語版）
Avatar for vrshinobi vrshinobi1
0
160
OCI技術資料 : ロード・バランサ 概要 - FLB・NLB共通
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
4
27k
脳が溶けた話 / Melted Brain
Avatar for Keisuke69 keisuke69
1
1.1k
私がよく使うMCPサーバー3選と社内で安全に活用する方法
Avatar for KintoTech_Dev kintotechdev
0
150
Oracle Cloud Infrastructure(OCI)：Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
Avatar for oracle4engineer oracle4engineer
PRO
2
17k
AI時代のオンプレ-クラウドキャリアチェンジ考
Avatar for Yutaro Shirayama yuu0w0yuu
0
670
Bref でサービスを運用している話
Avatar for Sugar Sato sgash708
0
220
トイルを超えたCREは何屋になるのか
Avatar for 弁護士ドットコム bengo4com
0
110
BFCacheを活用して無限スクロールのUX を改善した話
Avatar for Ryuya Yanagi apple_yagi
0
140
最大のアウトプット術は問題を作ること
Avatar for ryoAccount ryoaccount
0
210
MCPで決済に楽にする
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
160
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
16
410k

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
190
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
140
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
120
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.8k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
160
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
200

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