Tweet
Tweet

Slide 1

Slide 1 text

Proprietary + Confidential Guillaume Laforge @glaforge Reuse old smartphones to monitor 3D prints with WebRTC, WebSockets and Serverless containers

Slide 2

Slide 2 text

Proprietary + Confidential Guillaume Laforge Developer Advocate for Google Cloud Java Champion Apache Groovy project founder Cast Codeurs podcast co-host @glaforge

Slide 3

Slide 3 text

Proprietary + Confidential How it all started… with a 3D printer 01

Slide 4

Slide 4 text

Proprietary + Confidential Anycubic Vyper

Slide 5

Slide 5 text

Proprietary + Confidential Anycubic Vyper

Slide 6

Slide 6 text

Proprietary + Confidential Some of my 3D prints

Slide 7

Slide 7 text

Proprietary + Confidential Sometimes prints take a long while…

Slide 8

Slide 8 text

Proprietary + Confidential Sometimes prints look ugly… or fail!

Slide 9

Slide 9 text

Proprietary + Confidential

Slide 10

Slide 10 text

Proprietary + Confidential Problem is…

Slide 11

Slide 11 text

Proprietary + Confidential Room upstairs 3D printer in the basement

Slide 12

Slide 12 text

Proprietary + Confidential Now what? Need a camera? 🎥 Where’s the wifi? 📶 02

Slide 13

Slide 13 text

Proprietary + Confidential

Slide 14

Slide 14 text

Proprietary + Confidential

Slide 15

Slide 15 text

Proprietary + Confidential

Slide 16

Slide 16 text

Proprietary + Confidential

Slide 17

Slide 17 text

Proprietary + Confidential Why buy 💵 when we can reinvent the 🎡 wheel? 😊 03

Slide 18

Slide 18 text

Proprietary + Confidential What do we need? 1. Some kind of camera 2. Wireless connectivity 3. A solution to stream a video 4. Likely a power source, a stand…

Slide 19

Slide 19 text

Proprietary + Confidential What about reusing our 📱 old smartphones?

Slide 20

Slide 20 text

Proprietary + Confidential What do we need? 1. Some kind of camera 2. Wireless connectivity 3. A solution to stream a video 4. Likely a power source, a stand… Smartphones have cameras & connect to Wifi

Slide 21

Slide 21 text

Proprietary + Confidential What do we need? 1. Some kind of camera 2. Wireless connectivity 3. A solution to stream a video 4. Likely a power source, a stand… A spare charger for the power source

Slide 22

Slide 22 text

Proprietary + Confidential What do we need? 1. Some kind of camera 2. Wireless connectivity 3. A solution to stream a video 4. Likely a power source, a stand… We can 3D print a stand to position & direct the camera

Slide 23

Slide 23 text

Proprietary + Confidential What do we need? 1. Some kind of camera 2. Wireless connectivity 3. A solution to stream a video 4. Likely a power source, a stand… What’s left? Streaming…

Slide 24

Slide 24 text

Proprietary + Confidential Here comes the engineering part of the story! 💪😆 04

Slide 25

Slide 25 text

Proprietary + Confidential A bit of detective work Google Meet, Facebook Messenger, Discord… use WebRTC for their real-time communication streaming needs

Slide 26

Slide 26 text

Proprietary + Confidential What is WebRTC? Open standard Real-time communication Video, voice, data Peer to Peer Supported by all major browsers JavaScript APIs

Slide 27

Slide 27 text

Proprietary + Confidential Peer to Peer! What about NATs & Firewalls? ICE Interactive Connectivity Establishment SDP Session Description Protocol NAT Network Address Translation STUN Session Traversal Utilities for NAT TURN Traversal Using Relays around NAT

Slide 28

Slide 28 text

Proprietary + Confidential Peer to Peer! What about NATs & Firewalls? Diagrams: developer.mozilla.org/docs/Web/API/WebRTC_API/Protocols

Slide 29

Slide 29 text

Proprietary + Confidential Signaling Offers, answers, ICE candidates Diagram: eytanmanor.medium.com/an-architectural-overview-for-web-rtc-a- protocol-for-implementing-video-conferencing-e2a914628d0e

Slide 30

Slide 30 text

Proprietary + Confidential Signaling We need a server to handle the negotiation WebRTC doesn’t mandate a signaling solution ⇒ Let’s use WebSockets To implement the server, I played with: ● Node.js and ● Micronaut To host the server, I used Google Cloud Run

Slide 31

Slide 31 text

Proprietary + Confidential Micronaut Polyglot: Java, Groovy, Kotlin Natively Cloud-Native: discovery, tracing, logging… Ahead-Of-Time compilation ⇒ ● Fast startup time ● Low memory usage GraalVM native image support

Slide 32

Slide 32 text

Proprietary + Confidential Cloud Run Deploy & auto-scale (0-1-n) your containers in a serverless fashion Any language, any library, any runtime Streaming: SSE, WebSockets, gRPC, HTTP/2 Session affinity, HTTPS URLs, custom domains, high concurrency, and a Free Tier 😄 Fully Managed Speed to Market Auto-scaling $ Pay as You Go

Slide 33

Slide 33 text

Proprietary + Confidential Let’s get coding! 💻 05

Slide 34

Slide 34 text

Proprietary + Confidential Summary 06

Slide 35

Slide 35 text

Proprietary + Confidential ● Worth continuing? ● Should I go IoT? ● Or chose a dedicated solution? Interesting to learn about WebRTC and play with WebSockets Just a Proof of Concept, that needs tons of improvements WebRTC & WebSockets are not trivial to get right Summary, current status & next steps…

Slide 36

Slide 36 text

Proprietary + Confidential Thank you. @glaforge

Slide 37

Slide 37 text

Proprietary + Confidential References 07

Slide 38

Slide 38 text

Proprietary + Confidential To learn more… WebRTC APIs on MDN https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API Building a WebRTC video broadcast using Javascript https://gabrieltanner.org/blog/webrtc-video-broadcast/ WebRTC — The technology that powers Google Meet/Hangout, Facebook Messenger and Discord https://medium.com/swlh/webrtc-the-technology-that-powers-google-meet-hangout-facebook-messenger-and-discord-cb926973d786 An architectural overview for WebRTC — A protocol for implementing video conferencing https://eytanmanor.medium.com/an-architectural-overview-for-web-rtc-a-protocol-for-implementing-video-conferencing-e2a914628d0e Cloud Run https://cloud.run/ Micronaut framework https://micronaut.io/ Micronaut WebSockets guide https://guides.micronaut.io/latest/micronaut-websocket-gradle-java.html