<style> :root { --r-heading1-size: 2.8em; } .container { scrollbar-width: none; } .container::-webkit-scrollbar { display: none; } .reveal h1, .reveal h2 { color: #ffaf00; margin-bottom: 0.5em; text-shadow: 5px 5px #000 !important; } .reveal h2 { margin-top: 0; } /* .pdf-page h1 { text-shadow: 5px 5px #000 !important; } */ .reveal .progress, .reveal .controls { color: #ffaf00; } .reveal a { /*color: #87ff00;*/ color: #00afd7; text-decoration: underline; } .reveal a:hover { color: #00afd7; text-decoration: none; } .reveal img { display: block; margin: auto; max-height: 560px; position: relative; top: -1em; } .reveal strong { color: #ffaf00; } .reveal .slide-number { background-color: inherit; } .reveal .slide-number a { text-decoration: none; } .reveal .slides h2 ~ p { text-align: left; margin-left: 2em; } </style> # Collaborative mapping without internet connectivity Global FOSS4G 2023 in Prizren, Kosovo 2023-06-28 --- ## Demo: connect to WiFi - Switch off your Internet connectivity - Connect to the WiFi: vmx@foss4g --- ## About me - Volker Mische (vmx) - First contact to OSGeo 15 years ago - Offline-first (Apache CouchDB) - Protocol Labs (IPFS, IPLD, libp2p) --- ## Goals for this talk - Learn about WebRTC - Learn about content-addressing and peer-to-peer networks - Glimpse into IPLD/IPFS - Get excited about direct browser-to-browser communication --- ## Demo: go to Webpage - Go to `192.168.0.50` - Yes, the certificate is self-signed, please accept it - Allow access to your camera, we will scan some QR codes - Don't start scanning yet Note: - Using a raw IP with a self-signed certificate was the best solution. If anyone is interested catch me at the conference and give you a full talk about that topic ;) - Don't we all miss QR code scanning --- ## Content-addressing - Location-addressing: where is the data? - Content-addressing: which data? - Hash of of the data is its identifier Note: - Hashing might some know as checksumming --- ## Demo: scan peers 1. Scan the QR code of someone 2. Make sure that this person also scans your code 3. Now both of you click on "connect" 4. When successful, you get to the next screen, click there to scan another peer - Safari may or may not work (try to reload) 5. Goal: build a network so that all groups are connected. Note: - That you need to click around the same time (you've about 10s) is due to a Firefox bug. --- ## WebRTC - Web Real-Time Communication - Over 10 years old - Known from Videoconferencing (e.g. Jitsi) - Can also be used for data transfers - Low-level, usually used through abstraction layers --- ## WebRTC: flow  <!-- Note: Practically spoken: If two people want to connect, one of them needs to start the process, the other one needs to act on it and then be scanned again by the first one. --> --- ## WebRTC: our way <!---->  --- ## WebRTC: munging - Munging: reconstruct/manipulate existing offers/answers - Use dynamic data as input, fill out the constant one - QR codes contain relatively little data - (libp2p) Id, certificate, host(s), port(s) --- ## WebrRTC: munging  --- ## WebrRTC: munging  --- ## WebrRTC: munging  --- ## WebrRTC: munging  --- ## Munging problems One peer needs to be the initiator, the other the receiver. - Problem: how to determine the initiator - Solution: - Create 2 connections for every peer, one acting as initiator, one as receiver - libp2p creates a unique ID for every peer: - own ID > other ID: use initiator connection - own ID < other ID: use receiver connection Note: determination by time is not possible if you're not connected already --- ## Demo: collab mapping - Click on "Map" - Click on "Draw" and then on the map to add new features - You can remove your features by clicking on "Delete" and then on a feature --- ## Demo: sync features - The most exciting part: click on "Sync features" - Features from everyone who has clicked, should appear on your map! - You can still edit your features, once you synchronize, everyone will get the updated version. --- <!-- about 15mins up to that one --> ## Distributed: data - IPLD: Content-addressed structured data - very similar to JSON (+ binary data + links (CIDs)) - GeoJSON -> IPLD - Automatically get a CID (Content-addressed identifier) - Each feature has a CID - Create an array of all the CIDs of the features you've created --- ## Distributed: transfer libp2p: using its pubsub (publish-subscribe) feature - Create a CID of the array of features (it's just IPLD again) - Publish that CID - Subscribers get the array by that CID - Then get all features by their CID --- ## Distributed: retrieval/storage IPFS: using its retrieval and storage features - When accessing data: automatically asks other peers,<br>who might have the data for a CID - Once found, retreive that data - Store the data of that CID locally - Data that is already there, won't be retrieved again: => If the features stay mostly the same, we will<br>automatically only retrieve the missing ones. Note: remember that getting data by CID, is what content-addressing is about. You don't ask where to get the data from, but just which data you want to get.:w --- ## Demo: peer topology - Click on "Back" - Click on "Topology" - Now you should see how the peers are<br>connected, one of them is you. --- ## Limitations - Works only within the same network (without a NAT) - Sometimes works with Safari - No "scan multiple peers at once" mode --- ## Chances - Cross platform, not App needed - WiFi is easier to set up then internet - e.g. in disaster response cases - Use local network only where it's enough (Spaceteam!) --- The end. --- Source code: https://github.com/vmx/colleemap