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
81
テレビを飲み込め! 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
29
JSでギャルゲーをつくろう!
endohizumi
0
170
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
280
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
190
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
160
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
870
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
120
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
80
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
1.2k
Other Decks in Technology
See All in Technology
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
550
Log Analytics を使った実際の運用 - Sansan Data Hub での取り組み
sansantech
PRO
0
120
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
850
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
12k
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
280
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
140
OPENLOGI Company Profile
hr01
0
60k
“常に進化する”開発現場へ! SHIFTが語るアジャイルQAの未来/20250306 Yuma Murase
shift_evolve
0
110
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
110
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
260
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Documentation Writing (for coders)
carmenintech
68
4.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
A Tale of Four Properties
chriscoyier
158
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Automating Front-end Workflow
addyosmani
1369
200k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
BBQ
matthewcrist
87
9.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す