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
90
テレビを飲み込め! 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
42
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
59
JSでギャルゲーをつくろう!
endohizumi
0
310
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
300
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
210
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
180
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
910
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
140
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
85
Other Decks in Technology
See All in Technology
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
120
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
150
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
290
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.9k
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
310
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
310
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
2
890
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
410
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
280
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
420
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
620
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
110
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Embracing the Ebb and Flow
colly
86
4.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Fireside Chat
paigeccino
37
3.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Language of Interfaces
destraynor
158
25k
Typedesign – Prime Four
hannesfritz
42
2.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す