Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
Search
Endo_Hizumi
October 28, 2020
Technology
130
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
momoと使って、WebRTCでアニメをみようという話をしました。
Endo_Hizumi
October 28, 2020
More Decks by Endo_Hizumi
See All by Endo_Hizumi
欲しいを叶える個人開発の進め方 / How to Run an Indie Project That Brings Your Ideas to Life
endohizumi
0
1.2k
JSでギャルゲー!~JavaScriptでノベルゲーエンジン作ったった~
endohizumi
1
480
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
200
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
300
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
99
JSでギャルゲーをつくろう!
endohizumi
0
540
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
380
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
280
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
220
Other Decks in Technology
See All in Technology
研究開発部の紹介 / Sansan R&D Profile
sansan33
PRO
5
25k
20260906 「AWS運用入門」著者が教える、運用業務への生成AI活用入門
masaruogura
0
260
KPIだけでは評価できないプロダクトが考えるべき Evalsという第二の評価系 / Beyond KPIs: Evals as a Second Evaluation Framework for Products #PdEConf
aki_iinuma
4
3.9k
Sigmaで作る業務アプリ
kazushiro_honma
0
120
Snowflakeのコスト最適化を支えるアーキテクチャ設計
ktatsuya
1
1.5k
AI時代だからこそ、スケールしないことをやろう
yutashigemura
1
150
Claude in Chrome 入門 / Introduction to Claude in Chrome
cielo1985
0
270
Where Is JetBrains AI Heading- — Central CLI, Air Alpha, and the Agentic Development Stack
x5gtrn
PRO
0
160
Microsoft 365 Copilot chat -tekoälypalvelun tietosuojaongelmat
hponka
0
720
Adaptive Warehouse を今すぐ導入すべき理由と迷ったときの判断基準
__allllllllez__
0
190
Tab5をRubyで動くパソコンにする
kishima
2
340
AI活用の現在地、 ちゃんと見えてますか?/XPfest-2026
visional_engineering_and_design
0
190
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.1k
KATA
mclloyd
PRO
35
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
430
The browser strikes back
jonoalderson
0
1.7k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
280
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
A Tale of Four Properties
chriscoyier
163
24k
Google's AI Overviews - The New Search
badams
0
1.6k
Transcript
テレビを飲み込め! Webの嵐!! 2020年10月28日(水) オタクが最新技術を追うLTイベント#18 遠藤ヒズミ
ご静聴ください我のLTを!
自己紹介 名前:菊地 峻輔 HN:遠藤ヒズミ (@endo_hizumi) → 業務:SESのサーバーサイドエンジニア 今期の推しアニメ:アサルトリリィ 一言:週末の午前中は特撮しか見てない 土曜日: ウルトラマンZと仮面ライダーウィザードの YouTube配信
日曜日: 仮面ライダーセイバーとキラメイジャー、ゴーバスターズの YouTube配信
今回の動機 • 最近、邪魔になったTVを実家に送る • 27インチディスプレイにレコーダーつないでアニメを見るよ うにした • PCデスクに座ったまま、アニメ見られるじゃん。 チョーイイネ!サイコー!
今回の動機 • 最近、邪魔になったTVを実家に送る • 27インチディスプレイにレコーダーつないでアニメを見るよ うにした • PCデスクに座ったまま、アニメ見られるじゃん。 結果、布団に入りながら アニメが見づらくなった
そこでヒズミは考えた。
ブラウザから見られればいいよね?
タブレットからアニメみられるね?
実際に試してみた ラズパイ =Raspberry Pi ラズパイへはUSB キャプチャーカード で映像と音声を取り 込む WebRTC部分は、 時雨堂さまの
momoを利用
WebRTCとは • ブラウザ間でリアルタイム通信を行える技術の総称 • ビデオ・オーディオを送受信するためのAPIがある • 通信にP2PとUDPを用いて、低遅延で配信を行える • プラグインやネイティブアプリのインストールが不要 ➡簡単にいうとブラウザだけでビデオ通話ができる技術です
初版が2011年だから、目新しい技術ではない
momo の特徴 • WebRTCをブラウザを使わなくても映像を配信できる • ローカルLAN内で配信するのは簡単(以下の一行) • Raspberry Piでも動作するバイナリが配布されている •
Ayameというアプリケーションで、NATを越えてWebRTCで配信 ができる
使い方 • バイナリをmomoのリポジトリから落としてくる • 解凍後、”./momo test”でmomoを起動させる。 • {momoを起動したマシンのIP}:8080/html/test.htmlにブラウザ でアクセス •
ページの”connect”ボタンで通信開始 • レコーダーの映像が出れば成功!
どれくらい遅延するのか?(クリックすると別窓で動画が再生されます) 左:レコーダー直接 右: WebRTC経由
使った感想と分かったこと • ほぼ遅延せずに、簡単に映像を配信することができた。 • 映像だけなら、なにも設定せずに配信ができる。 • 音声は少し設定が必要である。 • ./momo testだけだと、画質・音質ともに加工されて劣化するた
め、オプションをつける必要はある • Raspberry pi 3よりRaspberry pi 4を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す