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
86
テレビを飲み込め! 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でギャルゲーをつくろう!(第3版)
endohizumi
0
33
JSでギャルゲーをつくろう!(第2版)
endohizumi
0
52
JSでギャルゲーをつくろう!
endohizumi
0
280
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
endohizumi
0
300
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
endohizumi
0
200
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
endohizumi
0
170
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
endohizumi
1
900
キレない関数の作り方 / How to make bat function no anger
endohizumi
0
140
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
endohizumi
0
83
Other Decks in Technology
See All in Technology
ローカルLLMでファインチューニング
knishioka
0
150
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
290
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
200
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
720
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
420
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
200
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
230
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
2
110
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.4k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Building an army of robots
kneath
306
45k
Automating Front-end Workflow
addyosmani
1370
200k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
KATA
mclloyd
29
14k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
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を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ!!(本音
今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す