Reuse old smartphones to monitor 3D prints, with WebRTC, WebSockets and Serverless

Monitoring my 3D prints in my basement means climbing lots of stairs back and forth! So here’s my story about how I reused an old smartphone to check the status of my prints. I built a small web app that uses WebRTC to exchange video streams between my broadcasting smartphone and viewers, with WebSockets for signaling, and a serverless platform for easily deploying and hosting my containerized app.

Transcript

1. Proprietary + Confidential Guillaume Laforge @glaforge Reuse old smartphones to monitor 3D prints with WebRTC, WebSockets and Serverless containers
2. Proprietary + Confidential Guillaume Laforge Developer Advocate for Google Cloud Java Champion Apache Groovy project founder Cast Codeurs podcast co-host @glaforge
3. Proprietary + Confidential How it all started… with a 3D printer 01
4. Proprietary + Confidential Anycubic Vyper
5. Proprietary + Confidential Anycubic Vyper
6. Proprietary + Confidential Some of my 3D prints
7. Proprietary + Confidential Sometimes prints take a long while…
8. Proprietary + Confidential Sometimes prints look ugly… or fail!
9. Proprietary + Confidential
10. Proprietary + Confidential Problem is…
11. Proprietary + Confidential Room upstairs 3D printer in the basement
12. Proprietary + Confidential Now what? Need a camera? 🎥 Where’s the wifi? 📶 02
13. Proprietary + Confidential
14. Proprietary + Confidential
15. Proprietary + Confidential
16. Proprietary + Confidential
17. Proprietary + Confidential Why buy 💵 when we can reinvent the 🎡 wheel? 😊 03
18. 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…
19. Proprietary + Confidential What about reusing our 📱 old smartphones?
20. 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
21. 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
22. 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
23. 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…
24. Proprietary + Confidential Here comes the engineering part of the story! 💪😆 04
25. Proprietary + Confidential A bit of detective work Google Meet, Facebook Messenger, Discord… use WebRTC for their real-time communication streaming needs
26. Proprietary + Confidential What is WebRTC? Open standard Real-time communication Video, voice, data Peer to Peer Supported by all major browsers JavaScript APIs
27. 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
28. Proprietary + Confidential Peer to Peer! What about NATs & Firewalls? Diagrams: developer.mozilla.org/docs/Web/API/WebRTC_API/Protocols
29. Proprietary + Confidential Signaling Offers, answers, ICE candidates Diagram: eytanmanor.medium.com/an-architectural-overview-for-web-rtc-a- protocol-for-implementing-video-conferencing-e2a914628d0e
30. 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
31. 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
32. 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
33. Proprietary + Confidential Let’s get coding! 💻 05
34. Proprietary + Confidential Summary 06
35. 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…
36. Proprietary + Confidential Thank you. @glaforge
37. Proprietary + Confidential References 07
38. 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