RTC Connection

A WebRTC peer connection module

Caveats

• Data channel only - at the moment
• Handling signaling to create the connection is up to you. Signaling values come from Peer.onGeneratedHandshake(handshake).
  • The included test app provides signaling via in-page text boxes whose values can be shared with another host

Getting Started

npm install @freeasin/rtc-connection

import { Peer } from "@freeasin/rtc-connection;

1. Turn off console logging with logToConsole in the constructor
   • new Peer({ logToConsole: false })
2. Set the default outbound channel name with defaultDataChannel in the constructor
   • new Peer({ defaultDataChannel: "myChannel" })
3. Add additional outbound channels with Peer.dataChannel.AddOutboundChannel(channelName)
4. On Peer.onGeneratedHandshake(handshake), provide the handshake value to the opposite host
5. Provide a handler for inbound messages
   • Peer.dataChannel.AddInboundMessageHandler(dataChannelLabel, (evt) => void)
   • evt.data contains the message
6. Handle Peer.dataChannel.outbound.get("CHANNEL_NAME").onOpen to manage your application when a data channel opens between hosts
   • (evt) => {}
   • evt.target will be the channel
   • channel.readyState should be "open"
   • This is where the UX indicate connections between hosts now exists
7. Use Peer.onStateChanged(handler) to define handlers that will be called on every state change for the peer connection

Included Example

1. Run the test app

npm run test

1. Go to http://localhost:8080
2. Click the Add Peer Connection button at the bottom
   • You now have two idential sections on the page
3. Click one of the Generate Offer buttons
   • The handshake signal shown is automatically copied to the clipboard
4. Paste into the other Consume Offer box, and click the Consume Offer button
   • You'll get an alert if you try to paste a handshake signal into the same section that generates it
5. Continue pasting/clicking back-and-forth until the two peer connections agree on how to connect
6. Once the connection is negotiated, the UI changes to "Send" boxes, and you have a peer-to-peer messaging app
   • The typing notification is sent over a different data channel from the messages

Try the same example in two different browser tabs instead of two connections on one page

This also works over different devices locally, or over the Internet, as long as you can exchange the handshake signaling data

License

MIT

See LICENSE for further details.