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
79
テレビを飲み込め! 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
18
JSでギャルゲーをつくろう!
endohizumi
0
130
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
280
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
180
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
160
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
860
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
120
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
78
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
1.2k
Other Decks in Technology
See All in Technology
インシデントキーメトリクスによるインシデント対応の改善 / Improving Incident Response using Incident Key Metrics
nari_ex
0
4.1k
private spaceについてあれこれ調べてみた
operando
1
170
EDRからERM: PFN-SIRTが関わるセキュリティとリスクへの取り組み
pfn
PRO
0
110
Windows Server 2025 へのアップグレードではまった話
tamaiyutaro
2
260
攻撃者の視点で社内リソースはどう見えるのかを ASMで実現する
hikaruegashira
4
2.1k
Power BI は、レポート テーマにこだわろう!テーマのティア表付き
ohata_ds
0
120
Platform EngineeringがあればSREはいらない!? 新時代のSREに求められる役割とは
mshibuya
2
4k
Redshiftを中心としたAWSでのデータ基盤
mashiike
0
100
“自分”を大切に、フラットに。キャリアチェンジしてからの一年 三ヶ月で見えたもの。
maimyyym
0
300
パブリッククラウドのプロダクトマネジメントとアーキテクト
tagomoris
4
770
現実的なCompose化戦略 ~既存リスト画面の置き換え~
sansantech
PRO
0
160
SREとしてスタッフエンジニアを目指す / SRE Kaigi 2025
tjun
15
6.4k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Invisible Side of Design
smashingmag
299
50k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building an army of robots
kneath
302
45k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Code Reviewing Like a Champion
maltzj
521
39k
Docker and Python
trallard
43
3.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
Designing Experiences People Love
moore
139
23k
Site-Speed That Sticks
csswizardry
3
310
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す