https://github.com/charliedigital/snaprtc
A component library and .NET 9 signaling server for a WebRTC-based remote image capture experience.
https://github.com/charliedigital/snaprtc
webrtc webrtc-signaling-server
Last synced: 4 months ago
JSON representation
A component library and .NET 9 signaling server for a WebRTC-based remote image capture experience.
- Host: GitHub
- URL: https://github.com/charliedigital/snaprtc
- Owner: CharlieDigital
- License: agpl-3.0
- Created: 2025-05-18T20:45:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-18T21:05:38.000Z (about 1 year ago)
- Last Synced: 2025-06-21T04:17:18.629Z (about 1 year ago)
- Topics: webrtc, webrtc-signaling-server
- Language: TypeScript
- Homepage: https://snaprtc.chrlschn.dev
- Size: 1.66 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SnapRTC
Ever start filling out a form on your desktop that asks you for a picture of your ID? Then you whip our your phone and upload the picture to Google Photos, download it on your desktop, and then upload it on your desktop?
SnapRTC aims to solve this by providing a serverless, peer-to-peer, WebRTC based solution to allow developers creating forms to easily add form controls to get images from a device onto a desktop or from one device to a form flow started on another device.
SnapRTC does this by directly connecting the two sides using WebRTC and then using a data channel to pass the information between them.
## Terminology
|Term|Definition|
|--|--|
|**Initiator**|The side where the user initiates the session; where the form is.|
|**Capture**|The side where the user will perform the actual capture.|
|**Offer**|This is the configuration data for the initiator that we need to transmit to the capture side.|
|**Answer**|This is the configuration data for the capture side that we need to transmit to the initiator.|
|**SignalR**|This is a Microsoft ASP.NET runtime component that provides a brokered web socket channel. We use this channel to send the signaling data between the two sides to connect them.|
## What Happens
1. At startup, the initiator generates a session ID and encodes it into a QR code.
2. The initiator also starts a connection to a SignalR server to register the session
3. From another device ("capture side"), the user scans the QR code
4. This initiates a connection to the signaling server via SignalR on the same session
5. The initiator is notified that the capture side has connected and generates and offer
6. The initiator transmits the offer to the capture side via the signaling server
7. The capture side receives this offer
8. The capture side generates an answer to the initiator and disconnects from the signaling server
9. The initiator receives the answer and disconnects from the signaling server
10. The two sides connect peer-to-peer via WebRTC using the offer and answer
11. The capture side transmits images to the initiator
## Local Dev
For local development, follow these steps:
In **window 1**, we start the .NET 9 backend which provides a web socket server (via SignalR) to allow the capture side to transmit an "answer" to the initiator.
```bash
cd signaling
dotnet run # Start the signaling server
```
In **window 2**, we build (TODO: add `watch`) the main JavaScript library:
```bash
cd packages/snaprtc
pnpm run build # Build the package
```
In **window 3**, we can start the demo app.
```bash
cd demo
pnpm run dev # Run the demo app
```
You will need to use a combination of VS Code dev tunnels and ngrok or just ngrok to expose the local application.
Dev tunnels do not correctly upgrade the web socket connections for SignalR so ngrok is a better choice.
```bash
ngrok http 5081 # Start ngrok for the backend signaling server
ngrok http 5173 # Start ngrok for the demo page
```
## Building the Container
To build the container for the backend:
```bash
docker buildx build -t snaprtc/signaling -f ./Dockerfile .
```
## Resources
- [simple-peer](https://github.com/feross/simple-peer)
- [pnpm monorepos](https://dev.to/vinomanick/create-a-monorepo-using-pnpm-workspace-1ebn)
- [Creating Vue component libraries](https://www.matijanovosel.com/blog/making-and-publishing-components-with-vue-3-and-vite)