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)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
22
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
71
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
140
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.4k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
77
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
540
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.3k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
4.7k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
2.5k
Other Decks in Technology
See All in Technology
.NET 9 のパフォーマンス改善
nenonaninu
0
1k
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
570
Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response
yamaguchitk333
2
190
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
360
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
200
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
150
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
17
4.8k
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
3
2.4k
WACATE2024冬セッション資料(ユーザビリティ)
scarletplover
0
210
サーバーなしでWordPress運用、できますよ。
sogaoh
PRO
0
110
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
190
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
130
Featured
See All Featured
Code Review Best Practice
trishagee
65
17k
RailsConf 2023
tenderlove
29
940
The Cost Of JavaScript in 2023
addyosmani
45
7k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520
GitHub's CSS Performance
jonrohan
1030
460k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Statistics for Hackers
jakevdp
796
220k
Why Our Code Smells
bkeepers
PRO
335
57k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
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でネイティブアプリ化
終わり!