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
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.3k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.6k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
870
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
13
3.7k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
200
Featured
See All Featured
Producing Creativity
orderedlist
PRO
346
40k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Documentation Writing (for coders)
carmenintech
72
4.9k
Speed Design
sergeychernyshev
32
1k
Designing for humans not robots
tammielis
253
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Scaling GitHub
holman
460
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Become a Pro
speakerdeck
PRO
29
5.4k
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ͷΧϝϥͰ ࡱӨͨ͠ը૾Λඈͯ͠ɺ֎ग़ઌ͔Β֬ೝ͢ΔΑ͏ ͳ͜ͱͰ͖Δ