Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IoT・Webの技術をオンラインイベントで活用! 〜 OBS制御・ニコニコ動画風コメント表示 ...
Search
you(@youtoy)
PRO
September 26, 2020
Technology
1
18k
IoT・Webの技術をオンラインイベントで活用! 〜 OBS制御・ニコニコ動画風コメント表示 〜 / コミュニティ放送部#2
you(@youtoy)
PRO
September 26, 2020
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
47
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
120
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
240
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
56
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
460
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
220
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2.4k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
430
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
Other Decks in Technology
See All in Technology
LeSS Yoake 2024 スポンサーセッション
riki_hiraoka
0
270
5分で完全理解!ゼロから始めるOpenShift Virtualization/Starting from zero OpenShift Virtualization at 5 min
tnk4on
0
120
S3上のログを分析したいだけなのに
mitsuo_sys
1
150
WebRTC と AI の組み合わせ
tnoho
0
450
生成AIの活用パターンと継続的評価
asei
10
1.3k
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
290
カメラ単体で物体の3次元 座標を扱う方法
kenmatsu4
1
210
What's in a Postgres major release? An analysis of contributions in the v17 timeframe | Claire Giordano | PGConf EU 2024
clairegiordano
1
660
現実のRuby/Railsアップグレード
takeyuweb
3
2.8k
DevOpsに関連するツールとその概要を淡々と読み上げる会
devops_vtj
1
140
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
110
Trusted Types API と Vue.js
lycorptech_jp
PRO
1
260
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Building Your Own Lightsaber
phodgson
102
6k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Fireside Chat
paigeccino
32
3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Navigating Team Friction
lara
183
14k
Testing 201, or: Great Expectations
jmmastey
38
7k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Transcript
IoT・Webの技術をオンラインイベントで活用! 〜 OBS制御・ニコニコ動画風コメント表示 〜 豊田 陽介 ( @youtoy ) コミュニティ放送部#2
@オンライン
豊田陽介(@youtoy) 自己紹介 普段は、某通信会社の研究所勤務 話題のものをたくさん 購入している気がする IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ガジェット好き その他
主催テーマ: ビジュアルプログラミング、IoT、 ロボットトイ、メカトロなど コミュニティ放送部#2 @オンライン 最近は毎月 主催 1〜2回 登壇 2〜3回
依頼をいただき記事の執筆なども コミュニティ放送部#2 @オンライン 月刊I/O 2020年8月号: Node-RED・機械学習 (Teachable Machine)関連 Seeed K.K.
エンジニアブログ: マイクロビット用 Grove Inventor キット関連 両方ともビジュアルプログラミングがメインの内容
今日の本題へ
今日の話: OBS制御 & ニコニコ動画風の コメント表示 IoT・Webの技術で
まずは動画を2つ ご覧ください
デモ動画1: 外部からのOBS制御 https://www.youtube.com/watch?v=aL36V95hkmc コミュニティ放送部#2 @オンライン
デモ動画2:コメント表示+合成、効果音 https://www.youtube.com/watch?v=VwZrP-n9Aoo& コミュニティ放送部#2 @オンライン
話の1つ目: OBS Studio の話 ビデオ録画と生放送用の 無料でオープンソースの ソフトウェア ⇒ 昨今のオンラインイベント配信でよく使われてる
コミュニティ放送部#2 @オンライン コミュニティ放送部の配信にも
余談:こちらもよく配信で使われてる 映像スイッチャー ATEM Mini Pro (ATEM Mini) 話題のものは自宅に・・・ コミュニティ放送部#2 @オンライン
OBSでできることの例① 映像にテロップ・装飾等をつけたり、画面を合成したり コミュニティ放送部 #1のライブ配信画面@YouTube コミュニティ放送部#2 @オンライン
合成されていたパーツ プレゼン スライド 登壇者 カメラ フレーム部分と、Zoomで表示されたスライド・カメラ
合成されていたパーツ フレーム部分と、Zoomで表示されたギャラリービュー Zoomの ギャラリー ビュー (+加工)
OBSでできることの例② ライブ配信を維持しつつ、表示をがらっと切り替える コミュニティ放送部#2 @オンライン 登壇スライド表示 参加者のトーク画面
デモ動画の1つ目: OBSで用意された複数の 画面構成の切り替え
仕組みの部分: WebSocket・MQTTでの リアルタイム通信 (開発はNode.jsとUIFlow) IoTでよく使われる JavaScript ビジュアル プログラミング
全体構成 ボタン押下で シーン変更命令 (UIFlow実装) シーン変更命令を 受信しOBSへ (Node.js実装) MQTT WebSocket M5Stack
PC OBS
全体構成 〜 別バージョン 〜 シーン変更命令を 受信しOBSへ (Node.js実装) ( HTML +
JavaScript) MQTT MQTT WebSocket PC OBS ( HTML + JavaScript) 今回のデモ動画では省力した部分(実装済み) スマホ PC
仕組みについて デモ動画を流した2つとも、詳細はQiitaの記事に!
記事の反響 2つとも、デイリーのトレンドに! (うち1つは週間のトレンドにも)
デモ動画2つ目のほう: オンライン配信をサポート する仕組みを模索したい!
画面を作る仕組み ブラウザ上の動的表示 (グリーンバック) OBS上でのカメラ映像 やカメラ+スライド等 OBS上で合成 実装は HTML + JavaScript
メインの処理部分 Qiita に掲載済 のもの
(既存の類似サービスはあるけど) ニコニコ動画風コメント表示! ⇒ 実装は実質20行ほど 独自実装なので、効果音機能を足せたり
(機能を整えて) 実際にオンラインイベントで試用 ↓ 「試用⇄改善」を行っていく! 今後は
おまけ: OBS等での合成不要に・・・
HTML + JavaScript の実装なので・・・ Electron で背景を透過する仕組みがあれば・・・ あった! Electron の補足
デモ動画3:デスクトップ上でコメント表示 コミュニティ放送部#2 @オンライン https://www.youtube.com/watch?v=Bb2HSTccF2E HTML+JavaScriptを Electronでネイティブアプリ化
終わり!