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
WebSocketでカメラの映像を共有してみた
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
onozaty
February 28, 2018
Programming
0
40
WebSocketでカメラの映像を共有してみた
WebSocketのバイナリメッセージとWebRTCのカメラを利用して、映像の共有をしてみました
onozaty
February 28, 2018
Tweet
Share
More Decks by onozaty
See All by onozaty
Dev Containers のススメ
onozaty
0
8
リモートワーク中に買って良かったものベスト3
onozaty
0
190
情報を表現するときのポイント
onozaty
0
26
チームで開発するための環境を整える
onozaty
1
320
Selenium入門(2023年版)
onozaty
1
200
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
0
70
Java8から17へ
onozaty
0
20
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
0
240
Redmine issue assign notice plugin の紹介
onozaty
0
230
Other Decks in Programming
See All in Programming
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
360
MUSUBIXとは
nahisaho
0
120
Oxlintはいいぞ
yug1224
5
1.2k
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
5.9k
ThorVG Viewer In VS Code
nors
0
760
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
bengo4com
0
540
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
960
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.7k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
500
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
410
Apache Iceberg V3 and migration to V3
tomtanaka
0
130
CSC307 Lecture 04
javiergs
PRO
0
650
Featured
See All Featured
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
120
BBQ
matthewcrist
89
10k
We Are The Robots
honzajavorek
0
160
Speed Design
sergeychernyshev
33
1.5k
Producing Creativity
orderedlist
PRO
348
40k
Deep Space Network (abreviated)
tonyrice
0
42
The Cost Of JavaScript in 2023
addyosmani
55
9.5k
Designing Experiences People Love
moore
144
24k
What's in a price? How to price your products and services
michaelherold
247
13k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
280
Transcript
WebSocketͰ Χϝϥͷө૾Λ ڞ༗ͯ͠Έͨ 2018-02-28 ࣾษڧձ onozaty
WebSocket • αʔόͱΫϥΠΞϯτؒͰํ௨৴Λߦ͏ ٕज़ • 1ͭͷίωΫγϣϯͰํ௨৴͕ߦ͑Δ • ϦΞϧλΠϜͳ௨৴Λ࣮ݱͰ͖Δ
ͲΜͳͷʹ͍ͯΔ͔ • ϦΞϧλΠϜʹใΛΓͱΓ͍ͨ͠ͷ • ͨͱ͑ΦϯϥΠϯήʔϜͱ͔
ϒϥβͷରԠঢ়گ Ҿ༻ݩ: https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API#Browser_compatibility
ͱΓ͋͑ͣ Կ͔࡞ͬͯΈ͍ͨ
࠷ॳʹ࡞ͬͨͷ • WebSocketͷࡐʹΑ͕͋͘ΔνϟοτΛ ࡞ͬͯΈͨ • αʔόSpring BootͰ • https://github.com/onozaty/spring-boot-sandbox/ tree/master/spring-boot-websocket
͋·Γʹ؆୯͗ͨ͢
ଞͷࡐΛ୳ͦ͏
ଞͷࡐΛߟ͑Δ • WebSocketόΠφϦϝοηʔδඈͤΔ ͱ͍͏ͷ͕໘നͦ͏ • ΧϝϥWebRTCʹؔ࿈ͯ͠؆୯ʹૢ࡞Ͱ͖ ΔΑ͏ʹͳ͍ͬͯΔΒ͍͠ͷͰɺͦΕҰॹ ʹࢼͤΕ
ΧϝϥͰࡱӨͨ͠ը૾Λ WebSocketͰڞ༗͢Δ
ཁ݅ • ΫϥΠΞϯτؒͰΧϝϥͷө૾Λڞ༗͢Δ • ϦΞϧλΠϜʹߋ৽͠ɺಈըͬΆ͘ݟͤΕΔ Α͏ʹ
αʔόଆͷ࣮ • ड৴ͨ͠όΠφϦσʔλ(ը૾)ʹɺૹ৴ݩΛҰ ҙʹࣝผ͢ΔใΛ༩ͨ͠͏͑ͰɺશΫϥ ΠΞϯτʹϒϩʔυΩϟετ • ΫϥΠΞϯτ͔ΒஅΛݕͨ͠Βɺۭͷσʔ λΛશΫϥΠΞϯτʹૹͬͯදࣔ༰ΛϦηο τ
ΫϥΠΞϯτଆͷ࣮ • getUserMedia()Λ௨ͯ͡ΧϝϥͷσόΠεΛऔ ಘ͠ɺ<video>Ͱಈըͱͯ͠දࣔ • ҰఆपظͰ<video>ͷ༰Λ<canvas>ʹॻ͖ࠐ ΜͰɺjpegը૾ͷόΠφϦʹͯ͠αʔόʹૹ৴ • αʔόଆ͔Βड͚औͬͨը૾ɺόΠφϦͷઌ ಄෦ʹ༩͞Εͨૹ৴ݩΛࣝผ͢ΔใΛݩ
ʹɺૹ৴ݩຖʹදࣔ
ৄ͍͠༰ Լهͷίʔυࢀর https://github.com/onozaty/shared-camera-websocket/ tree/master/shared-camera-server
σϞ
σϞ • ԼهͷϓϩδΣΫτΛHerokuͰσϓϩΠ • https://github.com/onozaty/shared-camera-websocket • ը૾Λେྔʹ৴͢Δ͜ͱʹͳΔͷͰɺ௨৴ ྔʹҙ • ΪΨ͕ݮΔ
ը໘Πϝʔδ
ײ • ΧϝϥΛJavaScript͔Β৮ΔͷɺࢥͬͨҎ্ ʹ؆୯ͩͬͨ • όΠφϦϝοηʔδΛΓͱΓͰ͖Δͷɺ ͍Ζ͍ΖԠ༻͕͖͖ͦ͏ • Herokuศར
͓·͚ • ࠓճͷσϞͰΒͳ͔͕ͬͨɺRaspberry Piʹ ଓͨ͠Χϝϥ͔Β৴͢ΔΫϥΠΞϯτ࡞ͬͨ • Ұ൪ۤઓͨ͠ͷ͜͜ • Node.jsɺPythonɺJavaͱࢼ͢ϋϝʹ •
͜ΕΛ͏ͱɺՈʹ͓͍ͨRaspberry PiͷΧϝϥͰ ࡱӨͨ͠ը૾Λඈͯ͠ɺ֎ग़ઌ͔Β֬ೝ͢ΔΑ͏ ͳ͜ͱͰ͖Δ