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
意志の力が9割。アニメから学ぶAI時代のこれから。
endohizumi
1
130
JSでギャルゲーをつくろう!(第3版)
endohizumi
0
70
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
72
JSでギャルゲーをつくろう!
endohizumi
0
380
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
930
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
150
Other Decks in Technology
See All in Technology
TypeScript×CASLでつくるSaaSの認可 / Authz with CASL
saka2jp
2
160
Data Hubグループ 紹介資料
sansan33
PRO
0
2.3k
変わるもの、変わらないもの :OSSアーキテクチャで実現する持続可能なシステム
gree_tech
PRO
0
1.2k
"なるべくスケジューリングしない" を実現する "PreferNoSchedule" taint
superbrothers
0
120
翻訳・対話・越境で強いチームワークを作ろう! / Building Strong Teamwork through Interpretation, Dialogue, and Border-Crossing
ar_tama
0
350
Introduction to Bill One Development Engineer
sansan33
PRO
0
320
組織の“見えない壁”を越えよ!エンタープライズシフトに必須な3つのPMの「在り方」変革 #pmconf2025
masakazu178
1
1k
MAP-7thplaceSolution
yukichi0403
2
190
Claude Code はじめてガイド -1時間で学べるAI駆動開発の基本と実践-
oikon48
20
11k
日経電子版の BCP への取り組みについて/mediajaws1121
nikkei_engineer_recruiting
0
110
Codeer.LowCode.Blazor 紹介と成長録
wadawada
0
110
Android Studio Otter の最新 Gemini 機能 / Latest Gemini features in Android Studio Otter
yanzm
0
490
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Optimizing for Happiness
mojombo
379
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Bash Introduction
62gerente
615
210k
What's in a price? How to price your products and services
michaelherold
246
12k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
Producing Creativity
orderedlist
PRO
348
40k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す