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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Endo_Hizumi
October 28, 2020
Technology
120
1
Share
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
momoと使って、WebRTCでアニメをみようという話をしました。
Endo_Hizumi
October 28, 2020
More Decks by Endo_Hizumi
See All by Endo_Hizumi
欲しいを叶える個人開発の進め方 / How to Run an Indie Project That Brings Your Ideas to Life
endohizumi
0
790
JSでギャルゲー!~JavaScriptでノベルゲーエンジン作ったった~
endohizumi
1
380
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
170
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
240
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
91
JSでギャルゲーをつくろう!
endohizumi
0
460
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
360
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
260
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
210
Other Decks in Technology
See All in Technology
大学職員のための生成AI最前線 :最前線を、AIガバナンスとして読み直すためのTips
gmoriki
0
1.5k
UIライブラリに依存しすぎないReact Native設計を目指して
grandbig
0
180
拝啓、あの夏の僕へ〜あなたも知っているApp Runnerの世界〜
news_it_enj
0
140
需要創出(Chatwork)×供給(BPaaS) フライホイールとMoat 実行能力の最適配置とAI戦略
kubell_hr
0
1.6k
AIが書いたコードを信じられない問題 〜レビュー負荷を下げるために変えたこと〜 / The AI Code Trust Gap: Reducing the Review Burden
bitkey
PRO
8
1.4k
国内外の生成AIセキュリティの最新動向 & AIガードレール製品「chakoshi」のご紹介 / Latest Trends in Generative AI Security (Domestic & International) & Introduction to AI Guardrail Product "chakoshi"
nttcom
4
1.6k
要件定義の精度を高めるための型と生成AIの活用 / Using Types and Generative AI to Improve the Accuracy of Requirements Definition
haru860
0
250
エージェントスキルを作って自分のインプットに役立てよう
tsubakimoto_s
0
500
バイブコーディングで3倍早く⚪⚪を作ってみた
samakada
0
200
「誰一人取り残されない」 AIエージェント時代のプロダクト設計思想 Product Management Summit 2026
mizushimac
1
2.4k
Digital Independence: Why, When and How
wannesrams
0
210
GitHub Copilot Dev Days
tomokusaba
0
120
Featured
See All Featured
WENDY [Excerpt]
tessaabrams
10
37k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
160
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
65
55k
Heart Work Chapter 1 - Part 1
lfama
PRO
6
35k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Exploring anti-patterns in Rails
aemeredith
3
340
Facilitating Awesome Meetings
lara
57
6.8k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9k
Between Models and Reality
mayunak
3
270
HDC tutorial
michielstock
2
640
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す