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
テレビを飲み込め! 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
930
JSでギャルゲー!~JavaScriptでノベルゲーエンジン作ったった~
endohizumi
1
440
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
190
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
270
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
98
JSでギャルゲーをつくろう!
endohizumi
0
510
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
380
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
270
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
220
Other Decks in Technology
See All in Technology
Gen3R: 3D Scene Generation Meets Feed-Forward Reconstruction
spatial_ai_network
0
130
AI、CDK と協働する Full TypeScript アプリケーション開発 / Full TypeScript Application with AI and CDK
geekplus_tech
2
210
Claude Code 珍プレー好プレー
shinyasaita
0
330
個人開発で育てる「大規模設計の苗床」 - AI時代の1人開発から始める業務への知識接続 / The Seedbed for Large-Scale Design - From AI-Era Solo Projects to Professional Knowledge
bitkey
PRO
1
250
Alphaモジュール使っていいのかい!?いけないのかい!?どっちなんだいっ!?
watany
1
190
しぶいSRE: サーバから見えない障害にどう向き合うか。ラストワンマイルのデバッグ実践 / Shibui SRE
kanny
13
6.2k
End-to-Endで考える信頼性 —LINEアプリにおけるクライアント開発×SRE連携の実践
maruloop
4
4.3k
ローカルLLMとLINE Botの組み合わせ その3 / LINE DC Generative AI Meetup #8
you
PRO
0
130
ガバナンスの「ちょうどいい落とし所」を探れ!開発スピードを妨げない運用判断の勘所 / SRE NEXT 2026
genda
1
160
ヘルスケア領域における AI 活用と その安全性担保のための取り組み (Leveraging AI in Healthcare and Our Efforts to Ensure Its Safety) - Google I/O Extended Tokyo 2026, July 11, 2026
zettaittenani
0
380
AICoEでAIネイティブ組織への進化
yukiogawa
0
170
脱金融のフューチャー・デザイン / Future Design Beyond Finance
ks91
PRO
0
150
Featured
See All Featured
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
390
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
290
Optimising Largest Contentful Paint
csswizardry
37
3.8k
Accessibility Awareness
sabderemane
1
150
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.3k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
220
How GitHub (no longer) Works
holman
316
150k
Crafting Experiences
bethany
1
210
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
270
From π to Pie charts
rasagy
0
230
Art, The Web, and Tiny UX
lynnandtonic
304
22k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す