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

テレビを飲み込め！ 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

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

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