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
onozaty
February 28, 2018
Programming
0
36
WebSocketでカメラの映像を共有してみた
WebSocketのバイナリメッセージとWebRTCのカメラを利用して、映像の共有をしてみました
onozaty
February 28, 2018
Tweet
Share
More Decks by onozaty
See All by onozaty
リモートワーク中に買って良かったものベスト3
onozaty
0
180
情報を表現するときのポイント
onozaty
0
22
チームで開発するための環境を整える
onozaty
1
200
Selenium入門(2023年版)
onozaty
1
170
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
0
55
Java8から17へ
onozaty
0
18
今からでも遅くないDBマイグレーション - Flyway と SchemaSpy の紹介 -
onozaty
0
190
Redmine issue assign notice plugin の紹介
onozaty
0
160
最近作ったもの
onozaty
0
26
Other Decks in Programming
See All in Programming
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
AIともっと楽するE2Eテスト
myohei
6
2.6k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Scaling GitHub
holman
460
140k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Balancing Empowerment & Direction
lara
1
430
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Gamification - CAS2011
davidbonilla
81
5.4k
Unsuck your backbone
ammeep
671
58k
Speed Design
sergeychernyshev
32
1k
A Modern Web Designer's Workflow
chriscoyier
695
190k
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ͷΧϝϥͰ ࡱӨͨ͠ը૾Λඈͯ͠ɺ֎ग़ઌ͔Β֬ೝ͢ΔΑ͏ ͳ͜ͱͰ͖Δ