Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
100
テレビを飲み込め! 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
60
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
130
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
74
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
76
JSでギャルゲーをつくろう!
endohizumi
0
390
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
320
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
230
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
190
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
940
Other Decks in Technology
See All in Technology
年間40件以上の登壇を続けて見えた「本当の発信力」/ 20251213 Masaki Okuda
shift_evolve
PRO
1
140
re:Invent 2025 ~何をする者であり、どこへいくのか~
tetutetu214
0
240
2025年 開発生産「可能」性向上報告 サイロ解消からチームが能動性を獲得するまで/ 20251216 Naoki Takahashi
shift_evolve
PRO
2
210
20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI
yayoi_dd
0
450
AIエージェント開発と活用を加速するワークフロー自動生成への挑戦
shibuiwilliam
4
640
Microsoft Agent 365 についてゆっくりじっくり理解する!
skmkzyk
0
410
.NET 10の概要
tomokusaba
0
120
AIプラットフォームにおけるMLflowの利用について
lycorptech_jp
PRO
1
180
AWSの新機能をフル活用した「re:Inventエージェント」開発秘話
minorun365
1
150
ウェルネス SaaS × AI、1,000万ユーザーを支える 業界特化 AI プロダクト開発への道のり
hacomono
PRO
0
280
普段使ってるClaude Skillsの紹介(by Notebooklm)
zerebom
1
480
Identity Management for Agentic AI 解説
fujie
0
250
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.6k
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
22
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
27
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
0
39
WCS-LA-2024
lcolladotor
0
380
Fireside Chat
paigeccino
41
3.8k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
40
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.9k
How to build a perfect <img>
jonoalderson
0
4.6k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
93
Site-Speed That Sticks
csswizardry
13
1k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す