Upgrade to Pro — share decks privately, control downloads, hide ads and more …

テレビを飲み込め！ Webの嵐！！ / Swallow the TV! Web storm! !!

2bf280ac8fc28aa5d99de291eb8ccfbe?s=47 Endo_Hizumi
October 28, 2020
Technology
1
59

テレビを飲み込め！ Webの嵐！！ / Swallow the TV! Web storm! !!

momoと使って、WebRTCでアニメをみようという話をしました。

2bf280ac8fc28aa5d99de291eb8ccfbe?s=128

Endo_Hizumi

October 28, 2020
Tweet

More Decks by Endo_Hizumi

See All by Endo_Hizumi
OK:Googleから始めるスマートホーム生活 / OK: Smart home life starting from Google
2bf280ac8fc28aa5d99de291eb8ccfbe?s=48 endohizumi
0
150
クソアプリで基礎固め / Tutorial in your joke app for Vue.js
2bf280ac8fc28aa5d99de291eb8ccfbe?s=48 endohizumi
0
84
jQuery使いがVue.jsを使った話 / thank you jQuery,Hello Vue.js
2bf280ac8fc28aa5d99de291eb8ccfbe?s=48 endohizumi
0
93
スマホで始めるウェブアプリ開発 / let's start web application development with a Android Device
2bf280ac8fc28aa5d99de291eb8ccfbe?s=48 endohizumi
1
570
キレない関数の作り方 / How to make bat function no anger
2bf280ac8fc28aa5d99de291eb8ccfbe?s=48 endohizumi
0
53
SwaggerでSSLCを 置き換える / Replacing SSLC with Swagger
2bf280ac8fc28aa5d99de291eb8ccfbe?s=48 endohizumi
0
62
Server-sent eventsを使ってみた / I tried using Server-sent event
2bf280ac8fc28aa5d99de291eb8ccfbe?s=48 endohizumi
1
700
キレない変数の扱い方 /How to handle variables no anger
2bf280ac8fc28aa5d99de291eb8ccfbe?s=48 endohizumi
0
53
Netlifyで、ポートフォリオをつくってみた
2bf280ac8fc28aa5d99de291eb8ccfbe?s=48 endohizumi
0
64

Other Decks in Technology

See All in Technology
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
10
18k
RDRA + JavaによるレジャーSaaSプロダクトの要件定義と実装のシームレスな接続
050b8cdbe92809580ed71d0d0d327e36?s=48 jjebejj
PRO
3
540
UIKitのアップデート 
#WWDC22
9d1961575e45a8286cdde5f86dbba312?s=48 akatsuki174
4
320
Oracle Base Database Service 技術詳細
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
3
9.1k
リファインメントは楽しいかね？
F4ea0f5f6211de72f79576d020308de5?s=48 kitamu_mu
1
430
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
2
1.8k
今どきのLinux事情
4241bfe2a981350a7950f3875d9f441a?s=48 tokida
27
17k
Security Hub のマルチアカウント 管理・運用をサーバレスでやってみる
640727b1a8120669de9b6d7f1d469893?s=48 ch6noota
0
820
LINEのB2Bプラットフォームにおけるトラブルシューティング２選
A3966f193f4bef226a0d3e3c1f728d7f?s=48 line_developers
PRO
3
290
OPENLOGI Company Profile
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
0
470
複数のスクラムチームをサポートするエンジニアリングマネジメントの話
4bddf664b03da8ad6b8d61660dcdc682?s=48 okeicalm
0
1.1k
220628 「Google AppSheet」タスク管理アプリをライブ作成 吉積情報伊藤さん
50bc42471d197d0dbef7171f2ef85bb6?s=48 comucal
PRO
0
200

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
Docker and Python
Ecdea9b9714877b86cee08458f085481?s=48 trallard
27
1.6k
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.4k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
213
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
19
1.4k
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
23k
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
58
3.9k
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
23
15k

Transcript

  1. テレビを飲み込め！ Webの嵐！！ 2020年10月28日(水) オタクが最新技術を追うLTイベント#18 遠藤ヒズミ

  2. ご静聴ください我のLTを！

  3. 自己紹介 名前：菊地　峻輔 HN：遠藤ヒズミ (@endo_hizumi)　→ 業務：SESのサーバーサイドエンジニア 今期の推しアニメ：アサルトリリィ 一言：週末の午前中は特撮しか見てない 土曜日: ウルトラマンZと仮面ライダーウィザードの YouTube配信

    日曜日: 仮面ライダーセイバーとキラメイジャー、ゴーバスターズの YouTube配信

  4. 今回の動機 • 最近、邪魔になったTVを実家に送る • ２７インチディスプレイにレコーダーつないでアニメを見るよ うにした • PCデスクに座ったまま、アニメ見られるじゃん。 チョーイイネ！サイコー！

  5. 今回の動機 • 最近、邪魔になったTVを実家に送る • ２７インチディスプレイにレコーダーつないでアニメを見るよ うにした • PCデスクに座ったまま、アニメ見られるじゃん。 結果、布団に入りながら アニメが見づらくなった

  6. そこでヒズミは考えた。

  7. ブラウザから見られればいいよね？

  8. タブレットからアニメみられるね？

  9. 実際に試してみた ラズパイ ＝Raspberry Pi ラズパイへはUSB キャプチャーカード で映像と音声を取り 込む WebRTC部分は、 時雨堂さまの

    momoを利用

  10. WebRTCとは • ブラウザ間でリアルタイム通信を行える技術の総称 • ビデオ・オーディオを送受信するためのAPIがある • 通信にP2PとUDPを用いて、低遅延で配信を行える • プラグインやネイティブアプリのインストールが不要 ➡簡単にいうとブラウザだけでビデオ通話ができる技術です

    初版が2011年だから、目新しい技術ではない

  11. momo の特徴 • WebRTCをブラウザを使わなくても映像を配信できる • ローカルLAN内で配信するのは簡単（以下の一行） • Raspberry Piでも動作するバイナリが配布されている •

    Ayameというアプリケーションで、NATを越えてWebRTCで配信 ができる

  12. 使い方 • バイナリをmomoのリポジトリから落としてくる • 解凍後、”./momo test”でmomoを起動させる。 • {momoを起動したマシンのIP}:8080/html/test.htmlにブラウザ でアクセス •

    ページの”connect”ボタンで通信開始 • レコーダーの映像が出れば成功！

  13. どれくらい遅延するのか？（クリックすると別窓で動画が再生されます） 左：レコーダー直接　右： WebRTC経由

  14. 使った感想と分かったこと • ほぼ遅延せずに、簡単に映像を配信することができた。 • 映像だけなら、なにも設定せずに配信ができる。 • 音声は少し設定が必要である。 • ./momo testだけだと、画質・音質ともに加工されて劣化するた

    め、オプションをつける必要はある • Raspberry pi 3よりRaspberry pi 4を使った方が良い。 これで寒い冬も布団の中でアニメがみられるぜ！！（本音

  15. 今後 • 現状はレコーダーのリモコンで操作してる • ブラウザから操作できるようクライアントの開発を目指す