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
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
140
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
140
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
140
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
79
JSでギャルゲーをつくろう!
endohizumi
0
410
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
Qiita Bash アドカレ LT #1
okaru
0
190
形式手法特論:コンパイラの「正しさ」は証明できるか? #burikaigi / BuriKaigi 2026
ytaka23
17
6.2k
【Agentforce Hackathon Tokyo 2025 発表資料】みらいシフト:あなた働き方を、みらいへシフト。
kuratani
0
120
AI Agent Agentic Workflow の可観測性 / Observability of AI Agent Agentic Workflow
yuzujoe
4
2.1k
The Engineer with a Three-Year Cycle
e99h2121
0
150
モノタロウ x クリエーションラインで実現する チームトポロジーにおける プラットフォームチーム・ ストリームアラインドチームの 効果的なコラボレーション
creationline
0
950
Git Training GitHub
yuhattor
1
150
旬のブリと旬の技術で楽しむ AI エージェント設計開発レシピ
chack411
1
290
みんなでAI上手ピーポーになろう! / Let’s All Get AI-Savvy!
kaminashi
0
150
コミュニティが持つ「学びと成長の場」としての作用 / RSGT2026
ama_ch
2
340
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
チームで安全にClaude Codeを利用するためのプラクティス / team-claude-code-practices
tomoki10
7
3.4k
Featured
See All Featured
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
99
Git: the NoSQL Database
bkeepers
PRO
432
66k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
290
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.8k
Paper Plane (Part 1)
katiecoart
PRO
0
3.2k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
65
36k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
610
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
71k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
2
81
Build The Right Thing And Hit Your Dates
maggiecrowley
38
3k
Odyssey Design
rkendrick25
PRO
0
460
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す