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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Endo_Hizumi
October 28, 2020
Technology
140
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
490
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
200
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
310
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
100
JSでギャルゲーをつくろう!
endohizumi
0
550
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
自作バイナリを動かす「入口」8選
puhitaku
1
140
生成AIを使って「人が」考える技術 ― AI時代の人機共想と実践ノウハウ|UNITT AC2026
ishiirikie
0
560
AgentCoreで実践するハーネスエンジニアリング
yakumo
1
290
使いこなすために知っておきたい Azure SRE Agent アンチパターン
torumakabe
2
410
AI時代のAPI開発を加速する品質ガードレール / API Quality Guardrails in the AI Era
yokawasa
0
160
AI時代に必要な脅威モデリング― 変化の速度に負けない理解とリスク判断
masakane55
5
1.2k
2026-10-01_MagicPod_QAハーネスエンジニアリングとQA組織の未来像
ynisqa1988
1
550
Snowflake Horizon Catalog と Apache Iceberg で作る オープンなデータ基盤
kitagawaz
0
460
子育てエンジニアの可処分時間が減っても成長を諦めない戦い方
sudoakiy
4
3.5k
おそらく日本で唯一のDevRelインターン生として
husengs7
0
170
ai_cording_with_k8s_knowledge.pdf
mochizuki875
1
310
プロダクト価値を、 チームが使える判断軸に変える
vivion
0
130
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
41
2.8k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
300
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
The Limits of Empathy - UXLibs8
cassininazir
2
710
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
400
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
450
Tell your own story through comics
letsgokoyo
1
1.1k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す