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
75
テレビを飲み込め! 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
250
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
160
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
150
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
800
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
99
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
75
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
1.1k
キレない変数の扱い方 /How to handle variables no anger
endohizumi
0
130
Netlifyで、ポートフォリオをつくってみた
endohizumi
0
93
Other Decks in Technology
See All in Technology
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
310
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
260
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
900
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Designing with Data
zakiwarfel
96
5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Debugging Ruby Performance
tmm1
71
11k
Ruby is Unlike a Banana
tanoku
96
10k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Into the Great Unknown - MozCon
thekraken
20
1.3k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
BBQ
matthewcrist
82
9k
Building Adaptive Systems
keathley
34
2k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す