Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
Endo_Hizumi
October 28, 2020
Technology
1
59
テレビを飲み込め! 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
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
150
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
84
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
93
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
570
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
53
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
62
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
700
キレない変数の扱い方 /How to handle variables no anger
endohizumi
0
53
Netlifyで、ポートフォリオをつくってみた
endohizumi
0
64
Other Decks in Technology
See All in Technology
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
10
18k
RDRA + JavaによるレジャーSaaSプロダクトの要件定義と実装のシームレスな接続
jjebejj
PRO
3
540
UIKitのアップデート #WWDC22
akatsuki174
4
320
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
9.1k
リファインメントは楽しいかね?
kitamu_mu
1
430
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.8k
今どきのLinux事情
tokida
27
17k
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
ch6noota
0
820
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
3
290
OPENLOGI Company Profile
hr01
0
470
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
okeicalm
0
1.1k
220628 「Google AppSheet」タスク管理アプリをライブ作成 吉積情報伊藤さん
comucal
PRO
0
200
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Docker and Python
trallard
27
1.6k
Web Components: a chance to create the future
zenorocha
303
40k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Designing for humans not robots
tammielis
241
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Navigating Team Friction
lara
175
11k
How to train your dragon (web standard)
notwaldorf
58
3.9k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
23
15k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す