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
77
テレビを飲み込め! 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でギャルゲーをつくろう!(第2版)
endohizumi
0
9
JSでギャルゲーをつくろう!
endohizumi
0
96
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
270
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
180
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
150
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
850
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
120
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
77
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
1.1k
Other Decks in Technology
See All in Technology
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
250
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
0
170
オプトインカメラ:UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
1
300
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
110
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
150
マイクロサービスにおける容易なトランザクション管理に向けて
scalar
0
110
C++26 エラー性動作
faithandbrave
2
700
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
160
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
220
MLOps の現場から
asei
6
630
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
680
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Documentation Writing (for coders)
carmenintech
66
4.5k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Code Review Best Practice
trishagee
65
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
510
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す