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
86
テレビを飲み込め! 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でギャルゲーをつくろう!(第3版)
endohizumi
0
33
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
52
JSでギャルゲーをつくろう!
endohizumi
0
280
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
300
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
200
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
170
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
900
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
140
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
83
Other Decks in Technology
See All in Technology
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
120
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
260
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
110
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
120
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
290
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
160
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
220
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
Definition of Done
kawaguti
PRO
6
480
Prox Industries株式会社 会社紹介資料
proxindustries
0
260
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
280
Featured
See All Featured
How to Ace a Technical Interview
jacobian
277
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
GraphQLとの向き合い方2022年版
quramy
47
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How STYLIGHT went responsive
nonsquared
100
5.6k
The Language of Interfaces
destraynor
158
25k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す