WHIP browser client example

browser-whip-client.js

//Get mic+cam
const stream = await navigator.mediaDevices.getUserMedia({audio:true, video:true});
//Create peerconnection
const pc = new RTCPeerConnection();

//Listen for state change events
pc.onconnectionstatechange = (event) =>{
	switch(pc.connectionState) {
		case "connected":
			// The connection has become fully connected
			break;
		case "disconnected":
		case "failed":
		  // One or more transports has terminated unexpectedly or in an error
			break;
		case "closed":
			// The connection has been closed
			break;
	}
}

//Send all tracks
for (const track of stream.getTracks())
  //You could add simulcast too here
	pc.addTrack(track);

//Create SDP offer
const offer = await pc.createOffer();

//Set it
await pc.setLocalDescription(offer)

//Do the post request to the WHIP endpoint with the SDP offer
const fetched = await fetch(url, {
	method: "POST",
	body: offer.sdp,
	headers:{
		"Content-Type": "application/sdp"
	}
});

//Get the SDP answer
const answer = await fetched.text();

//And set it
await pc.setRemoteDescription({type:"answer",sdp: answer});

Thank. I think I tried that already yesterday. Put that aside, because it didn't work oob with a symmetric NAT connection. Maybe I need to resume, since I noticed that I forgot to add a TURN configuration to my server. I noticed too, that MediaMTX is providing the Link header and that your lib seems to also acknowledge this.

Will report the results. Thanks so far.

Yes, that seems to work now (with a proper TURN configuration for the edge cases).

BTW: I noticed a little problem in whep.js. There is a function call to trickle(). I believe it is a forgotten rename to patch and changed it like so.

https://github.com/medooze/whip-whep-js/blob/13e211ad104f0ecb54465af971a49855d7788dc5/whep.js#L245

I have created two PRs with minor changes.

medooze/whip-whep-js#28
medooze/whip-whep-js#27