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
59
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
130
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
73
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
75
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
世界最速級 memcached 互換サーバー作った
yasukata
0
340
AWS CLIの新しい認証情報設定方法aws loginコマンドの実態
wkm2
6
730
Databricks向けJupyter Kernelでデータサイエンティストの開発環境をAI-Readyにする / Data+AI World Tour Tokyo After Party
genda
1
120
生成AI活用の型ハンズオン〜顧客課題起点で設計する7つのステップ
yushin_n
0
150
GitHub Copilotを使いこなす 実例に学ぶAIコーディング活用術
74th
3
3k
生成AI時代におけるグローバル戦略思考
taka_aki
0
180
非CUDAの悲哀 〜Claude Code と挑んだ image to 3D “Hunyuan3D”を EVO-X2(Ryzen AI Max+395)で動作させるチャレンジ〜
hawkymisc
2
180
Fashion×AI「似合う」を届けるためのWEARのAI戦略
zozotech
PRO
2
360
Kiro Autonomous AgentとKiro Powers の紹介 / kiro-autonomous-agent-and-powers
tomoki10
0
470
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
maimyyym
2
420
AWS Security Agentの紹介/introducing-aws-security-agent
tomoki10
0
230
Snowflakeでデータ基盤を もう一度作り直すなら / rebuilding-data-platform-with-snowflake
pei0804
5
1.5k
Featured
See All Featured
Code Review Best Practice
trishagee
74
19k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
Building Applications with DynamoDB
mza
96
6.8k
Unsuck your backbone
ammeep
671
58k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.6k
Designing for humans not robots
tammielis
254
26k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Into the Great Unknown - MozCon
thekraken
40
2.2k
Documentation Writing (for coders)
carmenintech
76
5.2k
Building an army of robots
kneath
306
46k
A Tale of Four Properties
chriscoyier
162
23k
How to train your dragon (web standard)
notwaldorf
97
6.4k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す