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)
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
190
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
49
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
410
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
200
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2.3k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
380
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
3
2.4k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
110
Other Decks in Technology
See All in Technology
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
0
340
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
260
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
7
910
疎通2024
sadnessojisan
5
1k
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4.1k
2024年版 運用者たちのLLM
nwiizo
3
570
JEP 480: Structured Concurrency
aya_ebata
0
130
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2k
AWS SAW を広めたい @四国クラウドお遍路
kazzpapa3
0
220
contenteditableと向き合う
kikuchikakeru
2
290
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
120
Fediverse Discovery Providers overview
andypiper
0
150
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
325
37k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
The Mythical Team-Month
searls
218
43k
Visualization
eitanlees
142
15k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
A Tale of Four Properties
chriscoyier
155
22k
Being A Developer After 40
akosma
84
590k
Ruby is Unlike a Banana
tanoku
96
11k
The Language of Interfaces
destraynor
153
23k
How to Think Like a Performance Engineer
csswizardry
16
950
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
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でネイティブアプリ化
終わり!