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
1
110
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
momoと使って、WebRTCでアニメをみようという話をしました。
Endo_Hizumi
October 28, 2020
Tweet
Share
More Decks by Endo_Hizumi
See All by Endo_Hizumi
JSでギャルゲー!~JavaScriptでノベルゲーエンジン作ったった~
endohizumi
1
250
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
140
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
190
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
82
JSでギャルゲーをつくろう!
endohizumi
0
420
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
330
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
250
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
210
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
950
Other Decks in Technology
See All in Technology
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
slsops
2
230
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
sansantech
PRO
2
350
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
sansantech
PRO
3
1.4k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
3k
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
kekke_n
1
390
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
mikimatsumoto
0
220
Introduction to Bill One Development Engineer
sansan33
PRO
0
360
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
13k
モダンUIでフルサーバーレスなAIエージェントをAmplifyとCDKでサクッとデプロイしよう
minorun365
4
180
Context Engineeringの取り組み
nutslove
0
330
What happened to RubyGems and what can we learn?
mikemcquaid
0
280
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
1k
Featured
See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
410
My Coaching Mixtape
mlcsv
0
47
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.2k
The Invisible Side of Design
smashingmag
302
51k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
140
How to make the Groovebox
asonas
2
1.9k
How to Talk to Developers About Accessibility
jct
2
130
From π to Pie charts
rasagy
0
120
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す