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
76
テレビを飲み込め! 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でギャルゲーをつくろう!(第2版)
endohizumi
0
5
JSでギャルゲーをつくろう!
endohizumi
0
66
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
270
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
170
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
150
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
840
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
110
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
77
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
1.1k
Other Decks in Technology
See All in Technology
フルカイテン株式会社 採用資料
fullkaiten
0
40k
Can We Measure Developer Productivity?
ewolff
1
150
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
ドメイン名の終活について - JPAAWG 7th -
mikit
33
20k
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
190
[FOSS4G 2024 Japan LT] LLMを使ってGISデータ解析を自動化したい!
nssv
1
210
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
940
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Fireside Chat
paigeccino
34
3k
4 Signs Your Business is Dying
shpigford
180
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Happy Clients
brianwarren
98
6.7k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す