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
   

   View Slide

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

   View Slide

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

   View Slide

4. Proprietary + Confidential
   Anycubic Vyper
   

   View Slide

5. Proprietary + Confidential
   Anycubic Vyper
   

   View Slide

6. Proprietary + Confidential
   Some of my 3D prints
   

   View Slide

7. Proprietary + Confidential
   Sometimes prints
   take a long while…
   

   View Slide

8. Proprietary + Confidential
   Sometimes prints
   look ugly… or fail!
   

   View Slide

9. Proprietary + Confidential
   

   View Slide

10. Proprietary + Confidential
    Problem is…
    

    View Slide

11. Proprietary + Confidential
    Room
    upstairs
    3D printer
    in the
    basement
    

    View Slide

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

    View Slide

13. Proprietary + Confidential
    

    View Slide

14. Proprietary + Confidential
    

    View Slide

15. Proprietary + Confidential
    

    View Slide

16. Proprietary + Confidential
    

    View Slide

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

    View Slide

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…
    

    View Slide

19. Proprietary + Confidential
    What about
    reusing our 📱
    old smartphones?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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…
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

33. Proprietary + Confidential
    Let’s get
    coding! 💻
    05
    

    View Slide

34. Proprietary + Confidential
    Summary
    06
    

    View Slide

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…
    

    View Slide

36. Proprietary + Confidential
    Thank you.
    @glaforge
    

    View Slide

37. Proprietary + Confidential
    References
    07
    

    View Slide

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
    

    View Slide