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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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）
最近の技術系の話題で気になったもの色々（IoT系以外も） / IoTLT 花見予定会（たぶんBBQ） @都立潮風公園バーベキュー広場
Avatar for you（@youtoy） you
PRO
1
250
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
Avatar for you（@youtoy） you
PRO
0
350
イベントで大活躍する電子ペーパー名札を作る（その２） 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
Avatar for you（@youtoy） you
PRO
0
260
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
Avatar for you（@youtoy） you
PRO
0
340
M5Stack Chain DualKey を UIFlow 2.0 ＋ USB接続で試す / ビジュアルプログラミングIoTLT vol.22
Avatar for you（@youtoy） you
PRO
2
210
ローカル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
100
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
Avatar for you（@youtoy） you
PRO
0
220
ローカルLLMとLINE Botの組み合わせ その2（EVO-X2でgpt-oss-120bを利用） / LINE DC Generative AI Meetup #7
Avatar for you（@youtoy） you
PRO
1
970

Other Decks in Technology

See All in Technology
AWS DevOps Agentはチームメイトになれるのか？/ Can AWS DevOps Agent become a teammate
Avatar for Masanori Yamaguchi kinunori
6
760
AI와 협업하는 조직으로의 여정
Avatar for Arawn Park arawn
0
510
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
Avatar for Cybozu cybozuinsideout
PRO
10
79k
小説執筆のハーネスエンジニアリング
Avatar for osushi_cr yoshitetsu
0
760
扱える不確実性を増やしていく - スタートアップEMが考える「任せ方」
Avatar for kadoppe kadoppe
0
320
巨大プラットフォームを進化させる「第3のROI」
Avatar for Recruit recruitengineers
PRO
2
1.2k
[最強DB講義]推薦システム | 基礎編
Avatar for RecSysLab recsyslab
PRO
1
180
ハーネスエンジニアリングをやりすぎた話 ~そのハーネスは解体された~
Avatar for Gota gotalab555
5
1.8k
コードや知識を組み込む / Incorporate Code and Knowledge
Avatar for Kenji Saito ks91
PRO
0
170
UIライブラリに依存しすぎないReact Native設計を目指して
Avatar for Takahiro Kato grandbig
0
140
音声言語モデル手法に関する発表の紹介
Avatar for Kazuki Inamura kzinmr
0
130
実践ハーネスエンジニアリング：TAKTで実現するAIエージェント制御 / Practical Harness Engineering: AI Agent Control Enabled by TAKT
Avatar for nrs nrslib
12
4.8k

Featured

See All Featured
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
100
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
680
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.1k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
730
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
7
1.7k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
810
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
160
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
180
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
180
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
110

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