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
73
テレビを飲み込め! 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
230
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
150
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
140
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
770
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
89
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
75
Server-sent eventsを使ってみた / I tried using Server-sent event
endohizumi
1
990
キレない変数の扱い方 /How to handle variables no anger
endohizumi
0
120
Netlifyで、ポートフォリオをつくってみた
endohizumi
0
85
Other Decks in Technology
See All in Technology
Secrets of a PowerShell "Guru"
guyrleech
1
100
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
180
社内アプリで Cloudflare D1を プロダクト運用してみた体験談(Tokyo)
haochenx
0
130
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1.1k
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
2
410
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
430
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.8k
.NET Profiler in 2024.
kkamegawa
2
2.3k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
1.1k
M5stackで使用できるpHセンサの開発
shinrinakamura
1
270
認知症フレンドリーテックとスタックチャン
naokiuc
0
350
しくじり先生、PharmaXのLLMアプリケーション開発の失敗を語る
pharma_x_tech
0
120
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Docker and Python
trallard
35
2.7k
Gamification - CAS2011
davidbonilla
77
4.6k
Navigating Team Friction
lara
179
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Typedesign – Prime Four
hannesfritz
36
2.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Building an army of robots
kneath
300
41k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す