Public
Edited
Apr 8
1 star
WebRTC Demo for FAIR (Remote)
chatLog
viewof chatBox = Inputs.text({ label: "Enter message:", submit: true })
{
if (chatBox) {
remoteConnection.dataChannel.send(chatBox);
mutable chatLog += `${chatBox}\n`;
}
}
viewof offer = Inputs.textarea({label: "Offer SDP Object:"})
configuration = {
return {
iceServers: [
// { urls: "turn:freestun.net:3478", username: "free", credential: "free" },
{ urls: "stun:stun.l.google.com:19302" },
{
urls: "turn:turn.speed.cloudflare.com:50000",
username:
"73a69c5847f725b6f7f76802a817f16c47e1da1080c3957d1f4781ee54997021404551406a0ad0509ad3b481492f57063adb364fcb8d8d81bba95d05ec966ebf",
credential:
"aba9b169546eb6dcc7bfb1cdf34544cf95b5161d602e3b5fa7c8342b2e9802fb"
}
]
};
}
remoteConnection = new RTCPeerConnection(configuration)
{
remoteConnection.addEventListener("iceconnectionstatechange", () => {
console.log("ICE connection state:", remoteConnection.iceConnectionState);
});
remoteConnection.addEventListener("icegatheringstatechange", () => {
console.log("ICE gathering state:", remoteConnection.iceGatheringState);
});
remoteConnection.addEventListener("icecandidateerror", (event) => {
console.error("ICE candidate error:", event);
});
}
JSON.parse(JSON.stringify(remoteConnection.localDescription))
remoteConnection.onicecandidate = (e) => console.log("New ICE Candidate found. Current SDP:\n", remoteConnection.localDescription)
remoteConnection.ondatachannel = (e) => {
remoteConnection.dataChannel = e.channel
remoteConnection.dataChannel.onopen = (e) => {
console.log("Connection Open")
}
remoteConnection.dataChannel.onmessage = (msg) => {
mutable chatLog += `${msg.data}\n`
}
}
{
if (offer && !remoteConnection.remoteDescription) {
await remoteConnection.setRemoteDescription(JSON.parse(offer));
console.log("Offer set");
const answer = await remoteConnection.createAnswer();
remoteConnection.setLocalDescription(answer);
console.log("Answer set");
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
