Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Guillaume Laforge

October 13, 2022
Tweet

More Decks by Guillaume Laforge

Other Decks in Technology

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