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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Endo_Hizumi
October 28, 2020
Technology
1
110
テレビを飲み込め! 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でギャルゲー!~JavaScriptでノベルゲーエンジン作ったった~
endohizumi
1
150
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
140
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
170
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
80
JSでギャルゲーをつくろう!
endohizumi
0
420
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
330
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
240
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
200
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
950
Other Decks in Technology
See All in Technology
GCASアップデート(202510-202601)
techniczna
0
230
全員が「作り手」になる。職能の壁を溶かすプロトタイプ開発。
hokuo
1
660
【インシデント入門】サイバー攻撃を受けた現場って何してるの?
shumei_ito
0
1.3k
データ民主化のための LLM 活用状況と課題紹介(IVRy の場合)
wxyzzz
2
320
Werner Vogelsが14年間 問い続けてきたこと
yusukeshimizu
2
280
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
17k
生成AI時代にこそ求められるSRE / SRE for Gen AI era
ymotongpoo
4
1.5k
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
10
73k
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
you
PRO
0
210
15 years with Rails and DDD (AI Edition)
andrzejkrzywda
0
130
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
genda
0
140
Introduction to Bill One Development Engineer
sansan33
PRO
0
350
Featured
See All Featured
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
88
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
51
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Technical Leadership for Architectural Decision Making
baasie
1
230
From π to Pie charts
rasagy
0
120
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
240
Faster Mobile Websites
deanohume
310
31k
HDC tutorial
michielstock
1
340
The SEO Collaboration Effect
kristinabergwall1
0
350
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
46
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す