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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
880
JSでギャルゲー!~JavaScriptでノベルゲーエンジン作ったった~
endohizumi
1
430
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
180
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
260
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
96
JSでギャルゲーをつくろう!
endohizumi
0
490
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
370
クソアプリで基礎固め / 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
2026TECHFRESH畢業分享會 - Lightning Talk - E起 See See : 電商推薦讀心術? 數據說了算
line_developers_tw
PRO
0
1.2k
[チョークトーク資料]AWS DevOps Agent を使いこなす / AWS Dev Ops Agent Chalk Talk AWS Summit Japan 2026
kinunori
2
510
MCP Appsを作ってみよう
iwamot
PRO
4
690
自分が詳しくない領域でAIを使う #プロヒス2026
konifar
7
1.8k
日本 Fintech 未来予測レポート 2027〜2028年(手動編集版)
8maki
1
2.4k
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
findy_eventslides
2
160
【セミナー資料】Claude Code をセキュアに使うための考え方と設定の勘どころ / Claude Code Webinar 20260616
masahirokawahara
2
410
ぼっちではじめた登壇が「51名」「241件」の発信に化けた
subroh0508
0
170
Android の公式 Skill / Android skills
yanzm
0
160
生成 AI 実践ガイド (概略版) AIガバナンス編
asei
0
100
【NRUG vol.18】なぜ多くのオブザーバビリティ導入は失敗するのか
nrug_member
0
190
When Platform Engineering Meets GenAI
sucitw
0
120
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
1.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
Product Roadmaps are Hard
iamctodd
PRO
55
12k
The Curious Case for Waylosing
cassininazir
1
390
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Become a Pro
speakerdeck
PRO
31
6k
Speed Design
sergeychernyshev
33
1.9k
Discover your Explorer Soul
emna__ayadi
2
1.1k
KATA
mclloyd
PRO
35
15k
Six Lessons from altMBA
skipperchong
29
4.3k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す