Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
テレビを飲み込め! Webの嵐!! / Swallow the TV! Web storm! !!
Endo_Hizumi
October 28, 2020
Technology
1
64
テレビを飲み込め! 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
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
170
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
110
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
110
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
630
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
64
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
66
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
790
キレない変数の扱い方 /How to handle variables no anger
endohizumi
0
77
Netlifyで、ポートフォリオをつくってみた
endohizumi
0
72
Other Decks in Technology
See All in Technology
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
490
NGINXENG JP#2 - 4-NGINX-エンジニアリング勉強会
hiropo20
0
120
あつめたデータをどう扱うか
skrb
2
160
AWS re:Invent 2022で発表された新機能を試してみた ~Cloud OperationとSecurity~ / New Cloud Operation and Security Features Announced at AWS reInvent 2022
yuj1osm
1
210
💰年度末予算消化祭💰 Large Memory Instance で 画像分類してみた
__allllllllez__
0
100
Airdrop for Open Source Projects
epicsdao
0
700
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.2k
MarvelClient Upgrade 64bit クライアントへの自動アップグレード設定
mitsuru_katoh
0
150
インフラ技術基礎勉強会 開催概要
toru_kubota
0
170
AI Services 概要 / AI Services overview
oracle4engineer
PRO
0
170
データ分析基盤の要件分析の話(202201_JEDAI)
yabooun
0
260
01_ユーザーリサーチ実施の進め方
kouzoukaikaku
0
460
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
The World Runs on Bad Software
bkeepers
PRO
59
5.7k
Design by the Numbers
sachag
271
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
A better future with KSS
kneath
230
16k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.8k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す