WebRTC Sample for Uno - WebAssembly
This is a short sample demonstrating how to establish a WebRTC connection between 2 browsers in a Uno WebAssembly application.
- To use it, simply compile and start the Signaling Server. Ensure it is listening on the url http://localhost:6173/.
- Compile and start 2 instances of the WebRTC.Wasm project.
- On the first instance, enter a room name and press Create Room.
- On the second instance, select the room and press Join.
- The connection will be established between the browsers and you can send a message to another instance.
Application Flow
- User A press Create Room
- Application A is creating a SPD Offer (Ice Candidate)
- Application A is sending a
CreateRoom
request to SignalingServer through SignalR and sends the room name and the SPD Offer - Application B receives the
Rooms
message from SignalingServer using SignalR - User B selects the room and press Join
- Application B uses the remote SPD offer to create a SPD Answer
- Application B is sending a
Join
request to SignalingServer through Signal and sends the room id and the SDP Answer - Application A receives the
Answer
message from SignalingServer using SignalR - Application A uses the SDP Answer to launch the WebRTC connection between the two browsers
- The connection is negotiated and established between the 2 browsers
Technology Stack
This project use the following technologies:
- Uno Platform
- Aspnet Core - for the signaling server
- SignalR for communication between server and clients
- TypeScript
- WebRTC JavaScript APIs of the browser - no add-on or polyfills.
Missing Parts
This sample is demonstrating the basic parts of WebRTC by establishing a connection using the interop between the managed code (C#) and JavaScript (here coded in TypeScript).
STUN & TURN Servers
STUN and TURN servers should be configured by creating a RTCConfiguration
object and used in the RTCPeerConnection
constructor or by calling the .setConfiguration()
api. Documentation on Mozilla.
STUN and TURN servers are used to facilitate communication for networks with stricter NAT restrictions. The STUN server will provide help to establish a direct connection between the browsers. When it's definitely not possible because of firewall restrictions, the TURN server could be used as the proxy to transmit data from the peers.
Media Streaming
One of the biggest use case of WebRTC is the webcam streaming between browsers. The .getUserMedia()
api will give access to the streamed media content and it can be sent to other peer using the .addTrack()
api. Documentation on Mozilla.
// Sending the media to the other peer
const stream = await navigator.mediaDevices.getUserMedia(constraints);
for(const track of stream.getTracks())
connection.addTrack(track, stream);